性能优化必知preload 和 prefetch
点击上方蓝色字体，关注我们
今天我们来探索一下前端资源的一些指令以及它们如何来提高网站性能的。你应该听过 preload 和 prefetch，但这次我们想深挖它们之间的不同以及如何受益于它们。它们允许开发者优化资源的传递时间、缩短往返次数等。
preload:
preload 是一个新的 Web 标准，在页面生命周期中提前加载你指定的资源，同时确保在浏览器的主要渲染机制启动之前。这样就可以保证了其不会阻止浏览器的渲染并提前加载资源以此来提高性能。通常使用 preload 是用来加载图片、CSS、JavaScript和字体文件。preload 的语法和加载 CSS 类似：
<link rel="stylesheet" href="styles/main.css"> // 加载CSS除了要把 rel 改为 preload ，同时还要指定 as 属性，下面是一个简单的例子：
<head>
<meta charset="utf-8">
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>bouncing balls</h1>
<canvas></canvas>
<script src="main.js" defer></script>
</body>使用 as 来指定资源的类型可以使浏览器：
- 更加精确地确定资源加载的优先级。
- 将其存储在缓存中以备将来使用，并在适当时重用资源。
- 将正确的内容安全策略应用于资源。
- 为其设置正确的 Accept 请求标头。
preload 支持如下资源的加载：
audio、document、embed、fetch、font、image、object、script、style、track、worker、video（浏览器暂未实现）
若你加载了一个 CORS 开启的资源，必须要加上 crossorigin 属性：
<link rel="preload" href="https://example.com/fonts/font.woff" as="font" crossorigin>除了使用 html 标签来使用 preload，还可以使用如下方式：
<script>
var res = document.createElement("link");
res.rel = "preload";
res.as = "style";
res.href = "styles/other.css";
document.head.appendChild(res);
</script>Link: <https://example.com/other/styles.css>; rel=preload; as=stylepreload 的浏览器支持情况如下：
注意：
1.浏览器使用 preload 加载资源的时候并没有执行里面的代码。比如 ：
//myscript.js
alert(1)
<link rel="preload" href="myscript.js" as="script">当使用浏览器加载时，并不会有弹窗。
2. 若此时发生页面导航，preload 进行中的资源会被取消。
浏览器中如下：
prefetch:
prefetch 是提示浏览器，用户在下次导航时可能会使用的资源，因此浏览器为了提升性能可以提前加载、缓存资源。prefetch 的加载优先级相对较低浏览器在空闲的时候才会在后台加载。
使用方式如下：
<link rel="prefetch" href="/myscript.js" as="script"><script>
var res = document.createElement("link");
res.rel = "prefetch";
res.as = "style";
res.href = "styles/other.css";
document.head.appendChild(res);
</script>Link: <https://example.com/other/styles.css>; rel=prefetch; as=style相对于 preload 而 prefetch 应用在一个不同的场景：跨导航、跨页面使用资源，例如页面 A 初始化了一个页面 B 中关键资源的 prefetch 请求，则关键资源的加载和页面导航可以并行执行，但若是 preload 它会在页面 A 的unload 事件中立即取消。
prefetch 的浏览器支持情况：
注意：
1. prefetch 优先级较低，所以加载的资源有可能会被取消，例如：在网络很差的时候，prefetch 一个大字体文件的时候就有可能被取消。
浏览器中如下：
腾讯云开发者
