优化前端应用中的 CSS 与 JavaScript 关键资源（Critical Resources）识别与延迟加载策略

描述
关键资源（Critical Resources）是阻塞页面首次渲染的 CSS 和 JavaScript 文件。浏览器的关键渲染路径（Critical Rendering Path）依赖这些资源完成布局和绘制。优化关键资源的加载顺序和体积，能显著提升首屏加载性能（如 FCP 和 LCP）。核心目标包括：

1. 识别关键资源：确定哪些资源是渲染首屏内容所必需的。
2. 最小化关键资源体积：通过压缩、拆分或内联减少关键资源大小。
3. 延迟非关键资源：将非关键资源（如非首屏脚本、样式）的加载推迟到首屏渲染之后。

解题过程

1. 识别关键资源

   • 手动分析：检查 HTML 中通过 <link> 和 <script> 引入的资源，区分哪些用于首屏渲染（如首屏样式、框架初始化脚本）。
   • 工具辅助：
     • 使用 Lighthouse 的 "Opportunities" 部分查看 "Eliminate render-blocking resources" 建议。
     • 通过 Chrome DevTools 的 Coverage 面板（Ctrl+Shift+P 搜索 "Coverage"）分析代码覆盖率，标记未使用的 CSS/JS 代码（非关键部分）。
   • 示例：若首屏仅需 2KB 的样式，但整体 CSS 文件为 50KB，则仅这 2KB 为关键资源。

2. 优化关键 CSS

   • 内联关键 CSS：将识别出的关键样式直接嵌入 HTML 的 <style> 标签中，避免外部 CSS 文件的请求阻塞。

     <style>
       /* 通过工具提取的首屏关键样式 */
       .header { color: #333; }
       .hero-image { width: 100%; }
     </style>
     

   • 异步加载非关键 CSS：对剩余非关键样式，使用 preload 或 media 属性异步加载：

     <!-- 通过媒体查询延迟非首屏样式 -->
     <link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
     <!-- 或使用 Preload 转为异步 -->
     <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">
     

3. 优化关键 JavaScript

   • 异步/延迟非关键脚本：对非首屏必需的脚本（如数据分析、广告脚本），添加 async 或 defer 属性：

     <!-- 异步执行，不阻塞渲染 -->
     <script src="analytics.js" async></script>
     <!-- 延迟到 HTML 解析后执行 -->
     <script src="deferred.js" defer></script>
     

   • 按需加载脚本：使用 import() 动态导入非关键模块：

     // 用户交互时再加载
     button.addEventListener('click', () => {
       import('./non-critical-module.js').then(module => module.init());
     });
     

4. 验证优化效果

   • 使用 Lighthouse 重新审计，确认 "Render-blocking resources" 警告减少。
   • 在 DevTools 的 Performance 面板中录制页面加载过程，观察关键路径中的请求阻塞时间是否缩短。

总结
通过识别关键资源、内联关键 CSS、异步加载非关键资源，可减少渲染阻塞时间，提升首屏加载速度。需注意平衡内联样式与缓存策略（内联内容无法被浏览器单独缓存），避免过度内联导致 HTML 体积膨胀。