Question

Google Page Speed Insights

“尝试推迟或异步加载阻止资源，或者内联这些资源的关键部分直接在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);
    }
}

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

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

Answer 1

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

此外，您可以尝试head.js：http://headjs.com/

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

http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/

Answer 2

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

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

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

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

即使在加载资源异步后，Google Page Speed仍然会出现渲染阻止问题

2 个答案: