通过开发者工具定位JS线程瓶颈
按Ctrl+Shift+I打开开发者工具，切换到“Sources”面板。点击“Performance”录制按钮后复现卡死操作，停止录制后展开“Main”线程，查看长时间运行的脚本（如超过500ms）。重点检查事件监听器（如scroll/resize）和定时器（setInterval/setTimeout）的执行频率。
检测野线程（Long Task）对渲染的影响
在开发者工具的“Performance”面板中，筛选任务时长超过5秒的条目。右键点击对应任务选择“Isolate Selected”，观察是否阻塞了关键渲染流程。长任务可能由未优化的轮询请求或复杂数据计算引发，需考虑改用Web Workers处理。
分析内存泄漏与GC频率关系
切换到“Memory”面板，多次采样堆内存快照。若堆内存持续增长且无下降趋势，说明存在全局变量未释放或闭包滥用。此时JS引擎会频繁触发垃圾回收（GC），导致页面卡顿。可尝试在控制台输入`window.location.reload()`强制刷新并观察内存变化。
监控网络请求对主线程的压力
在“Network”面板开启“Preserve log”后刷新页面，观察XHR请求数量及响应时间。大量同步请求（如未使用async/await）会阻塞主线程，导致渲染暂停。建议将关键接口改为异步加载，并对大文件分片传输（如切片下载）。
检查第三方脚本的资源消耗
展开“Sources”面板中的“Content Scripts”，禁用广告追踪代码（如Google Analytics）、社交分享插件等扩展脚本。重新加载页面对比CPU占用率，若明显下降则需优化或延迟加载这些资源，例如使用`load=lazy`属性或动态创建``标签。
识别递归调用导致的无限循环
在控制台输入`performance.getEntriesByType('measure').map(e => e.duration)`，排查是否存在异常长的函数执行记录。递归未设置终止条件（如错误的Promise链）会导致主线程持续繁忙，需立即中断执行（按Pause键）并修复逻辑漏洞。
调整动画帧率减轻渲染压力
对于使用`requestAnimationFrame`实现的动画，检查每帧执行时间是否超过16ms（60FPS标准）。在“Rendering”面板启用“Paint flashing”后，观察重绘区域是否过大。可通过降低动画复杂度（如减少DOM元素数量）或拆分任务到微任务队列（`setTimeout`）来改善流畅度。