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

前端之家收集整理的这篇文章主要介绍了html – 优化CSS传递 – Google的建议前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Google建议在< noscript>< link rel =“stylesheet”href =“small.css”>< / noscript>中的头部和其他CSS中使用非常重要的CSS内联。

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

>如何在两个文件中排列CSS的优先级。该页面的所有内容都很重要。显示,字体等。如果我将其移动到底部,那么它如何帮助页面呈现。不会引起重绘等吗?
>文档就绪事件之后是否需要CSS?从here获得。
> CSS如何进入< noscript>< / noscript&gt,这是脚本?启用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,例如用户交互后显示的隐藏元素。

原文链接:https://www.f2er.com/html/232789.html

猜你在找的HTML相关文章