移动端页面卡顿怎么用 Chrome DevTools 分析性能？

FSD-瑞君提问于 2026-03-25 07:11:15 阅读 3

移动

我用 Chrome 远程调试 iPhone 上的 H5 页面，发现滚动特别卡，但不知道怎么用 Performance 面板抓取真实设备上的性能数据。本地模拟器跑起来又不卡，根本复现不了问题。

试过在 DevTools 里点 Record，但在真机上操作时录制按钮一直是灰色的，是不是 iOS 不支持？有没有其他办法能拿到主线程阻塞或者重排重绘的具体耗时？

移动调试

我来解答赞 1 收藏

反馈

1 条解答

东方爱景 Lv1

移动端页面卡顿确实挺让人头疼的，尤其是在真机上复现问题的时候。Chrome DevTools 虽然强大，但有时候在真机上会有一些限制。不过别担心，我们有办法搞定。

首先，确保你已经通过 USB 连接了 iPhone，并且开启了 Safari 的 Web 检查器。然后在 Chrome 的 DevTools 里切换到 Remote Devices 面板，你应该能看到连接的设备。点击设备，然后选择你要调试的页面。

接下来，关键步骤来了。在 Performance 面板里，你可能发现录制按钮是灰色的，这是因为 iOS 对性能分析有一些限制。不过你可以尝试以下方法：

1. 打开 Console 面板，输入 window.performance.mark('start'); 然后进行一些操作，最后再输入 window.performance.mark('end');。
2. 再次回到 Performance 面板，点击“Load profile from a file”，然后选择“Record”旁边的“Load”按钮。你会看到一个下拉菜单，选择“From timeline”。
3. 在 Timeline 面板里，你可以看到刚才记录的 start 和 end 之间的所有事件，包括 JavaScript 执行、重排重绘等。

另外，你还可以试试 Network 面板和 Rendering 面板，看看是否有资源加载慢或者渲染路径上的问题。

如果这些方法还是不够，可能得考虑使用 Xcode 的 Instruments 工具了，它对 iOS 性能分析的支持更全面。

希望这些建议能帮到你，JS 里的性能优化有时候真是个细活儿。加油！

2026-03-25 08:00