页面卡顿的本质是浏览器无法在16.7毫秒内完成一帧的渲染工作（以达到60FPS的流畅度）。
问题根源可归为两大类：CPU计算瓶颈和I/O等待瓶颈。
一、 CPU瓶颈（主线程过载）
- 根本原因： JavaScript是单线程的。主线程负责执行JS、计算样式、布局、绘制等。一个长时间任务会阻塞整个线程。
- 常见场景：
- 复杂JS计算： 大数据量循环、复杂算法。
- 频繁/低效DOM操作： 循环中频繁读写DOM，导致反复的重排和重绘。
- 长任务： 同步执行耗时函数，阻塞后续任务。
- 不佳的动画实现： 使用setInterval而非requestAnimationFrame。
解决方案：
- 任务分片： 将大任务拆解，使用setTimeout或requestIdleCallback分批执行。
- Web Workers： 将纯计算任务移至后台线程，不阻塞主线程。
- 优化DOM： 批量读写DOM，使用documentFragment，应用虚拟列表技术。
- 函数节流与防抖： 控制scroll、resize、input等高频事件的触发频率。
二、 I/O瓶颈（数据等待）
- 根本原因： 页面需要等待网络请求返回资源或数据，在此期间用户只能等待。
- 常见场景：
- 慢API接口： 后端服务响应时间长。
- 资源过大： 未压缩的图片、庞大的JS/CSS文件。
- 请求过多： 浏览器并发请求限制导致排队。
解决方案：
- 资源优化： 压缩图片（WebP）、代码分割、Tree-Shaking。
- 缓存策略： 利用HTTP缓存、浏览器缓存、Service Worker。
- 加载策略： 图片/路由懒加载、预加载关键资源。
- API优化： 后端优化接口性能，前端使用加载状态（骨架屏）提升体验。
三、 渲染瓶颈（浏览器渲染流程低效）
- 根本原因： 浏览器的渲染管线（样式计算 > 布局 > 绘制 > 合成）中某一步骤计算量过大。
- 常见场景：
- 布局抖动： 循环中交替进行读（如offsetTop）和写（如style.height）操作，触发多次布局计算。
- 复杂CSS选择器： 增加了样式计算的开销。
- 频繁的重排/重绘： 改变几何属性引发重排，改变外观引发重绘。
解决方案：
- 避免布局抖动：先批量读取，再批量写入。
- 优化CSS：简化选择器，减少嵌套。多用transform和opacity属性（只触发合成，开销最小）。
- 使用CSS3动画： 优先使用transform和opacity实现动画。
四、 内存泄漏（隐性性能杀手）
- 根本原因：不再使用的内存未被释放，导致页面占用内存持续增长，最终变卡甚至崩溃。
- 常见场景：
- 意外的全局变量。
- 被遗忘的定时器或回调函数。
- 脱离DOM的引用（从DOM移除但JS仍引用其变量）。
- 未销毁的事件监听器。
解决方案：
- 使用Chrome DevTools的 Memory 面板定期拍摄堆快照对比，查找泄漏源。
- 在代码中注意及时清理（清除定时器、移除事件监听、解除引用）。
问题排查工具箱（Chrome DevTools）
| 怀疑问题 | 使用工具 | 关键操作 |
|---|---|---|
| 综合性能分析 | Performance 面板 | 录制页面操作，查看主线程火焰图，识别长任务和渲染活动。 |
| 网络请求分析 | Network 面板 | 查看请求瀑布图，分析TTFB、传输时间，定位慢接口或大资源。 |
| 内存问题 | Memory 面板 | 使用Heap Snapshot和Allocation instrumentation查找泄漏。 |
| 渲染相关问题 | Rendering 面板 | 开启Paint flashing（查看重绘区域）、Layout Shift Regions（查看布局偏移）。 |
复盘结论
- 核心二分法：遇到卡顿，首先区分是“CPU算不过来”还是“在等I/O数据”。
- 工具化思维：熟练使用开发者工具是定位性能问题的关键，不要盲目猜测。
- 预防优于修复：在编码阶段就应具备性能意识，例如对高频事件做节流、避免布局抖动、合理使用缓存等。