🧠 一、先判断：卡顿是哪一类？
不同类型，排查思路完全不同：
1️⃣ 渲染卡顿（最常见）
表现：
- 滚动掉帧
- 动画不流畅
- 页面“抖”
👉 本质：主线程被占满（>16ms）
2️⃣ 交互卡顿
表现：
- 点击没反应（延迟几百 ms）
- 输入框卡
👉 本质：JS 执行阻塞
3️⃣ 加载卡顿
表现：
- 首屏慢
- 切页面慢
👉 本质：资源加载 / 代码体积问题
4️⃣ 内存问题（隐蔽）
表现：
- 用一会越来越卡
- 页面崩溃
👉 本质：内存泄漏
🔍 二、核心排查工具（必须会）
1️⃣ Chrome DevTools Performance（最重要）
👉 打开 Performance → 录制 → 操作页面
你重点看：
- Main（主线程）
- FPS（帧率）
- Tasks（任务耗时）
关键判断标准：
🚨 是否有“长任务”
👉 超过 50ms 的任务
表现：
🟥 Long Task
👉 说明：
- JS 太重
- 或同步计算太多
🚨 是否频繁 Reflow / Repaint
👉 Layout / Paint 很多
👉 说明：
- DOM 操作过多
- 样式触发回流
2️⃣ Lighthouse（快速诊断）
👉 看：
- TTI（可交互时间）
- LCP（最大内容绘制）
3️⃣ Memory 面板
👉 用于查：
- 内存泄漏
- 未释放对象
🧩 三、常见卡顿原因（实战总结）
❌ 1. 大量 DOM 渲染
比如：
list.map(item => <Item />)
👉 1万条数据直接渲染 = 必卡
✅ 解决
- 虚拟列表（react-window）
- 分批渲染
❌ 2. React 重渲染过多
表现：
- 每次 state 改变，全页面刷新
排查
👉 用 React DevTools → Profiler
✅ 解决
React.memouseMemouseCallback
❌ 3. 同步计算太重
for (let i = 0; i < 10000000; i++) {}
👉 主线程直接卡死
✅ 解决
- Web Worker
- 分片执行（requestIdleCallback）
❌ 4. 频繁触发回流（Reflow）
div.style.width = '100px'
div.style.height = '200px'
👉 每次都会触发 layout
✅ 优化
- 批量修改
- 使用
transform替代top/left
❌ 5. 事件频繁触发
比如：
- scroll
- resize
- input
✅ 解决
lodash.debounce
lodash.throttle
❌ 6. 图片 / 资源过大
👉 导致页面卡顿
✅ 优化
- 懒加载
- WebP
- CDN
❌ 7. 动画方式错误
top / left
👉 会触发 layout
✅ 正确方式
transform: translate3d()
❌ 8. 内存泄漏
常见：
- 未清除定时器
- 未销毁事件监听
✅ 解决
useEffect(() => {
return () => clearInterval(timer)
}, [])
🛠 四、线上排查实战流程（重点）
👉 真实工作中你应该这样做：
Step 1️⃣ 复现问题
- 用户操作路径
- 是否必现 / 偶现
Step 2️⃣ 打开 Performance 录制
👉 找：
- Long Task
- Layout
- JS 执行时间
Step 3️⃣ 定位具体函数
👉 看调用栈（Call Stack）
Step 4️⃣ 判断类型
- JS问题？
- 渲染问题？
- 网络问题？
Step 5️⃣ 对应优化
🚀 五、进阶：线上监控（大厂做法）
你可以加：
- 性能监控（FP / FCP / LCP）
- 卡顿监控（Long Task API）
new PerformanceObserver((list) => {
list.getEntries().forEach(entry => {
console.log('long task:', entry)
})
}).observe({ entryTypes: ['longtask'] })
💡 六、面试加分回答模板（直接可用）
如果面试官问：
👉 “线上卡顿怎么排查？”
你可以这样答：
我一般会先判断卡顿类型（渲染 / JS / 加载），然后用 Chrome Performance 录制，重点看 Main 线程是否有 Long Task，如果有会分析调用栈定位具体函数。如果是渲染问题会关注 Layout 和 Paint 次数，如果是 JS 问题会拆分任务或用 Web Worker。对于大列表会用虚拟滚动，频繁事件会做节流。线上还会结合 PerformanceObserver 做卡顿监控。
🧾 总结一句话
👉 前端卡顿本质就是：
主线程被占满（JS / 渲染 / 布局）
