如何调试scroll事件晚于pointermove事件触发的滚动延迟问题？

问题现象 #

在Chrome的20倍减速+设备模拟模式下，可观察到首个scroll事件比首个pointermove事件晚触发230ms，且首个scroll事件前会出现多个pointermove事件：

在Android设备（Pixel 8，2023款手机）上，无人工减速时滚动也存在明显延迟。

已尝试的修复方案 #

• 使用translateZ(0)实现GPU加速
• 为滚动处理器设置passive: true
• React时间切片
• 逐个禁用第三方包
• 避免重排/重绘操作

待明确的通用调试方向 #

• 如何判断特定CSS属性是否存在高性能开销
• 如何排查“Hit Test”耗时过长的原因
• 了解首个scroll事件前出现多个pointermove事件的相关资料

额外的调试步骤 #

除上述已尝试方案外，还可以通过以下步骤排查滚动延迟问题：

• 利用Chrome DevTools Performance面板深度分析：录制完整的滚动交互过程，重点查看Input、Animation、Paint、Composite阶段的耗时，定位是否有任务阻塞主线程，或是合成线程出现瓶颈。
• 检查touch-action属性配置：若滚动容器或其元素设置了不合理的touch-action值（如none、pan-x），可能会阻止浏览器的原生滚动优化，导致事件响应延迟。
• 排查输入事件监听的阻塞情况：检查所有pointerdown、touchstart事件的回调函数，确认是否存在同步执行的重计算、DOM操作等耗时逻辑，这些会延迟滚动事件的触发。
• 分析合成线程状态：在DevTools的Performance面板中查看Layer相关信息，检查是否存在图层过多、图层频繁合并的情况，这会增加合成阶段的耗时。
• 检查滚动节流/防抖的实现：若自定义了滚动事件的节流或防抖逻辑，确认延迟时间设置是否过长，或是逻辑本身存在性能损耗。
• 排查第三方脚本的干扰：通过DevTools的Coverage面板分析脚本执行时间，定位是否有广告、统计类第三方脚本在滚动时抢占主线程资源。
• 测试滚动容器的overflow配置：确认滚动容器的overflow属性是否正确设置为auto或scroll，避免因嵌套滚动、滚动区域计算错误导致的延迟。
• 使用Lighthouse进行性能审计：运行Lighthouse的性能测试，查看是否有与输入延迟、滚动性能相关的提示，获取针对性的优化建议。
• 排查硬件加速的异常情况：部分CSS属性（如filter、box-shadow）即使开启GPU加速，也可能导致图层渲染异常，可尝试临时移除这类属性验证是否改善滚动延迟。

内容的提问来源于stack exchange，提问作者Leo Jiang