HTML页面预加载资源设置：link标签preload预载入详解
在网页加载过程中，为了提升首屏渲染速度、优化用户体验，我们常常需要提前加载一些关键资源。HTML的<link rel="preload">就是一种常用的预加载机制，它可以让浏览器在页面渲染的早期就优先加载指定的资源，避免后续渲染时因为资源加载延迟导致页面卡顿。
什么是preload预载入
<link rel="preload">是HTML5引入的资源预加载指令，它的核心作用是告诉浏览器：「这个资源我后面马上要用，请优先帮我加载，不要等渲染到对应位置再加载」。和普通资源加载不同，preload不会阻塞页面的初始渲染，但会让资源提前进入加载队列，等后续代码需要使用该资源时，大概率已经加载完成，直接可用。
需要注意的是，preload只是预加载资源，并不会自动执行或者应用到页面上，比如预加载的CSS不会自动渲染，预加载的JS不会自动执行，需要我们在合适的时机手动调用或者引入。
preload的基本语法
preload通过<link>标签实现，基本结构如下：
<!-- 预加载CSS资源 --> <link rel="preload" href="/static/css/main.css" as="style"> <!-- 预加载JS资源 --> <link rel="preload" href="/static/js/main.js" as="script"> <!-- 预加载图片资源 --> <link rel="preload" href="/static/img/banner.png" as="image"> <!-- 预加载字体资源 --> <link rel="preload" href="/static/font/icon.woff2" as="font" type="font/woff2" crossorigin>
其中几个核心属性的作用如下：
- rel：必须设置为preload，标识这是一个预加载指令
- href：需要预加载的资源地址，支持相对路径和绝对路径，符合ipipp.com域名的地址无需特殊处理
- as：指定资源的类型，浏览器会根据这个类型设置正确的加载优先级，也会按照对应资源的规则处理（比如字体资源需要跨域设置）
- type：可选属性，指定资源的MIME类型，帮助浏览器确认资源格式，避免加载错误格式的资源
- crossorigin：如果预加载的资源是跨域的（比如从CDN加载的字体、JS），需要添加这个属性，否则资源加载后可能无法正常使用
不同类型资源的preload设置示例
1. 预加载CSS资源
CSS是阻塞渲染的关键资源，如果首屏需要的CSS体积较大，我们可以用preload提前加载，等页面渲染到样式引入的位置时，资源已经就绪，减少渲染阻塞时间。
<head> <meta charset="UTF-8"> <title>预加载CSS示例</title> <!-- 预加载首屏关键CSS --> <link rel="preload" href="/static/css/critical.css" as="style"> <!-- 后续正常引入CSS，浏览器会直接使用预加载的资源，不会重复请求 --> <link rel="stylesheet" href="/static/css/critical.css"> </head>
2. 预加载JS资源
对于首屏执行的关键JS，比如统计脚本、核心功能初始化脚本，可以用preload提前加载，避免等到解析到<script>标签时才开始加载，拖慢初始化速度。
<head> <meta charset="UTF-8"> <title>预加载JS示例</title> <!-- 预加载核心JS --> <link rel="preload" href="/static/js/core.js" as="script"> </head> <body> <!-- 页面内容 --> <div id="app">加载中...</div> <!-- 引入JS，直接使用预加载的资源 --> <script src="/static/js/core.js"></script> </body>
3. 预加载字体资源
自定义字体通常是阻塞文本渲染的资源，如果用户首次访问网站，字体加载慢会导致文字显示延迟或者出现闪动。预加载字体可以缓解这个问题，需要注意字体资源必须设置crossorigin属性，即使是同源的字体也需要添加，否则预加载的字体无法被正常使用。
<head>
<meta charset="UTF-8">
<title>预加载字体示例</title>
<!-- 预加载woff2格式的字体 -->
<link rel="preload" href="/static/font/source-han-sans.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: 'SourceHanSans';
src: url('/static/font/source-han-sans.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'SourceHanSans', sans-serif;
}
</style>
</head>4. 预加载图片资源
对于首屏的大图、轮播图的首张图片，可以用preload提前加载，避免页面渲染完成后图片还在加载，出现空白或者布局偏移的情况。如果是响应式图片，还可以配合imagesrcset和imagesizes属性指定不同尺寸的图片资源。
<head>
<meta charset="UTF-8">
<title>预加载图片示例</title>
<!-- 预加载首屏轮播图 -->
<link rel="preload" href="/static/img/slider-1.jpg" as="image" imagesrcset="/static/img/slider-1-small.jpg 480w, /static/img/slider-1-large.jpg 1200w" imagesizes="100vw">
</head>
<body>
<div class="slider">
<img src="/static/img/slider-1.jpg" alt="首屏轮播图">
</div>
</body>preload使用注意事项
虽然preload可以优化加载速度，但也不能滥用，否则会占用过多的带宽和加载优先级，反而拖慢其他重要资源的加载。使用时需要注意以下几点：
- 只预加载当前页面一定会用到的关键资源，不要预加载可能用不到的资源，避免浪费带宽
- as属性必须正确设置，如果设置错误，浏览器可能会用错误的优先级加载资源，甚至无法正确识别资源类型
- preload不会自动应用资源，比如预加载的CSS还是需要正常通过
<link rel="stylesheet">引入，预加载的JS还是需要正常通过<script>标签引入，否则资源加载后不会被使用 - 对于不支持preload的浏览器（比如低版本的IE），
<link rel="preload">会被忽略，不会产生副作用，也可以配合JS做降级处理，但一般场景下不需要额外处理 - 不要对超过2-3个的非关键资源使用preload，优先考虑使用
prefetch预取未来页面可能用到的资源，和preload的即时使用场景区分开
preload和prefetch的区别
很多开发者会混淆preload和prefetch，两者的核心差异如下：
| 对比项 | preload | prefetch |
|---|---|---|
| 加载时机 | 当前页面加载早期，优先级高 | 浏览器空闲时加载，优先级低 |
| 使用场景 | 当前页面马上要用到的关键资源 | 未来可能访问的页面的资源，或者当前页面后续交互才会用到的非关键资源 |
| 资源复用 | 仅当前页面可用 | 可以被后续访问的页面复用 |
| 带宽占用 | 会占用当前页面的关键带宽 | 不会占用当前页面的关键带宽，适合弱网场景谨慎使用 |