如何在Web Devtools Performance面板深挖长任务详情并解读Bottom-Up报告以优化INP？

一、深挖长任务细节：区分jQuery本身还是使用问题 #

• 打开Chrome DevTools的Performance面板，录制包含用户交互（点击、输入等触发INP的操作）的会话，找到红色标记的long task块
• 展开该长任务的调用栈：
  • 如果栈内大量出现jQuery.fn.init（即$()）相关调用，且存在重复DOM查询（比如多次调用$('.target')却未缓存结果），那大概率是**$()使用不当**——DOM查询属于高开销操作，重复执行会累积成long task
  • 如果栈内出现jQuery核心方法（如同步$.ajax、$.each遍历大量数据）长时间占用主线程，或是使用的jQuery版本过旧（比如1.x版本对现代DOM API的兼容额外开销），那可能是jQuery本身的性能瓶颈
• 验证方法：把可疑的jQuery代码临时替换为原生JS（比如将$('.list').each()改成document.querySelectorAll('.list').forEach()），重新录制Performance会话，对比长任务是否消失或缩短，直接验证问题根源

二、Bottom-Up报告解读教程 #

Bottom-Up是按耗时从高到低排序的函数调用统计，核心关注以下维度：

• Self Time：函数自身执行的耗时（不含子调用），数值越高说明函数本身逻辑越臃肿
• Total Time：函数自身加所有子调用的总耗时，数值高可能是自身逻辑重，也可能是调用了其他耗时函数
• Function列：点击函数名可直接跳转到对应代码位置，快速定位问题代码
• 操作步骤：
  1. Performance录制完成后，切换到Bottom-Up标签
  2. 优先查看按Self Time排序的前几项，重点排查Self Time高的函数——比如某个自定义jQuery插件方法Self Time占比极高，那就要优化这个方法的逻辑
  3. 如果Self Time高的是jQuery内置函数（如jQuery.parseHTML），点击函数名展开调用栈，找到业务代码里的触发点，检查是否传入了大量HTML字符串或存在重复调用
  4. 用Filter输入框筛选jQuery或业务相关函数名，快速缩小排查范围

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