html – 优化CSS传递 – Google的建议

>根据消除Flash的Unstyled-Content效果，选择哪些CSS声明是内联的。所以，确保所有页面元素都是正确的大小和颜色。 (当然，如果您使用网络字体，这将是不可能的。)
>由于没有内联的CSS是可延迟的，所以你可以随时加载它。在我看来，在DOMContentReady中加载它是违反了这个优化的观点：在文档完全加载之前启动新的HTTP请求将潜在地减慢页面加载的其余部分。另外，请看下面的一点：
>该示例将noscript标签中的CSS显示为后备。下面的例子中，页面显示

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

即使用javascript。

如果我可以添加自己的个人意见这件作品：

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

不过，请吃一粒盐。我会犹豫，说Google不知道他们在做什么。

编辑：flash-of-unstyled-content注释(缩写为FOUC)

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

所以，而不是一丝不苟的内容，你有一些部分风格的内容。

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