在 html 页面中加载 css 资源的时候一般这样使用

<link rel="stylesheet" type="text/css" href="index.css" />

现在可以使用  <link rel="preload" />  来预加载各种资源，例如字体，脚本，图片，音频，这样可以在页面构建 dom 的时候加载资源，而且不会延迟页面的 onload 事件，加载后的资源可以给当前页面使用。

<link rel="preload" href="used-later.js" as="script" />
<!-- ...other HTML... -->
<script>
  // 在页面加载完成的时候，通过script元素引入资源，由于资源已经预加载了，可以立即使用
  var usedLaterScript = document.createElement('script');
  usedLaterScript.src = 'used-later.js';
  document.body.appendChild(usedLaterScript);
</script>

利用 preload 来预加载 css 文件并立即使用

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

配合媒体查询

在 link 元素有一个 media 属性，可以用来指定符合媒体查询条件下加载指定的资源，例如在宽度大于 601px 的时候会预加载 bg-image-wide.png 图片，在小于 600px 的时候会预加载 bg-image-narrow.png 图片，预加载不会使用，所以在脚本上使用相应媒体查询条件下的预加载的资源

<link
  rel="preload"
  href="bg-image-narrow.png"
  as="image"
  media="(max-width: 600px)"
/>
<link
  rel="preload"
  href="bg-image-wide.png"
  as="image"
  media="(min-width: 601px)"
/>
<script>
    var mediaQueryList = window.matchMedia("(max-width: 600px)");
    var header = document.querySelector('header');
    if (mediaQueryList.matches) {
        header.style.backgroundImage = 'url(bg-image-narrow.png)';
    } else {
        header.style.backgroundImage = 'url(bg-image-wide.png)';
    }
</script>

Preload 特性检测

并不是所有的浏览器都支持 preload 功能，如果浏览器不支持 preload 功能，那么资源就不会被加载，我们可以检测是否有对应的功能来做相应的兼容策略

var DOMTokenListSupports = function (tokenList, token) {
  if (!tokenList || !tokenList.supports) {
    return;
  }
  try {
    return tokenList.supports(token);
  } catch (e) {
    if (e instanceof TypeError) {
      console.log("The DOMTokenList doesn't have a supported tokens list");
    } else {
      console.error("That shouldn't have happened");
    }
  }
};
var linkSupportsPreload = DOMTokenListSupports(
  document.createElement('link').relList,
  'preload'
);
if (!linkSupportsPreload) {
  // Dynamically load the things that relied on preload.
}

Prload 和 Prefetch

当能确定网页在未来一定会使用到某个资源时，开发者可以让浏览器提前请求并且缓存好以供后续使用。prefetch 支持预拉取图片、脚本或者任何可以被浏览器缓存的资源。
对于当前页面很有必要的资源使用 preload，对于可能在将来的页面中使用的资源使用 prefetch