为什么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。通过javascript将所有和元素注入到文档中来维护CSS规则的应用顺序。