4.2 preload vs defer/async：JS加载与执行
preload：仅加载JS，不执行，需手动触发执行（适合需要精确控制执行时机的场景）。
defer：加载JS时不阻塞解析，文档解析完成后按顺序执行（适合依赖DOM的脚本）。
async：加载JS时不阻塞解析，加载完成后立即执行（适合独立脚本，如统计代码）。
<!-- 需在特定时机执行的JS：preload -->
<link rel="preload" href="editor.js" as="script" id="editor-preload">
<script>
// 用户点击编辑按钮时再执行
document.getElementById('edit-btn').addEventListener('click', () => {
const script = document.createElement('script');
script.src = document.getElementById('editor-preload').href;
document.body.appendChild(script);
});
</script>
<!-- 文档解析后执行的JS：defer -->
<script src="analytics.js" defer></script>
4.3 preload vs 内联资源：取舍与平衡
内联资源（如<style>内嵌CSS、<script>内嵌JS）可避免网络请求，但会增加HTML体积。preload与内联的选择原则：
超小体积的关键资源（如1KB以内的核心CSS）：优先内联，减少请求。
中等体积的关键资源（如10KB-100KB的CSS/JS）：用preload，平衡HTML体积和加载速度。
大体积资源：绝对不内联，用preload或常规加载。
五、避坑指南：preload 的常见错误与解决方案
5.1 遗漏as属性或值错误
as是preload的核心属性，遗漏或值错误会导致浏览器无法优化加载策略，甚至视为无效请求：
<!-- 错误：缺少as属性 -->
<link rel="preload" href="style.css">
<!-- 错误：as值与资源类型不匹配 -->
<link rel="preload" href="script.js" as="style">
<!-- 正确：as值与资源类型一致 -->
<link rel="preload" href="script.js" as="script">
5.2 跨域资源未添加crossorigin
字体、跨域JS/CSS等资源若未添加crossorigin，会导致资源加载后无法缓存，重复请求：
<!-- 错误：跨域字体未加crossorigin -->
<link rel="preload" href="https://cdn.example.com/font.woff2" as="font">
<!-- 正确：添加crossorigin（同域字体也建议添加） -->
<link rel="preload"
href="https://cdn.example.com/font.woff2"
as="font"
crossorigin>
5.3 过度使用导致资源浪费
preload会强制浏览器加载资源，若预加载的资源未被使用，会浪费带宽和内存（浏览器控制台会警告“Preloaded resource not used within a few seconds”）：
<!-- 错误：预加载未使用的资源 -->
<link rel="preload" href="unused.js" as="script">
<!-- 正确：仅预加载确定会使用的关键资源 -->
<link rel="preload" href="used-critical.js" as="script">
5.4 忽略浏览器兼容性
preload兼容所有现代浏览器，但IE完全不支持。可通过onload和onerror降级处理：
<link rel="preload"
href="critical.css"
as="style"
onload="this.rel='stylesheet'">
<!-- IE降级：直接加载CSS -->
<noscript><link rel="stylesheet" href="critical.css"></noscript>
六、总结
<link rel="preload">通过主动声明关键资源，解决了传统加载方式的“时机晚、阻塞解析”问题，其核心价值在于：
精准控制加载时机：在页面解析早期加载关键资源，避免依赖浏览器自动发现。
提升首屏性能：减少关键CSS/JS/字体的加载延迟，优化FOUC、FOIT等不良体验。
不阻塞页面解析：加载与解析并行，避免传统同步加载的性能损耗。
适配复杂场景：支持跨域、媒体查询、动态使用，满足多样化需求。
但preload不是银弹，过度使用会导致资源浪费，错误配置会引发缓存问题。正确的做法是：仅对“首屏必需、加载延迟、体积适中”的资源使用preload，并结合prefetch、defer等方式构建完整的资源加载策略。
性能优化的核心是“按需加载、适时加载”，preload正是这一理念的优秀实践。
下次优化页面时，不妨检查关键资源的加载时机——或许一个简单的preload声明，就能让你的页面加载速度提升一大截。
400 186 1886
