W3C_Preload

preload简介

一种资源预加载的方式。用于提高性能，方便开发人员控制资源加载。

preload 指示浏览器预先请求当前页面接下来会需要用到的资源。

在chrome中，采用 preload 预加载资源后，后续没有在对资源进行请求(3s)，控制台会提示说是否有必要预加载该资源。

使用preload的几种方式

方式1：html页面书写link标签

<link rel="preload" href="资源地址" as="script">

as 属性告诉浏览器加载的是什么资源， 常见取值有："script","style","image","media","document"

不加as参数，资源请求优先级和异步xhr一样，非常低。(新版chrome无as或错误值将不会进行preload)

对于字体文件 as="font" ，需要加上 crossorigin 属性: fonts were fetched using anonymous mode CORS , 否则接下来的字体资源请求会重新获取（二次获取）。

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

type和as有一样的作用，取值不一样

一行代码实现css懒加载

<link rel="preload" as="style" href="asyncstyle.css" onload="this.rel='stylesheet'">

响应式加载

<link rel="preload" as="image" href="map.png" media="(max-width: 600px)">
<link rel="preload" as="script" href="map.js" media="(min-width: 601px)">

方式2：js创建link标签

var elem = document.createElement("link");
elem.setAttribute("href", url);
elem.setAttribute("as", "script");
elem.setAttribute("rel", "preload");
document.head.appendChild(elem);

利用http响应头预加载

在html页面的响应头中增加 Link 响应头，其内容为 <./js/image-optimizer.js>; rel=preload; as=script

在html文档下载完毕时，则会进行 ./js/image-optimizer.js 的预加载

浏览器兼容性

chrome 50+,safari 11+等

检测 <link rel="preload"> 是否被支持

const preloadSupported = () => { 
  const link = document.createElement('link'); 
  const relList = link.relList; 
  if (!relList || !relList.supports) {
    return false; 
  }
  return relList.supports('preload'); 
};

与 prefetch 的异同点

区别

当前页面必要资源则采用 preload ,将来页面使用的资源采用 prefetch

A页面发起 a.js 的 prefetch 预加载，在请求过程中此时调转到B页面，a.js 请求不会中断，而换成 preload预加载则请求会中断。

共通点

Chrome 有四种缓存: HTTP 缓存，内存缓存，Service Worker 缓存和 Push 缓存。preload 和 prefetch 都被存储在 HTTP 缓存中。

当一个资源被 preload 或者 prefetch 获取后，它可以从 HTTP 缓存移动至渲染器的内存缓存中。如果资源可以被缓存（比如说存在有效的cache-control 和 max-age），它被存储在 HTTP 缓存中可以被现在或将来的任务使用，如果资源不能被>缓存在 HTTP 缓存中，作为代替，它被放在内存缓存中直到被使用。