F12 前端性能

🍕 Performance核心是找出卡顿、白屏、掉帧、交互慢、内存涨等，Memory三步堆快照取证则可排除GC波动误判，快速定位问题。

1 录制控制区

• 录制控制区
  • Record(录制)、Record and reload(刷新后录制整段加载过程)：分析白屏、初始化慢问题。
    • Screenshots(录制过程中抓取页面截图)：看画面是否会出现白屏，是否会闪跳等问题。
    • Memory(记录JS Heap、DOM、监听器、CPU内存趋势)：内存上涨、泄露、频繁回收。
    • 点击右侧设置打开，CPU、Network(模拟低端CPU或慢网络)：验证低端设备、弱网体验。

2 Overview总览

• Overview总览
  • 看CPU、FPS、网络、截图、内存的整体走势，判断是不是主线程忙、请求慢、掉帧率等。
  • Network(资源请求时间线)：看关键资源是否阻塞首屏、是否重复请求。
  • Frames(每一帧的耗时和掉帧情况)：看是否动画卡、滚动卡、帧率不稳。
  • Animations(动画播放与关键时间点)：动画是否顺滑、是否被长任务打断。
  • Layout shifts(记录布局偏移)：观察页面元素是否跳动、页面是否会CLS偏高等。
  • Main(主线程执行的JS、样式、布局、绘制)：JS重、重排重绘多、事件处理慢。
  • Worker、Thread pool、Font thread、MemoryInfra、GPU：指非主线程的工作。

3 侧栏与底部区

• 侧栏与底部区
  • Insights(Chrome自动给出的性能洞察)：速看LCP、INP、CLS、强制回流、三方脚本问题。
  • Summary(当前选中时间段的耗时分类)：直接查看Scripting、Rendering、Painting的占比。
  • Bottom-up(从最耗时函数往上汇总)：找真正吃CPU的函数。
  • Call tree(从调用链看耗时分布)：看谁调用了重的逻辑。
  • Event log(按时间顺序列出事件)：还原问题的发生顺序。
  • 1st/3rd party(区分一三方、未归因脚本耗时)：找三方包、匿名脚本、缺少source map的代码。

4 图表指标泄露判定

• 图表指标泄露判定
  • 蓝线JS heap(JS堆内存)
    • 锯齿阶梯爬升：GC后仅小幅跌落，但内存底线持续上移，无法回落至初始28.8MB基准。
    • 正常无泄漏：GC后内存会跌回初始低位。
    • 当前GC回收不完全闲置内存，堆内存稳步累积泄漏。
  • 红线Documents(文档)
    • 数值固定3，全程持平即全程在同一页面，无页面刷新或路由重载。
    • 排除页面切换导致的正常内存上涨，所有内存增量都是泄漏造成的。
  • 绿线Nodes(DOM节点)
    • 呈阶梯式持续抬升，每次业务执行(大屏轮询、刷新)，节点只新增、无法回落清理。
    • 游离DOM被JS变量、闭包、事件引用，无法被GC回收，DOM泄漏是核心元凶之一。
  • 橙线Listeners(事件监听器)
    • 监听数量单边稳步上涨，新增addEventListener后没有配对removeEventListener进行解绑。
    • 大概率是定时器、resize、图表事件、自定义事件只绑不解，监听器持有DOM引用锁住内存。
  • 总结
    • 四线同步阶梯抬升是前端内存泄漏的标准特征，DOM>事件>JS对象层层互相引用，GC无法回收。
    • 正常健康页面：JS heap等在GC后会回落至初始基线，整体在固定区间震荡，不会阶梯爬坡上涨。

5 Memory堆快照取证

• Memory堆快照取证
  • Chrome无痕模式打开页面>F12>Memory，快照取证>定位泄漏源>分场景修复>复测验证。
  • 基准快照(初始干净态)：页面加载完毕，点击图标Collect garbage手动强制执行GC，等待3s。
  • 点击图标Take heap snapshot，生成Snapshot1(基准快照)，该快照代表了页面的初始内存基线。
  • 业务快照：切换到专题模块，加载完毕后再切换回基准页，等待加载完毕，手动GC，拍摄快照。
  • 再次重复业务快照的操作，选中Snapshot2或者3>顶部下拉从Summary改成Comparison，比对1。
    • 筛选框输入：Detached。
    • 只看游离DOM节点，Detached HTMLDivElement或Detached DOM tree。
    • 右侧的“#New”一列持续+、数量只增不减，说明DOM泄漏实锤。
    • 额外搜索：echarts、Chart或Map，看ECharts实例对象持续新增不销毁。
    • 或者搜索：EventListener，监听器对象Delta持续上涨，事件只绑不解绑。
  • 结论
    • Detached HTMLCollection的Delta数值为+1004只增不减，说明严重内存泄漏。
    • HTMLCollection内部强引用页面DOM，DOM从页面移除后被集合锁死无法GC。