2024-05-30 · Web Performance

用性能面板诊断主线程卡顿

从一份杂乱的录制结果,一路追到掉帧的那个函数。

前言

一次完整的排障过程:录制追踪文件、阅读长任务、对照布局反复重排,并用前后对比的火焰图证明真的修好了。

常见的翻车姿势

跳过这一步的团队,通常会踩中三种坑:

  • 优化了一个没人同意要动的数字。
  • 照抄了约束完全不同的项目的方案。
  • 一直推迟决策,直到反悔的代价高得吓人。

建议的切入方式

  1. 用用户的语言,一句话讲清楚问题。
  2. 选择一个每周都能度量的信号,而不是只在上线当天看一眼。
  3. 给小实验设定时间盒;两天的 spike 胜过两周的辩论。

小结

如果 Web Performance 教会了我们什么,那就是「无聊的一致性」打赢「聪明的一次性方案」。把学到的东西带回团队,别让它变成口口相传的都市传说。