如何正确运用HTML的preload标签高效预加载网页关键资源？

本文共计1184个文字，预计阅读时间需要5分钟。

《preload 不是所有相关关键资源都加一轮，而是仅对浏览器发现太晚、又必须立即使用的资源生效；加错反而拖慢首屏。

哪些资源真该用 preload

浏览器在解析 HTML 时，只能自动发现 <img>、<script src>、<link rel="stylesheet"> 这些标签里的资源。但以下几类常被“藏”在 CSS 或 JS 里，直到解析完才被发现，导致 FOIT、FOUC 或首屏图片延迟：

• CSS 中 @font-face 引用的字体文件（尤其 WOFF2）
• 内联 <style> 里用到的、但没在 HTML 中显式声明的首屏图片 URL
• 紧随其后的 <script type="module"> 所依赖的主 chunk（如 app.js），而它本身没写 src 属性
• Hero 区域的 <picture> 中关键 <source> 对应的 WebP/JPEG 图片

这些才是 preload 的合理作用域。不是“所有 .js 都 preload”，更不是“把 webpack 打包出的 20 个 chunk 全写进去”。

as 属性填错等于白写

as 不是可选装饰，它直接决定浏览器如何发起请求：请求头（Accept）、CSP 校验、缓存分区、甚至是否允许跨域。