prefetch/preload

[nmsn]

原文：happylindz/blog#17

概念

• preload: 当浏览器解析到这行代码就会去加载 href 中对应的资源但不执行，待到真正使用到的时候再执行
• prefetch: 作用是告诉浏览器未来可能会使用到的某个资源，浏览器就会在闲时去加载对应的资源，若能预测到用户的行为，比如懒加载，点击到其它页面等则相当于提前预加载了需要的资源

特点

正确使用 preload/prefetch 不会造成二次下载，也就说：当页面上使用到这个资源时候 preload 资源还没下载完，这时候不会造成二次下载，会等待第一次下载并执行脚本。

对于 preload 来说，一旦页面关闭了，它就会立即停止 preload 获取资源，而对于 prefetch 资源，即使页面关闭，prefetch 发起的请求仍会进行不会中断。

preload 是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源，而 prefetch 是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源。所以建议：对于当前页面很有必要的资源使用 preload，对于可能在将来的页面中使用的资源使用 prefetch。

优先级

• 对于使用 prefetch 获取资源，其优先级默认为最低，Lowest，可以认为当浏览器空闲的时候才会去获取的资源。
• 而对于 preload 获取资源，可以通过 "as" 或者 "type" 属性来标识他们请求资源的优先级（比如说 preload 使用 as="style" 属性将获得最高的优先级，即使资源不是样式文件)
• 没有 “as” 属性的将被看作异步请求。

preload as 的可用属性

• audio: Audio file, as typically used in <audio>.
• document: An HTML document intended to be embedded by a <frame> or <iframe>.
• embed: A resource to be embedded inside an <embed> element.
• fetch: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.
• font: Font file.
• image: Image file.
• object: A resource to be embedded inside an <object> element.
• script: JavaScript file.
• style: CSS stylesheet.
• track: WebVTT file.
• worker: A JavaScript web worker or shared worker.
• video: Video file, as typically used in <video>.