使用Chrome DevTools的Performance和Memory面板可定位性能瓶颈与内存泄漏，结合console.time、Performance API等工具精准测量并优化代码执行效率。
JavaScript性能问题常常影响用户体验，尤其是在复杂应用中。学会使用性能分析工具能快速定位瓶颈，比如内存泄漏、频繁重排、耗时函数等。Chrome DevTools 提供了强大的性能分析功能，结合一些实用技巧，可以高效排查和优化代码。
使用 Chrome DevTools 的 Performance 面板
Performance 面板是分析运行时性能的核心工具。它能记录页面在一段时间内的行为，包括脚本执行、渲染、GC（垃圾回收）等。
- 打开 DevTools，切换到 Performance 标签页
- 点击录制按钮（●），操作页面一段时间后停止录制
- 查看火焰图（Flame Chart），找到长时间运行的函数
- 关注 Main 线程中的长任务（Long Tasks），它们会阻塞 UI
- 检查是否有频繁的强制重排或重绘（Layout / Paint）
通过调用栈信息，可以直接跳转到可疑函数源码，进一步分析逻辑是否可优化。
利用 Memory 面板排查内存泄漏
内存泄漏会导致页面越来越
卡，甚至崩溃。Memory 面板帮助你查看堆内存快照和实时分配情况。
- 使用 Heap Snapshot 拍摄多个时间点的内存快照，对比对象数量变化
- 重点关注
Detached DOM trees，这是常见的泄漏源 - 通过 Allocation instrumentation on timeline 查看对象创建过程，追踪未释放的引用
- 检查闭包是否持有不必要的外部变量
如果发现某个构造函数实例持续增加，很可能是事件监听未解绑或定时器未清除。
使用 console.time 和 console.profile 进行简单计时
对于局部代码段的性能测试，可以使用内置的 console 方法快速测量。
-
console.time('fetchData')开始计时，console.timeEnd('fetchData')输出耗时 -
console.profile()启动 CPU 分析，console.profileEnd()停止并生成报告（需在 DevTools 中查看） - 适合在开发阶段对算法或数据处理函数做粗略评估
注意：这些方法在生产环境应移除或封装，避免影响性能。
借助 Performance API 获取高精度时间
浏览器提供的 Performance API 能提供亚毫秒级的时间戳，比 Date.now() 更精确。
- 使用
performance.now()获取当前时间（相对于页面加载） - 结合
performance.mark()和performance.measure()标记关键节点 - 通过
performance.getEntriesByName()获取测量结果
适用于监控关键路径如接口响应、组件渲染等，也可上报到监控系统做长期分析。
基本上就这些。掌握这些工具和方法，能让你在面对性能问题时不再盲调。关键是养成记录和对比的习惯，用数据说话，而不是靠猜。
