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

Question

刚刚在 Google 的 PageSpeed 文档中注意到了这条奇怪的建议:

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

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

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

他们的理由是什么？

Answer 1

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

The original small.css is loaded after onload of the page. The application order of CSS rules is maintained by injecting all the and elements into the document through javascript.