优化前端应用中的 CSS 与 JavaScript 资源预加载（Preload）与预获取（Prefetch）策略

1. 问题描述
在现代前端应用中，CSS 和 JavaScript 资源的加载顺序直接影响页面渲染性能。如果关键资源（如首屏样式或核心逻辑）加载过晚，会阻塞渲染，导致用户体验下降。预加载（Preload）和预获取（Prefetch）是两种资源提示（Resource Hints），允许开发者主动控制资源的加载优先级和时机，但若使用不当可能浪费带宽或加剧竞争。核心问题包括：

• 如何区分关键与非关键资源？
• 何时用 preload 而非 prefetch？
• 如何避免预加载过多资源导致网络拥塞？

3. 解决步骤
步骤 1：识别关键渲染路径资源

• 使用 Chrome DevTools 的 Coverage 工具分析 CSS/JS 使用率，标记首屏必需代码（如折叠上方样式、核心组件逻辑）。
• 通过 Lighthouse 审计结果查看关键请求链，确定阻塞渲染的资源。例如，首屏样式文件应标记为高优先级。

步骤 2：理解 Preload 与 Prefetch 的差异

• Preload（<link rel="preload">）：
  • 用途：强制浏览器立即请求高优先级资源，确保尽早可用。
  • 适用场景：关键字体、首屏CSS、核心JS模块。
  • 示例：

    <link rel="preload" href="critical.css" as="style">  
    <link rel="preload" href="main.js" as="script">  
    

• Prefetch（<link rel="prefetch">）：
  • 用途：低优先级预请求未来可能需要的资源（如下一页资源），空闲时加载。
  • 适用场景：非首屏组件、路由分割后的模块。
  • 示例：

    <link rel="prefetch" href="next-page-chunk.js" as="script">  
    

步骤 3：配置正确的 as 属性与类型

• as 属性告知浏览器资源类型，以便设置优先级和缓存策略：
  • as="style"：优先级最高，避免阻塞渲染。
  • as="script"：中等优先级，解析时可并行下载。
  • 错误类型（如未指定 as）会导致重复请求。

步骤 4：控制加载时机与条件

• 使用 onload 事件动态预加载非关键资源，避免与关键资源竞争带宽：

  // 首屏渲染完成后预加载次要资源  
  window.addEventListener('load', () => {  
    const link = document.createElement('link');  
    link.rel = 'preload';  
    link.href = 'secondary-module.js';  
    link.as = 'script';  
    document.head.appendChild(link);  
  });  
  

• 对动态路由应用，在用户悬停按钮时预获取下一页面资源：

  document.getElementById('next-page-btn').addEventListener('mouseover', () => {  
    import(/* webpackPrefetch: true */ './next-page.js');  
  });  
  

步骤 5：监控与优化实际效果

• 通过 Network 面板查看资源优先级（Priority 列），确认 preload 资源为 High，prefetch 为 Lowest。
• 使用 resource-timing-api 统计资源加载时间，确保预加载资源在需要前已完成下载。
• 过量预加载会增加 TTI（可交互时间），需通过 Lighthouse 的 Total Blocking Time 指标调整策略。

4. 总结
预加载与预获取通过精细化控制资源加载顺序，显著减少渲染阻塞。核心原则是：

• 仅对关键路径资源用 preload，且需测试带宽竞争影响；
• 对非关键资源用 prefetch，结合用户行为预测加载；
• 动态加载避免主线程竞争，并通过工具监控调整策略。