延迟 CSS 加载，为什么包含 preload <link> 更快？答案

【问题标题】：Deferring CSS load, why is including preload <link> faster?延迟 CSS 加载，为什么包含 preload <link> 更快？
【发布时间】：2017-08-20 03:28:20
【问题描述】：

我正在测试预加载，我想知道为什么在预加载脚本速度快十分之一秒之前包含预加载链接。

rel="preload" 告诉浏览器开始下载样式表，不要阻止加载。该脚本从 URL 创建样式表并将其应用于页面。为什么独立脚本的性能不高？

<link rel="preload" href="https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css" as="style" onload="this.rel='tachyons.min.css'">


<script type="text/javascript">
  //<![CDATA[
  if(document.createStyleSheet) {
    document.createStyleSheet("https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css");
  }
  else {
    var styles = "@import url('https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css');";
    var newSS=document.createElement('link');
    newSS.rel='stylesheet';
    newSS.href='data:text/css,'+escape(styles);
    document.getElementsByTagName("head")[0].appendChild(newSS);
  }
  //]]>
  </script>

预加载 + 脚本： https://codepen.io/JulianNorton/full/GvxpVr/

仅脚本： https://codepen.io/JulianNorton/pen/vJRLBK

【问题讨论】：

你不能像使用 js 那样推迟 css。我所知道的使 css 非渲染阻塞的唯一方法是内联任何关键的 CSS 并将其余的加载到页脚中 - 这是我书中的维护噩梦。并非所有设备都支持rel="preload"，并且一次仅限于一个元素以防止滥用。我能想到的使用预加载的最佳示例是在文档 A 的页脚处预加载整个文档 B，如果用户在完成文档 A 后很有可能最终会访问文档 B
@Ihazkode 减少噩梦的一种方法是使用工具链自动预编译任何具有关键内联 CSS 的静态 HTML 文件，您可以将其存储在单独的文件中以供开发，但自动生成内联生产。这是双赢的。但是根据 MDN 页面，对于支持 rel="preload" 的浏览器，它不一定会否定渲染阻塞，但它可能会通过尽快处理其他预检机制来减少阻塞时间。
@PatrickRoberts 很好奇你为什么不直接回答这个问题。毕竟，您似乎知道答案。
是在回复评论，而不是问题。不允许仅链接的答案，但这就是回答问题所必需的。不幸的是，这个问题不是题外话，因此，除了评论，我没有做任何事情。

标签： javascript html css performance progressive-enhancement

【解决方案1】：

答案可以在MDN找到

preload has other advantages too. Using as to specify the type of content to be preloaded allows the browser to:

Prioritize resource loading more accurately.

浏览器在预渲染时优先考虑该资源，将其标记为关键渲染路径所需的“样式表”，而内联元素的优先级较低。

【讨论】：