目前,我正在研究几个关于网站性能提升的技巧/建议。因此,我开始阅读 Steve Souders 的优秀著作(高性能网站和更快的网站),但是我对其中一些规则有几个问题。例如,High performance web sites 的第5章指出,CSS 样式表应该放在页面顶部,因为将它们放在底部会停止浏览器执行的渐进式呈现。根据 Steve 的说法,一些浏览器(尤其是 IE)会卡住并显示空白页面而不是逐步显示项目。这是该测试页面的 URL: 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,但仍然没有看到书中描述的预期结果...)
更新:最后补充一点:我决定在asp.net中复制Steve的cgi脚本,并创建了一个简单的通用处理程序,可以像sleep.cgi脚本一样完成相同的任务。我发现,在头部放置样式表引用(需要一些时间来加载,我选择了10秒)会导致书中报告的空白页面问题。如果将其放在末尾,浏览器会先渲染所有内容,然后在样式加载后进行第二次渲染。在我看来,这是有道理的,因为当你把样式放在头部元素时,浏览器在渲染之前要等到获取到样式(注意其他引用的组件仍在后台下载,但它们不会显示在屏幕上)。另一方面,当它们在底部时,浏览器只会应用当前的样式,直到被样式表卡住。当发生这种情况时,它只会显示已加载的html,直到样式表(如果下面有任何图像,浏览器仍将下载它们,但只有在样式加载后才会渲染它们)。所以,经过这些测试,我开始认为:1.我在这里遗漏了什么或2.yahoo和google的建议今天已经不再有效。
您有什么想法?
谢谢大家!