之前项目中，页面加载慢的问题，你是如何定位并解决的？请分享具体步骤和优化措施。

Tencent软件开发-前端开发方向难度：中等

答案

1) 【一句话结论】：通过Chrome DevTools性能分析定位页面加载瓶颈（如渲染阻塞的JS、大体积资源），结合调整JS加载时机（async/defer）、代码分割、图片懒加载等策略，有效提升首屏加载速度与用户体验。

2) 【原理/概念讲解】：页面加载与渲染的核心流程是浏览器解析HTML（构建DOM树）、CSS（构建CSSOM树）、JS（执行逻辑），再合并为渲染树，最终布局、绘制。常见瓶颈包括：① 网络传输延迟（大文件下载）；② 资源阻塞渲染（头部JS/CSS导致DOM解析暂停，即渲染阻塞）；③ 资源体积过大（图片、JS文件）。类比：装修房子时，若水管（网络）堵塞导致材料（资源）无法及时送达，或施工顺序（渲染）混乱（如先砌墙再装水管），都会导致整体进度慢。

3) 【对比与适用场景】：针对渲染阻塞的JS处理策略对比（调整位置 vs 属性）：

优化策略	定义	特性	使用场景	注意点
调整位置（Head内放置关键JS）	将关键渲染逻辑的JS放在HTML头部，确保DOM解析时优先加载	优先级高，DOM解析时立即加载	首屏必须立即执行的JS（如初始化、渲染逻辑）	避免头部JS过大，否则阻塞整个页面解析
async/defer属性（延迟加载）	为非关键JS添加async（异步加载，不阻塞DOM解析）或defer（延迟加载，等待DOM解析完成后加载）	不阻塞DOM解析，按需加载	非首屏必需的JS（如统计、第三方脚本）	async无顺序保证，defer按顺序加载

4) 【示例】：假设项目用Webpack构建，首页入口文件（index.js）包含1.5MB的JS（包含初始化和渲染逻辑）。优化步骤：

HTML头部放置关键JS（index.js，约300KB，关键渲染逻辑）：
```
<script src="index.js"></script>
```

非关键JS（如统计、广告）用defer属性：

<script src="stats.js" defer></script>
<script src="ad.js" defer></script>

背景图片（原尺寸1024x768，1.2MB）压缩为WebP（约300KB），设置响应式与懒加载：
```
<img src="bg.webp" srcset="bg-2x.webp 2x" alt="背景图" loading="lazy">
```

Webpack配置（SplitChunksPlugin）：

// webpack.config.js
optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 30000,
    minChunks: 1,
    maxInitialRequests: 30,
    name: true,
    cacheGroups: {
      async: {
        test: /[\\/]async[\\/]/,
        priority: -20,
      },
      initial: {
        test: /[\\/]initial[\\/]/,
        priority: -10,
      },
    },
  },
},

5) 【面试口播版答案】：之前项目中页面加载慢，我是这样解决的：首先用Chrome DevTools的Performance面板分析，发现首屏加载时间3秒，主要瓶颈是头部加载了1.5MB的JS（导致渲染阻塞）和一张1.2MB的背景图。针对JS，把关键渲染逻辑的JS放在HTML头部，非关键用defer属性延迟加载；针对图片，用WebP压缩并设置loading='lazy'。优化后，首屏加载时间降到1.2秒，用户反馈加载速度明显提升，Lighthouse得分从65提升到90。

6) 【追问清单】：

问：你如何区分关键JS和非关键JS？
答：关键JS是首屏必须立即执行的逻辑（如初始化页面、渲染DOM），非关键是次要的（如统计、广告）。通过分析业务逻辑，确定哪些是核心渲染依赖。
问：如果懒加载图片后，页面滚动时出现卡顿，怎么解决？
答：用Intersection Observer API监听图片进入视口，异步加载资源，并显示加载状态（如占位符），避免卡顿。
问：代码分割后包数量过多，导致HTTP请求增加，怎么优化？
答：调整SplitChunksPlugin的配置，比如设置chunks为'async'或'initial'，减少不必要的包，或者按模块大小分割。
问：除了前端，后端有没有配合优化？
答：有，后端压缩API响应数据（Gzip），减少网络传输量，同时优化数据库查询，降低API响应时间。
问：如何验证优化效果？
答：通过Google Analytics监控真实用户页面加载时间，对比优化前后的数据，确认加载速度提升。

7) 【常见坑/雷区】：

忽略渲染阻塞的JS处理：将所有JS都放在body末尾，导致首屏渲染慢，用户感知差。
代码分割后包数量过多：导致HTTP请求增加，反而影响性能，需合理配置分割规则。
缓存策略设置不当：缓存过期时间太短，导致资源频繁请求；或太长，无法及时更新资源。
图片格式转换后浏览器不支持：未设置fallback（如WebP转JPG），导致部分浏览器加载失败。
忽略真实用户数据验证：仅依赖Lighthouse得分，未通过用户监控确认优化效果。