前端线上屏幕出现卡顿如何排查？

🧠 一、先判断：卡顿是哪一类？

不同类型，排查思路完全不同：

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.memo
useMemo
useCallback

❌ 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 / 渲染 / 布局）