起因

  • 今天在帮同事看一个BUG的时候发现了一个奇怪的写法 <link rel="preload" href="xxx.js" as="script">
    之前只知道link标签是用来引入样式文件的，这个写法明显是引入js，什么情况？？
    然后google了一下。

官方说明

  • 元素的 rel 属性的属性值preload能够让你在你的HTML页面中 元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。
    简单概括：预加载资源
  • 我们将使用preload作为rel属性的属性值。这种做法将把 元素塞入一个预加载器中，
    这个预加载器也将用于其他我们所需要的，各种各样的，任意类型的资源。为了完成基本的配置，
    你还需要通过 href和as 属性指定需要被预加载资源的资源路径及其类型。
  • 比如
    1
    2
    <link rel="preload" href="style.css" as="style">
    <link rel="preload" href="main.js" as="script">

使用preload好处

  • 使用 as 来指定将要预加载的内容的类型，将使得浏览器能够：
  1. 更精确地优化资源加载优先级。
  2. 匹配未来的加载需求，在适当的情况下，重复利用同一资源。
  3. 为资源应用正确的内容安全策略。
  4. 为资源设置正确的 Accept 请求头。

as属性都有那些

  1. audio: 音频文件。
  2. document: 一个将要被嵌入到<frame>或<iframe>内部的HTML文档。
  3. embed: 一个将要被嵌入到<embed>元素内部的资源。
  4. fetch: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。
  5. font: 字体文件。
  6. image: 图片文件。
  7. object: 一个将会被嵌入到<embed>元素内的文件。
  8. script: JavaScript文件。
  9. style: 样式表。
  10. track: WebVTT文件。
  11. worker: 一个JavaScript的web worker或shared worker。
  12. video: 视频文件。

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">

引用
MDN
w3cplus
HelloHello233