HTML5引入的资源预加载相关特性，能够让浏览器在页面渲染初期就提前获取后续需要的资源，避免资源加载阻塞页面渲染，有效提升页面的加载速度和用户体验。不同的预加载方式对应不同的使用场景，开发者需要结合资源的优先级和使用时机合理选择。
HTML5常用资源预加载方式
1. preload预加载
preload用于预加载当前页面即将用到的关键资源，资源加载完成后会被浏览器缓存，后续使用时可以直接从缓存读取，不会重复请求。它需要通过link标签实现，并且要明确指定资源的类型。
使用preload的语法如下：
<!-- 预加载CSS文件 --> <link rel="preload" href="main.css" as="style"> <!-- 预加载JavaScript文件 --> <link rel="preload" href="app.js" as="script"> <!-- 预加载图片资源 --> <link rel="preload" href="banner.jpg" as="image"> <!-- 预加载字体文件 --> <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
其中as属性是必填项，它告诉浏览器预加载的资源类型，浏览器会根据类型设置合适的请求优先级，同时也会用于后续的资源匹配。crossorigin属性在预加载字体、跨域资源时需要添加，否则资源可能无法正常使用。
2. prefetch预取
prefetch用于预取未来页面可能用到的资源，比如用户点击下一个页面时需要用到的JS、CSS文件。浏览器会在空闲时间加载这些资源，优先级比preload低，不会和当前页面的关键资源抢占带宽。
使用prefetch的语法如下：
<!-- 预取下一个页面需要的JS文件 --> <link rel="prefetch" href="next-page.js"> <!-- 预取未来可能用到的CSS文件 --> <link rel="prefetch" href="future-style.css">
prefetch不需要指定as属性，浏览器会按照默认的低优先级加载资源，资源加载完成后也会存入缓存，当用户访问对应页面时可以直接使用。
3. preconnect预连接
preconnect用于提前和第三方域名建立连接，包括DNS解析、TCP握手、TLS协商等步骤，减少后续请求该域名资源时的连接耗时。适合用于加载来自第三方域名的资源场景。
使用preconnect的语法如下：
<!-- 提前和CDN域名建立连接 --> <link rel="preconnect" href="https://cdn.ipipp.com"> <!-- 提前和API域名建立连接 --> <link rel="preconnect" href="https://api.ipipp.com" crossorigin>
如果后续需要请求该域名的资源，添加preconnect可以有效减少连接建立的等待时间，提升资源加载速度。
4. dns-prefetch DNS预解析
dns-prefetch是更轻量的预连接方式，仅提前完成域名的DNS解析，兼容性比preconnect更好，适合只需要提前解析DNS的场景。
使用dns-prefetch的语法如下：
<!-- 提前解析第三方域名的DNS --> <link rel="dns-prefetch" href="https://cdn.ipipp.com">
不同预加载方式的区别
可以通过下面的表格对比不同预加载方式的适用场景和特点：
| 预加载方式 | 加载优先级 | 适用场景 | 是否需要指定资源类型 |
|---|---|---|---|
| preload | 高 | 当前页面立即要用到的关键资源 | 是 |
| prefetch | 低 | 未来页面可能用到的资源 | 否 |
| preconnect | 中 | 提前建立第三方域名连接 | 否 |
| dns-prefetch | 低 | 提前解析第三方域名DNS | 否 |
使用注意事项
- 不要滥用
preload，仅预加载当前页面必须的关键资源，否则会占用带宽影响其他资源加载。 - 预加载的资源如果后续没有被使用，浏览器会在控制台给出警告，同时浪费加载资源，需要合理评估资源必要性。
- 字体资源预加载时必须添加
crossorigin属性，即使字体和页面同域也需要添加，否则预加载的字体无法被正常使用。 - 本地开发测试时可以使用127.0.0.1或者192.168.0.1作为服务地址，预加载配置同样生效。
实际使用示例
下面是一个完整的页面头部配置示例，同时使用了多种预加载方式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>资源预加载示例</title>
<!-- DNS预解析 -->
<link rel="dns-prefetch" href="https://cdn.ipipp.com">
<!-- 预连接CDN域名 -->
<link rel="preconnect" href="https://cdn.ipipp.com">
<!-- 预加载关键CSS -->
<link rel="preload" href="main.css" as="style">
<!-- 预加载关键JS -->
<link rel="preload" href="core.js" as="script">
<!-- 预取下一个页面需要的资源 -->
<link rel="prefetch" href="detail.js">
<!-- 正常引入CSS -->
<link rel="stylesheet" href="main.css">
</head>
<body>
<script src="core.js"></script>
</body>
</html>
通过上述配置，浏览器会在页面加载初期就完成CDN域名的DNS解析和连接建立，同时提前加载核心的CSS和JS文件，后续访问详情页时也可以直接使用预取的JS资源，整体加载效率会得到明显提升。
HTML5预加载资源预取link标签preloadpreconnect修改时间：2026-06-12 02:18:20