preload是一种声明式预加载技术，通过link标签提前加载关键资源以提升性能。正确使用rel="preload"可加快字体、首屏脚本、样式和图片的获取速度，但需准确设置as、type和crossorigin属性，避免滥用导致带宽竞争，影响整体加载效率。
在现代网页开发中，资源加载时机对性能影响很大。通过 link rel="preload"，我们可以提前告知浏览器：某些关键资源需要尽早获取，但暂不执行或应用。这能有效减少阻塞、提升页面渲染速度。
什么是 preload？
rel="preload" 是一种声明式预加载方式，让开发者告诉浏览器：当前页面即将用到某个资源（如字体、脚本、样式、图片等），请优先下载它，避免后期加载造成延迟。
与传统的资源加载不同，preload 不会改变执行顺序，只加快获取过程。浏览器会在空闲时也不会错过这些高优先级资源。
如何使用 link preload？
在 HTML 的 <head> 中添加 link 标签，并指定 rel="preload" 和目标资源的路径及类型。
立即学习“Java免费学习笔记（深入）”；
基本语法：
<link rel="preload" href="style.css" as="style"><link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="main.js" as="script">
<link rel="preload" href="hero.jpg" as="image">
关键属性说明：
- href：资源地址
- as：资源类型（必须正确填写，否则可能被忽略）
- type：MIME 类型，帮助浏览器判断是否支持
- crossorigin：加载跨域资源（如字体）时需加上，避免重复请求
适合预加载哪些资源？
并不是所有资源都适合 preload。应聚焦于关键路径上的资源，即那些延迟加载会影响首屏渲染或用户体验的内容。
推荐预加载：
- 自定义字体（尤其是首次渲染要用到的）
- 关键 CSS 或 JavaScript 文件（如首屏逻辑）
- 首屏大图或背景图
- 重要的 WebAssembly 或 JSON 配置文件
注意：不要滥用 preload。预加载太多资源会抢占带宽，反而拖慢整体表现。
常见问题与最佳实践
使用 preload 虽然简单，但也容易出错。
- 确保 as 值准确。例如字体用 as="font"，脚本用 as="script"
- 跨域字体必须加 crossorigin 属性，否则可能请求两次
- 避免预加载非关键资源，比如 below-the-fold 图片
- 结合 onload 处理预加载完成后的操作（如注入 stylesheet）
- 可通过 HTTP Header 发送预加载指令（Link: </style.css>; rel=preload; as=style），适合动态控制
基本上就这些。合理使用 rel="preload"，能让关键资源更早进入下载队列，显著缩短页面可交互时间。关键是精准选择目标，避免画蛇添足。
