8

谷歌页面速度洞察

“尝试延迟或异步加载阻塞资源，或直接在 HTML 中内联这些资源的关键部分。”

上述问题提示我输入 2 个样式表。所以我用下面的代码加载我的样式表来推迟加载样式表。

window.onload = loadResource;

function loadResource(){
    css_array=[resource1,resource2];
    css_init(css_array);
}

function css_init(hrefPath){
    for(a = 0; a < hrefPath.length; a++){
        link=document.createElement('link');
        link.href=hrefPath[a];
        link.rel='stylesheet';
        document.getElementsByTagName('head')[0].appendChild(link);
    }
}

使用上面的代码，所有css样式表都在被触发后加载（chrome开发工具的网络选项卡DOMContentLoaded Event）Load Event

但即使有上述情况，渲染阻塞问题仍未解决。知道为什么它不起作用以及如何正确推迟 CSS 样式表吗？谢谢您的帮助！

4

2 回答 2

1

这是一个稍微复杂的问题。看看这些（也阅读评论）：

另外，你可以head.js试一试：http ://headjs.com/

你有充分的理由像这样加载 CSS 吗？

于 2014-01-31T04:46:01.793 回答
0

我认为您可能走错了方向，通常不推荐在 DOM 准备好后加载 CSS。这是插入 CSS 的 HTML 规范的链接http://www.w3.org/TR/html5-author/the-link-element.html#the-link-element，大多数浏览器都会针对 CSS 进行优化放在文档的头部。

如果您正在尝试优化速度，您可能会考虑将您的样式移动到一个缩小的样式表中，而不是通过 JavaScript 发出两个异步请求。如果您需要两个样式表保持分离并且担心性能影响，您可以考虑移动一些 CSS 内联。

这是雅虎加速网站最佳实践所写的必读文章的链接http://developer.yahoo.com/performance/rules.html#css_top 所以我想简短地回答你的问题（一般规则除了边缘情况）将通过在页面顶部加载一个 CSS 来优化您的页面。即使你可以设法让你的 CSS 下载得更快，使用 JavaScript 来加载它。我想你会发现你会花更多的时间在绘画和样式计算（页面渲染）上。更不用说如果有人关闭了 JavaScript 会发生什么

如果您仍在寻找更高的性能，您可以查看 CDN 或从无 cookie 的子域创建自己的 CDN。

于 2014-02-06T23:55:44.623 回答