低端安卓机滚动订单列表,帧率掉到 18fps,每次滚动都触发一次 layout。Performance 面板里 Recalculate Style 占了 60%。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,scroll 回调里读 offsetTop 和 scrollHeight,强制同步布局,回调又没有节流,一帧执行好几次。列表项还带着 box-shadow。
「移动端滚动性能」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。
addEventListener('scroll', () => requestAnimationFrame(update), { passive: true });
const top = el.offsetTop; // 只在初始化时读一次
权限不要一口气开到最大,先加到够用再往上试,范围小才好收。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。
改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。
具体做法是,滚动监听加 passive 并用 rAF 合并;把 offsetTop 测量移出滚动回调 提前缓存;吸顶交给 position: sticky 不自己算;低端机上录 10 秒滚动 看帧率是否到 50。
最后用这个标准收尾,同一台设备滚动帧率从 18fps 升到 50fps 以上,滚动回调里没有布局读取。
