Chrome Performance 面板深入分析
如何使用 Chrome Performance 面板排查页面卡顿？FPS 曲线、火焰图(Flame Chart)、Summary 饼图如何解读？Long Task、Forced Reflow、Layer 分析分别定位什么问题？
回答
专业代码师
录制: DevTools->Performance->开始录制。FPS 曲线: 绿色=正常帧率，红色=掉帧(<30fps 用户体验差)。Flame Chart: 自上而下调用栈，宽度=耗时，红色=Long Task(>50ms)。Summary: Loading/Scripting/Rendering/Painting/System/Idle 饼图。Long Task: 阻塞主线程>50ms，拆分用 setTimeout/Web Worker。Forced Reflow: 读取 layout 前修改样式触发同步布局。Layer: 过多层内存高；滚动卡顿检查 paint 未提升合成层。5x slowdown 模拟低端设备。