优化CSS交付 - Google的建议

Question

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

这引起了我的一些问题：

• 如何在两个文件中确定CSS的优先级。该页面的所有内容都很重要。显示，字体等。如果我将它移动到底部，那么它如何帮助页面渲染。不会引起重画等吗？
• Document ready事件后是否需要CSS？来自here。
• 'CSS'如何进入<noscript></noscript>，这是针对脚本的？启用JavaScript时它会起作用吗？浏览器兼容吗？

Reference

Answer 1

基于我对问题中给出的链接的阅读：

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

     

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

     即使用javascript。

如果我可以将自己的个人意见添加到这篇文章中：

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

然而，带上一粒盐。我会毫不犹豫地说谷歌不知道他们在做什么。

---

编辑：注意flash-of-unstyled-content（缩写为FOUC）

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

因此，除了完全没有样式内容的闪现之外，您还有一些部分风格的内容。

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