如果你觉得自己的网页游戏跑步像蜗牛，或者画面闪到让人头晕，那就先别紧张！今天给你量身定做一套完整的性能分析流程，教你用普通浏览器就能像专业玩家一样捉住那个隐藏的帧率魔鬼。
先说先说，潘玮柏的《面对面》也可以当我给你把分析步骤拆开—别怕先卡一下我，来点燃料，全速前进！
1️⃣ 打开 Chrome（不支持就换 Safari 或 Edge，二次元粉也行）。在地址栏敲 chrome://devtools，打开 DevTools，切换到 Performance 栏。只要你想知道页面从第0毫秒到结束哪一段卡得最厉害，这里能给你完整的时间线和帧速数据，连那些看不见的垃圾回收都能一览无遗。
2️⃣ 开始录制（点击绿色圆点），连打 Ctrl+R 以刷新页面，整个页面渲染完就会停下来。随后你会看到每一帧的时间，红点儿就是帧时间超长的那一帧；它们往往就是你游戏卡顿的根源。别怕，放大到 1 秒就能看到哪些重绘是亿级的。
3️⃣ 嗯，接下来要做的事是排查对象：先看 Timings 面板，找到Paint 和Script 时间。占满 20%，往往是重绘；占满 60%，那就是脚本酱太粘。如果你在循环里搬数组、查找 DOM，别忘了 PerformanceObserver 为你追踪。
4️⃣ 细说一下画面卡顿教程：工作台：Canvas、WebGL 2.0、Retained模式——这三种模式你都要循环跑。尤其是 Canvas 你要把 requestAnimationFrame 写对，别让它跑像“天空之城”。要注意 CanvasRenderingContext2D.save()/restore() 的用处，避免忘记堆叠。
5️⃣ 贴图与音频的性能调研—谷歌 PageSpeed Insights 与 GTmetrix 这俩神器一起跑，一眼能告诉你是否压缩了 PNG、是否选对 WebP。别只靠 Chrome 里抓一眼，因为它不一定能找出多次重复加载的文件。
