现代浏览器，底部渐进式渲染和 CSS答案

【问题标题】：Modern browsers, progressive rendering anc CSS at bottom现代浏览器，底部渐进式渲染和 CSS
【发布时间】：2013-11-07 19:22:03
【问题描述】：

目前，我正在研究一些提高网站性能的提示/建议。所以，我从 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.) yahoo 和 google 的建议今天不再有效。

想法？

谢谢大家！

【问题讨论】：

我是否理解您认为 FOUC en.wikipedia.org/wiki/Flash_of_unstyled_content 理想如果这意味着您最终会获得更快的页面加载？（我认为这是一种有效的方法，只是它通常被认为是不可取的......）
不，这不是我的意思。我要说的是，Yahoo/Google 推荐和史蒂夫的书中描述的行为不再正确，即，将样式表放在底部最终会暂停渐进式呈现，您将看到一个空白页面。事实上，我最终得到了相反的结果，即，如果我将样式表放在页面顶部，并且该样式表需要 10 秒才能下载，那么您最终会得到中提到的空白页面高性能网站。我知道FOUC不好，但我只是在寻找事实......
啊，所以少讨论加载页面的最佳实践，而更多的是关于是否有空白页面的问题？
更多了解真相的问题。 Steve 的书、Google 和 Yahoo 都说将样式表放在页面末尾意味着没有渐进式渲染，这就是为什么你应该把它放在顶部的原因。例如，这里是雅虎所说的：“用户体验。将样式表放在文档底部附近的问题是它禁止在许多浏览器中进行渐进式呈现，包括 Internet Explorer。这些浏览器阻止呈现以避免不得不重绘页面元素如果他们的风格改变了。用户被困在一个空白的白色页面上。这不再是真的......
@LuisAbreu，正确我在 Chrome v34 上也有这种行为。 把你的 CSS 放在底部如果你的意图是尽快显示页面。

标签： css performance browser stylesheet

【解决方案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、将该部分内联到页眉中以及稍后使用上述方法加载主样式表。

我建议搜索“首屏 css”并查看 Google Pagespeed Insights。

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

【讨论】：