现代浏览器、渐进式渲染和将 CSS 放在底部

Question

目前，我正在研究几个关于网站性能提升的技巧/建议。因此，我开始阅读 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的建议今天已经不再有效。

您有什么想法？

谢谢大家！

- Luis Abreu

---

我理解你的意思是，如果FOUC可以使页面加载更快，那么你认为它是可取的，对吗？（我认为这是一种有效的方法，只是通常被认为是不可取的...） - StackExchange What The Heck

不，那不是我的观点。我的意思是，雅虎/谷歌的建议和史蒂夫的书中描述的行为已经不再正确，即将样式表放在底部会导致渐进式呈现停止，你会看到一个空白页面。事实上，我得到了相反的结果，即如果我将样式表放在页面顶部，并且该样式表需要10秒钟才能下载，那么你就会得到高性能网站中提到的空白页面。 我知道FOUC不好，但我只是在寻找事实... - Luis Abreu

噢，这不太是关于加载页面的最佳实践讨论，而更多地是一个关于是否有空白页面的问题吗？ - StackExchange What The Heck

更多是理解真相的问题。史蒂夫的书、谷歌和雅虎都说，将样式表放在页面底部意味着没有渐进式渲染，这就是为什么应该将它放在顶部的原因。例如，这就是雅虎的说法:“用户体验。 将样式表放在文档底部的问题是，在许多浏览器中，包括Internet Explorer，它会禁止渐进式渲染。这些浏览器阻止渲染以避免如果它们的样式发生变化而重新绘制页面元素。用户只能看到一个空白的白色页面。”但这已经不再是真实情况了... - Luis Abreu

我会查阅讨论关键渲染路径的人。根据CSS的大小，您可以在页面顶部用样式标签将其内联。有grunt插件可以实现这一点。通常他们说10-14k的CSS可以内联到页面中，并且应该是页面顶部布局所需的内容。然后，在任何需要的地方包含更多的CSS，但要知道请求/加载可能会延迟。 - mikevoermans

Answer 1

在页脚中简单插入<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在页面折叠部分之上，将其内联到头部，并使用上述方法稍后加载主要样式表。

我建议搜索“above the fold css”，并查看Google Pagespeed Insights。

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

- mz3