HTML 预加载与预连接优化
浏览器提供多种资源提示，提前准备关键资源，减少加载等待时间。
预连接 (preconnect)
提前建立 TCP 连接、SSL 握手，减少 DNS 查询和连接建立时间。
HTML
<!-- 预连接到关键域名 -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="preconnect" href="https://api.example.com" crossorigin>
适用场景
- 关键 CDN 域名
- API 接口域名
- 第三方认证服务
DNS 预解析 (dns-prefetch)
仅提前解析 DNS，开销比 preconnect 小。
HTML
<link rel="dns-prefetch" href="https://analytics.example.com">
预加载 (preload)
强制浏览器提前加载当前页面必需的关键资源。
HTML
<!-- 预加载关键 CSS -->
<link rel="preload" href="styles/critical.css" as="style">
<!-- 预加载关键字体 -->
<link rel="preload" href="fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>
<!-- 预加载关键脚本 -->
<link rel="preload" href="js/app.js" as="script">
<!-- 预加载关键图片 -->
<link rel="preload" href="images/hero.webp" as="image">
as 属性值
| as 值 | 资源类型 |
|---|---|
| style | CSS 样式表 |
| script | JavaScript |
| font | 字体文件 |
| image | 图片 |
| fetch | fetch/XHR 请求 |
预取 (prefetch)
预取未来可能需要的资源，优先级低于 preload。
HTML
<!-- 预取下一页资源 -->
<link rel="prefetch" href="next-page.html">
<link rel="prefetch" href="js/next-page.js" as="script">
对比总结
| 类型 | 作用 | 优先级 | 使用场景 |
|---|---|---|---|
| preconnect | 建立连接 | 最高 | 关键第三方域名 |
| dns-prefetch | DNS 解析 | 高 | 非关键域名 |
| preload | 加载资源 | 高 | 当前页必需资源 |
| prefetch | 预取资源 | 低 | 下一页可能资源 |
注意事项
preconnect 数量控制在 3-4 个以内，过多浪费连接资源。
preload 必须指定正确的
as属性，否则无法正确优先级。
字体 preload 必须添加
crossorigin属性，否则重复请求。
预加载的资源必须会被使用，否则浪费带宽。
要点总结
- preconnect 用于关键域名连接预热
- dns-prefetch 用于非关键域名 DNS 解析
- preload 用于当前页必需资源
- prefetch 用于预取未来页面资源
- 控制预连接数量，避免资源浪费
📝 发现内容有误？点击此处直接编辑