移动端性能分析时怎么定位卡顿问题？

士懿提问于 2026-03-30 14:16:15 阅读 4

移动

我在用 Chrome DevTools 调试移动端页面，发现列表滚动特别卡，但 Performance 面板里看到的都是小块的长任务，不知道哪个是罪魁祸首。试过用 performance.mark() 手动打点，但还是看不出具体哪段 JS 或渲染操作拖慢了帧率。

有没有更直观的办法能快速定位到导致掉帧的具体函数或 DOM 操作？比如能不能把卡顿时的调用栈和 FPS 关联起来看？

性能分析移动调试

我来解答赞 1 收藏

反馈

1 条解答

君杰 Lv1

用 Chrome DevTools 调试移动端性能问题时，我一般直接上火焰图。打开 Performance 面板，记得勾选 Screenshots 和 Paint，这样能直观看到每一帧的渲染情况。

重点是看 CPU 活动区间的火焰图，这里能看到每个函数的调用栈。卡顿时对应的长任务里，找最宽的那条，通常就是罪魁祸首。这个区域显示了 JS 执行和渲染的耗时分布。

要是想精确到具体函数，可以试试用 console.time() 包围可疑代码段，配合 console.timeEnd() 输出执行时间。不过这种方法得对代码有一定了解才能快速定位。

还有个小技巧，开启 GPU 进度追踪（在 More tools 里），能帮你区分是 CPU 瓶颈还是 GPU 渲染问题。要是发现大量合成层重绘，考虑优化一下 CSS 布局或者减少透明度动画。



// 示例代码

function heavyOperation() {

    console.time('heavyOperation');

    // 模拟耗时操作

    for (let i = 0; i < 1000000; i++) {

        Math.sqrt(i);

    }

    console.timeEnd('heavyOperation');

}

记住，别一上来就怀疑 JS 性能，很多时候是布局计算和样式重排在捣乱。从最可能的地方开始排查，别浪费时间。

2026-03-30 15:01