html - 优化 CSS 交付 - Google 的一项建议

Question

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

这在我脑海中提出了几个问题:

• 如何在两个文件中确定 CSS 的优先级。该页面的所有内容看起来都很重要。显示、字体等。如果我将它移到底部，那么它如何帮助页面呈现。会不会造成重绘等问题？
• Document ready 事件后是否需要 CSS？从 here 得到的.
• “CSS 可以”如何进入内部 <noscript></noscript> , 这是脚本？它会在启用 JavaScript 时工作吗？浏览器兼容吗？

Reference

Answer 1

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

<醇>

根据消除 Flash-of-Unstyled-Content 效果来选择内联 CSS 声明。因此，请确保所有页面元素的大小和颜色都正确。 (当然，如果你使用网络字体，这是不可能的。)

由于未内联的 CSS 是可延迟的，因此您可以在任何有意义的时候加载它。正在加载 DOMContentReady ，在我看来，违背了这种优化的观点:在文档完全加载之前启动新的 HTTP 请求可能会减慢其余页面的加载速度。另外，请参阅我的下一点:

该示例在 noscript 标记中显示了 CSS 作为后备。在示例下方，页面状态

The original small.css is loaded after onload of the page.

即使用 javascript。

如果我可以对这篇文章添加我自己的个人意见:

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

然而，对此持保留态度。我会犹豫地说 Google 不知道他们在做什么。

---

编辑:关于 flash-of-unstyled-content 的注释(缩写为 FOUC)

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

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

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