Question

我正在测试预加载，并且我想知道为什么包含预加载链接，然后预加载脚本加快了十分之一秒。

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.

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

推迟CSS加载，为什么包括preload <link />更快？

1 个答案: