预加载核心是通过link标签提前加载关键资源以提升性能。1. 使用rel="preload"并配合as属性指定资源类型，如字体、脚本、样式等；2. 正确设置as值避免重复请求；3. 结合media属性按条件加载；4. 避免滥用以防阻塞队列。精准预加载可显著优化首屏速度。
HTML页面预加载的核心在于提前告知浏览器未来可能需要的资源，从而减少等待时间、提升加载速度。通过合理使用 Link 标签 的预加载功能，可以显著优化用户体验，尤其是在关键资源加载方面效果明显。
1. 使用 rel="preload" 预加载关键资源
rel="preload" 是一种声明式指令，告诉浏览器当前页面一定会用到某个资源，应尽快开始下载。
- 适用于首屏关键字体、CSS、JavaScript、图片或视频等。
- 必须配合 as 属性指定资源类型，避免重复加载或优先级错误。
示例：预加载字体文件
<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>注意：字体资源需加 crossorigin 属性，否则可能被忽略。
立即学习“前端免费学习笔记（深入）”；
2. 按资源类型正确设置 as 属性
不同的资源应使用对应的 as 值，以便浏览器正确计算加载优先级和缓存策略。
- as="script"：用于 JS 文件
- as="style"：用于 CSS 文件
- as="image"：用于图片（如 WebP、PNG）
- as="font"：字体文件，注意跨域问题
- as="fetch"：AJAX 请求类资源
错误示例（会导致请求两次）：
正确写法：
<link rel="preload" href="app.js" as="script">3. 结合媒体查询按条件预加载
对于仅在特定设备或分辨率下使用的资源，可通过 media 属性控制预加载时机，避免浪费带宽。
- 比如大屏背景图只在桌面端加载
- 节省移动端用户的流量和处理时间
示例：根据屏幕宽度预加载图片
<link rel="preload" href="bg-desktop.jpg" as="image" media="(min-width: 1024px)">4. 避免滥用预加载影响性能
虽然预加载能提速，但过度使用会占用网络队列，反而拖慢关键资源。
- 只预加载真正影响首屏渲染的资源
- 不要预加载整个轮播图的所有图片
- 避免与 HTTP/2 Server Push 同时推送相同资源
建议结合 Chrome DevTools 的“Network”面板检查是否重复请求或阻塞。
基本上就这些。合理使用 link preload，能让关键资源更快到位，但要精准控制范围和类型，才能发挥最大效益。
