4

目前，我正在研究一些提高网站性能的技巧/建议。因此，我从 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.）雅虎和谷歌的建议今天不再有效。

想法？

多谢你们！

4

1 回答 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。

https://developers.google.com/speed/pagespeed/insights/

于 2014-10-14T16:46:54.300 回答