什么是预加载？
来看看MDN官方的解释：<link>元素的 rel 属性的 preload 值允许你在 HTML 的 <head> 中声明获取请求，指定页面很快就需要的资源，这些资源是你希望在页面生命周期的早期就开始加载的，早于浏览器的主要渲染机制启动。这可以确保它们更早可用，并且不太可能阻塞页面的渲染，从而提高性能。
一句话总结：preload就是用来提高资源加载速度的，那具体怎么提高呢？
很多打包工具都支持prelaod的功能，比如vite项目打包默认就用到了preload，可以通过打包后的html查看。
如何使用预加载？
我们直接上案例，来看看应用了preload的效果是怎样的：
未使用preload前的HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Preload案例</title>
<link rel="stylesheet" href="/assets/index-24e6c4c0.css">
<script type="module" crossorigin src="/assets/index-4ed310cf.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
我们来看一下这个html的资源加载情况：
从图中瀑布流可以看出，html中的
index.css和index.js优先加载，而vlib.js和elementplus.js则是在index.js被引用，index.js加载完后，由index.js发起的请求。
那有什么可以优化的地方？没有充分利用浏览器支持 并行请求 的特点。如果vlib.js、elementplus.js和index.js同时并发请求，就不用等index.js加载完成再加载vlib.js和elementplus.js，是不是就可以加快资源的请求速度了呢？
下面我们来看看用了preload的效果
使用了preload的HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Preload案例</title>
<link rel="stylesheet" href="/assets/index-24e6c4c0.css">
<!-- 新增link进行预加载preload -->
<link rel="preload" as="script" crossorigin href="/assets/vlib-f7f0e08e.js">
<!-- 新增link进行预加载preload -->
<link rel="preload" as="script" crossorigin href="/assets/elementplus-bacbaa9b.js">
<script type="module" crossorigin src="/assets/index-4ed310cf.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
preload有两种用法:
- 针对不同类型资源，用as指定：
<link rel="preload" as="script" crossorigin href="/xxx.js" /> - 仅针对es模块：
<link rel="modulepreload" crossorigin href="/xxx.js">
为什么是用link标签呢？ 因为link标签不阻塞html的解析，也不会执行预加载的js代码
我们来看下使用了preload的资源加载情况：
从图中可以看到现在四个资源都是由html发起，而且是并发请求，大大提高了资源加载速度，当
index.js用到vlib.js和elementplus.js时就可以直接使用预加载的资源。
避免过度预加载
预加载是提前请求资源，但如果你预加载了太多资源，可能会导致浏览器过度占用网络带宽，反而延迟了其他关键资源的加载。建议只对关键资源进行预加载。
全文完。
