html资源的预加载preload

在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