这在我脑海中提出了几个问题:
>如何在两个文件中排列CSS的优先级。该页面的所有内容都很重要。显示,字体等。如果我将其移动到底部,那么它如何帮助页面呈现。不会引起重绘等吗?
>文档就绪事件之后是否需要CSS?从here获得。
> CSS如何进入< noscript>< / noscript>,这是脚本?启用JavaScript时会起作用吗?浏览器是否兼容?
Reference
解决方法
>根据消除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,例如用户交互后显示的隐藏元素。