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

Question

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

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

Answer 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.

浏览器在预渲染期间优先考虑此资源，将其标记为"stylesheet"关键渲染路径所需，而内联元素的优先级较低。

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

Deferring CSS load, why is including preload <link> faster?

html

javascript

css

performance

progressive-enhancement