Google Page Speed Insights
"Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the 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 事件 和 Load 事件 被触发后加载所有 css 样式表(chrome 开发工具的网络选项卡)
但即使有了上述渲染阻塞问题仍未解决。知道为什么它不起作用以及如何正确延迟 css 样式表吗？感谢您的帮助!
最佳答案
这是一个稍微复杂的问题。看看这些(也请阅读评论):
- 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/eliminating-the-css-bottleneck/
此外，您可以试试 head.js:http://headjs.com/
你有充分的理由像这样加载 CSS 吗？
关于javascript - 即使在异步加载资源后，Google Page Speed 仍然会出现渲染阻塞问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21400708/