pageload - 为什么 Google 建议在 noscript 中包装样式表链接？

Question

刚刚在 Google 的 PageSpeed 文档上注意到这条奇怪的建议：

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

他们建议将简短的外部样式表转换为内联<style>元素，以避免阻塞。我理解你为什么要这样做。

但是在他们的示例代码中，他们保留了指向外部样式表的链接，但他们只是将其移动到底部并将其包装在一个<noscript>元素中。他们还没有明确说明他们希望通过这个实现什么。

他们的理由是什么？

Answer 1

<style>仅包含所有 CSS 规则的子集以获取一些初始样式（在示例情况下只有.blue规则）。您仍然需要完整的 css 文件，但它仅在页面加载后加载。如果 JS 被禁用，则确保始终加载。如果启用了 JS，它会延迟到页面完全加载（否则链接标签会阻塞渲染。）

页面加载后会加载原始的 small.css。CSS 规则的应用顺序是通过 javascript 将所有的和元素注入到文档中来维护的。