目前,我正在研究改善网站性能的一些提示/建议.所以,我从史蒂夫·索德斯(Steve Souders)的优秀书籍(高性能网站甚至更快的网站)开始,但我对一些提出的规则提出了几个问题.实际上,高性能网站的第5章说,CSS样式表应该放在页面的顶部,因为将它们放在底部会停止浏览器执行的渐进式渲染.根据史蒂夫的说法,一些浏览器(最着名的是IE)确实遇到了它并显示空白页而不是逐步显示项目.这是该测试页面的网址：
http://stevesouders.com/hpws/css-bottom.php
现在,我确实理解我们正在谈论一本有几年的书,并且浏览器(包括IE)已经更新和改进.我问这个的原因是因为我不能重现他用任何当前版本的FF,Chrome或IE提到的行为.
嗯,雅虎(http://developer.yahoo.com/performance/rules.html#css_top)和谷歌(https://developers.google.com/speed/docs/best-practices/rendering#PutCSSInHead)仍然这么说.
所以,我想知道的是,浏览器是否已经在这个领域发展,这只是问题,比如IE 8？如果是这样的话,为什么没有雅虎和谷歌更新他们的建议？ (顺便说一下,我已经尝试过从IE11中模拟IE7,但仍然没有看到书中描述的预期结果…)
* UDPATE *还有一个最后的注释：我决定在asp.net中重现Steve的cgi脚本,并且我创建了一个简单的通用处理程序,它与sleep.cgi脚本做同样的事情.我在这里看到的是,在头部内部放置一个样式表引用(需要花费一些时间来加载 – 我已经用了10秒),最终产生了书中报告的空白页面问题.如果放在最后,浏览器最终会渲染所有内容,并在加载后应用样式进行第二次传递.在我看来,这是有道理的,因为当你将样式放在header元素中时,浏览器会保持不变直到它在呈现之前获得样式(注意其他引用的组件仍在后台下载,但它们不是显示在屏幕上).另一方面,当它们位于底部时,浏览器将简单地应用当前样式,直到它卡在样式表中.当发生这种情况时,它只显示它已经加载的html,直到样式表(如果下面有任何图像,浏览器仍会下载它们,但它只会在加载样式后呈现它们).
所以,经过这些测试,我开始认为1.)我在这里遗漏了一些东西或2.)雅虎和谷歌的建议今天不再有效.
思考？
多谢你们！
最佳答案 只需插入< link>页脚中的标记不是推迟样式表的方法.目前接受的方法是使用javascript附加它：
<script>
function loadStyleSheet(e){if(document.createStyleSheet)try{document.createStyleSheet(e)}catch(t){}else{var l;l=document.createElement("link"),l.rel="stylesheet",l.type="text/css",l.media="all",l.href=e,document.getElementsByTagName("head")[0].appendChild(l)}}loadStyleSheet("/your/stylesheet.css");
</script>
优化页面的速度包括确定哪些CSS在首页,在标题中内联该部分,以及稍后使用上述方法加载主样式表.
我建议您进行一些搜索“在折叠css之上”并查看Google Pagespeed Insights.
