HTML 资源预加载策略
HTML资源预加载：link rel=preload确定预加载关键资源（as/type/crossorigin）、prefetch空闲预加载下一页面、preconnect提前建立连接、dns-prefetch DNS预解析、prerender预渲染整页 · 难度：入门 · +10XP
HTML 资源预加载 —— 让网页秒开
如果能在用户点击之前就开始加载下一页，体验会流畅很多。HTML的link标签提供了多种预加载策略。
五种预加载方式
| rel值 | 作用 | 使用场景 |
|---|---|---|
| preload | 立即加载，高优先级 | 首屏关键字体、CSS |
| prefetch | 空闲时加载，低优先级 | 下一页可能用到的资源 |
| preconnect | 提前建立连接 | 第三方CDN、API域名 |
| dns-prefetch | 仅解析DNS | 轻量级连接优化 |
| prerender | 预渲染整个页面 | 极可能访问的下页 |
实际用法
<link rel="preconnect" href="https://api.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="preload" href="hero.jpg" as="image">
<link rel="prefetch" href="next-page.html">动手练习
- 基础练习：在页面上给第三方CDN加上preconnect。
- 进阶应用：用Chrome DevTools Network面板对比preconnect前后的连接时间。
- 项目实战：做下一页预加载——用户在第一页时prefetch第二页。