15

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

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

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

参考

4

1 回答 1

5

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

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

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

即使用javascript。

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

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

然而，把它和一粒盐放在一起。我会毫不犹豫地说谷歌不知道他们在做什么。

编辑：关于Flash-of-unstyled-content 的注释（缩写为 FOUC）

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

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

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

于 2013-10-20T22:02:37.367 回答