打开方式
在谷歌浏览器调式模式下（F12），切换到 Performance 选项卡
Performance面板详解
区域1：控制栏
1.禁止javascript的采样：也就是说如果勾选了，在main区域，就不会记录javascript调用事件
2.Enable advanced paint instrumentation(slow): 启用高级绘画工具。则会详细记录某些渲染事件的细节，用于开启一些高级分析功能，比如图层信息、Paint 分析器等。【这一块没有查到到底怎么用，有知道的小伙伴可以在评论区给我分享一下】
区域2：overview【网页性能总览图】，包括四项指标：
1.FPS（每秒帧数情况）
2.CPU（CPU占用情况）：消耗 CPU 资源的事件类型，以及每种资源占用资源的多少
3.NET（网络资源情况）
4.HEAP（JS占用情况）
区域3：火焰图
Main：表示主线程，主要负责：Javascript 的计算与执行；CSS 样式计算；Layout 布局计算
这里需要特别注意，如果出现红三角，我们要重点关注一下，说明性能有问题
区域4：统计汇总【以图表的形式汇总数据】
1、Summary：表示各指标时间占用统计报表；
2、Bottom-Up：表示事件时长排序列表（倒序）=> 可直接查看花费最多时间的活动；
3、Call tree：表示事件调用顺序列表=>可直接查看导致最多工作的根活动 ；
4、Event Log：表示事件发生的顺序列表=>记录期间的活动顺序查看活动；
更多学习视频学习资料请参考：B站搜索“我们一起学前端”
