通过Performance面板录制并分析脚本执行时间线，重点关注黄色Scripting区块，识别长任务、高频小任务及隐式同步操作，结合火焰图与Bottom-Up视图定位高Self Time函数及第三方库瓶颈，验证优化后TBT下降、长任务减少。
通过浏览器开发者工具的性能面板（Performance tab）分析脚本执行，核心是捕获运行时的详细时间线，定位耗时长、阻塞渲染或频繁触发的 JavaScript 任务。
录制并加载性能数据
打开开发者工具 → 切换到 Performance 面板 → 点击左上角录制按钮（●），执行目标操作（如页面加载、点击交互），再停止录制。确保勾选“Screenshots”可辅助判断卡顿帧，勾选“JavaScript samples”才能看到函数级调用栈。
- 若脚本执行时间长，主线程会出现持续的绿色（Parse HTML）、黄色（Scripting）、紫色（Rendering）长条，其中黄色区域即 JS 执行耗时
- 放大时间轴（滚轮缩放或拖拽选择区域），聚焦在高耗时的黄色块上，右键 → “Zoom to selection” 可深入查看
识别关键脚本活动
在火焰图（Flame Chart）下方的“Main”轨道中，展开黄色区块，能看到具体执行的函数名、调用栈和耗时。重点关注：
- 顶层长任务（>50ms）：标红或带“Long task”标签，直接导致掉帧，常见于复杂计算、大量 DOM 操作或未分片的循环
- 高频小任务：如反复触发的事件回调（input、scroll）、setInterval、MutationObserver 处理器，虽单次短但累积占满主线程
- 隐式强制同步操作：如读取 offsetTop/clientWidth 后立即修改样式（触发重排），会在 Flame Chart 中表现为成对出现的 Layout + Scripting 块
结合调用栈与源码定位问题
点击任一函数节点，在底部 Summary 或 Bottom-Up 标签页中查看其总耗时、调用次数和父调用者。Bottom-Up 表按“Self Time”降序排列，能快速发现真正消耗 CPU 的函数（而非只是被频繁调用的入口）。
- 若某自定义函数 Self Time 高，点开它 → 查看“Source”链接跳转到 DevTools Sources 面板对应行号，结合断点或 console.time 进一步验证
- 注意第三方库（如 moment.js、lodash）的同步方法调用，它们可能在初始化或数据处理时成为瓶颈
- 检查是否误用 console.log（尤其对象），某些浏览器中会触发属性枚举，延长脚本执行
验证优化效果
修改代码后，不要只看平均耗时，要重新录制多次、对比关键路径的：
- 主线程阻塞时长（Total Blocking Time, TBT）是否下降
- 长任务数量是否减少，单个长任务是否拆分为多个
- Scripting 时间占比是否从 >40% 降到 20% 以内（理想值）
