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

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);
    }
}

与上面的代码的所有CSS样式表后,加载DOMContentLoaded Event和Load Event已经被解雇(的Chrome浏览器开发工具,网络选项卡)

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

Answer 1

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

• http://mattgadient.com/2012/12/24/css-blocking-wordpress-and-w3tc-how-to-get-parallel-downloads/
• http://blog.yoav.ws/2011/10/Unblocking-blocking-stylesheets
• http://www.guypo.com/technical/elimination-the-css-bottleneck/

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

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

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