如何查找项目中导致页面滚动卡顿的问题JS文件

1. 卡顿问题精准定位 #

• 打开Chromium内核浏览器（Chrome/Edge），按F12调出开发者工具，切换到**性能(Performance)**面板
• 点击面板左上角录制按钮后立刻快速滚动页面3~5秒，点击停止结束录制
• 在生成的性能报告中找到Main主线程区块，标记所有执行时长超过16ms的长任务（60帧刷新率下单帧最大允许执行时间为16ms，超出就会出现卡顿）
• 点击对应长任务，右侧调用栈列表会直接显示触发任务的JS文件名、具体执行函数，可直接定位问题文件
• 额外可切换到**元素(Elements)**面板的*事件监听器(Event Listeners)*标签，筛选scroll类型的绑定事件，逐个查看关联的源文件，临时移除对应事件绑定测试滚动是否恢复，可快速验证定位结果

2. 加载缓慢问题排查 #

• 切换到开发者工具的**网络(Network)**面板，勾选*禁用缓存(Disable cache)*选项，刷新页面模拟用户首次访问场景
• 点击面板顶部的JS筛选按钮，只展示JS资源加载记录，查看每个文件的加载耗时、下载体积、加载优先级
• 标记体积过大、加载耗时过长的JS文件，排查是否未做代码压缩、Tree Shaking、按需引入等优化处理
• 查看加载时序图，确认是否存在多个高优先级JS同步阻塞加载的情况，可定位拖慢整体加载速度的文件

内容的提问来源于stack exchange，提问作者mariappan k