17370845950

preload是通过提前加载当前页关键资源的技术，支持字体、JS、图片等类型，需正确设置as属性和crossorigin；与prefetch（预加载后续资源）和preconnect（建立连接）不同，preload优先级高，用于提升首屏性能。

标签结合preload提升加载性能">

使用 link 标签结合 preload 可以显著提升网页关键资源的加载速度。preload 是一种声明式预加载机制，它告诉浏览器提前获取重要资源，而不阻塞页面渲染。

什么是 preload？

preload 通过 告诉浏览器某个资源将在当前页面中被用到，应尽早开始加载。它不会改变资源的加载优先级逻辑，但能确保资源在需要前就已准备好。

常见可用于 preload 的资源类型包括：

• 字体文件（如 .woff2）
• 关键 CSS 或 JavaScript
• 大背景图片或 hero 图片
• WebAssembly 文件或重要 JSON 数据

如何正确使用 preload

要在 HTML 中使用 preload，需在 中添加 link 标签，并指定 rel="preload" 和 as 属性来表明资源类型。

示例：预加载字体

示例：预加载关键 JS 脚本

示例：预加载首屏背景图

注意点：

• as 属性必须准确：它影响加载优先级和内容安全策略（CSP）校验
• 字体资源要加 crossorigin：避免匿名请求导致字体加载失败
• 不要滥用 preload：预加载太多资源会占用带宽，反而拖慢整体性能

与 prefetch 和 preconnect 的区别

preload 是当前页必需资源的高优先级加载，而：

• prefetch 用于预加载未来可能用到的资源（如下一页面的 JS），优先级低
• preconnect 提前建立 DNS 解析、TCP 握手甚至 TLS 连接，适合跨域 CDN 资源

可组合使用：

验证 preload 是否生效

打开 Chrome DevTools：

• 在 Network 面板查看资源是否更早发起请求
• 检查 Initiator 列是否显示为 "preload"
• 确认没有 404 或 MIME 类型错误

如果资源未被使用，控制台会提示 “Preload is not used within 3 seconds”，说明存在浪费，应移除。

基本上就这些。合理使用 preload，能让关键资源“未用先载”，有效减少等待时间，提升用户体验。