优化 CSS 交付 - Google 的建议

Question

Google 建议在 head 中使用非常重要的 CSS 内联，在 <noscript><link rel="stylesheet" href="small.css"></noscript> 中使用其他 CSS。

这在我心中提出了几个问题：

• 如何在两个文件中确定 CSS 的优先级。该页面的所有内容看起来都很重要。显示、字体等。如果我将它移到底部，那么它如何帮助页面呈现。会不会导致重绘等？
• 文档就绪事件后是否需要该 CSS？来自here。
• 'CSS 可以'如何进入<noscript></noscript>，这是用于脚本的？启用 JavaScript 后它会起作用吗？是否兼容浏览器？

Reference

Answer 1

根据我对问题中给出的链接的阅读：

1. 根据消除 Flash-of-Unstyled-Content 效果来选择内联的 CSS 声明。因此，请确保所有页面元素的大小和颜色都正确。 （当然，如果你使用网络字体，这是不可能的。）
2. 由于未内联的 CSS 是可延迟的，因此您可以在有意义的时候加载它。在我看来，在DOMContentReady 上加载它违背了优化的要点：在文档完全加载之前启动新的 HTTP 请求可能会减慢页面加载的其余部分。另外，请参阅我的下一点：
3. 该示例将 noscript 标记中的 CSS 显示为备用。在示例下方，页面状态

   页面onload后加载原始的small.css。

即使用javascript。

如果我可以在这篇文章中添加我自己的个人观点：

• 这种优化似乎对代码可读性特别有害：样式表不属于 noscript 标记，并且正如 cmets 中指出的那样，它没有通过验证。
• 它将破坏任何未来对 HTTP（或其他协议）请求的潜在增强，因为网络事务是通过 javascript 硬编码的。
• 最后，在什么情况下您会获得性能提升？也许如果您的页面加载了很多最初隐藏的内容；但是我希望浏览器本身能够比这个 hack 更好地优化页面加载。

不过，请注意这一点。我会毫不犹豫地说 Google 不知道他们在做什么。

---

编辑：注意flash-of-unstyled-content（简称 FOUC）

假设您有一段跨越多行的文本，其中包含一些具有自定义样式的文本，例如 <span class="my-class">。现在，假设您的 CSS 将设置为 .my-class { font-weight:bold }。如果该 CSS 不是内联样式表的一部分，.my-class 将在延迟加载完成后突然变为粗体。文本块可能会重排，如果需要额外的行，也可能会改变大小。

因此，您拥有的是部分样式内容，而不是完全没有样式的内容。

因此，在考虑延迟的 CSS 时应该小心。一种安全的方法是仅延迟用于显示本身被延迟的内容的 CSS，例如在用户交互后显示的隐藏元素。