如何定位导致页面滚动卡顿的慢速JavaScript事件？

针对滚动触发卡顿、交互响应延迟的问题，无需通读全量项目代码，可直接通过浏览器自带开发者工具定位根因：

Chrome 浏览器定位步骤 #

• 打开Chrome DevTools（快捷键 F12 / Ctrl+Shift+I / Cmd+Opt+I），切换到「Performance」面板
• 勾选面板顶部的 Screenshots 选项，点击左上角的圆形录制按钮，手动滚动页面3-5秒后停止录制
• 查看生成的火焰图中*主线程（Main）*的任务列表：标记为红色、宽度超过10ms的任务即为阻塞渲染的长任务
• 点击长任务可展开完整调用栈，直接定位到耗时最高的JS函数，调用栈会自动关联对应的源码文件与行号
• 额外可切换到「Layers」面板排查是否存在过量的重绘重排：Compositor 线程耗时过高也会导致滚动与hover交互失效

Firefox 浏览器定位步骤 #

• 打开Firefox DevTools（快捷键同上），切换到「性能」面板
• 点击「开始录制」，重复滚动操作后停止录制
• 查看「调用树」标签，按总耗时倒序排列，可直接筛选出占比最高的JS执行逻辑
• 切换到「水印」标签，可直观看到所有长任务的时间节点，和滚动操作的时间线一一对应即可锁定关联函数

快速验证排查手段 #

• 打开控制台执行 document.body.style.pointerEvents = 'none' 后再滚动页面，如果卡顿消失，说明问题和scroll、mouseover、touchmove 类交互事件监听有关
• 打开DevTools「Elements」面板的「Event Listeners」标签，批量查看绑定在window、document、滚动容器上的滚动/鼠标事件，逐一移除监听后测试滚动是否恢复流畅
• 优先排查无限滚动、虚拟列表、滚动埋点上报类逻辑：未做节流防抖的scroll事件每秒触发可达60次，极易生成阻塞渲染的长任务

内容的提问来源于stack exchange，提问作者John Smith