持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情
前言
又到了每日更文的时间，今天给大家带来chrome开发者工具的第五个面板—— performance面板。performance用来记录与分析应用程序运行过程中所产生的活动，更多的是用在性能优化方面。他大致是这样的：
时间原因我也不一一标注了，下面就看看每一块的功能吧。
设置(最右上角的)
设置项有：
- Disable JavaScript samples(不允许采样)
- Network(网络限制)
- Enable advanced paint insstrumentation(slow)(记录渲染信息，会产生一定的性能损耗，记录后可以再paint profile面板查看)
- CPU(CPU限制)
记录按钮
最左侧圆圈，是否需要对当前页面的运行进行记录，当打开记录按钮开始执行记录过程的时候，该按钮显示红色
在开始录制之前，先切到 Elements tab 下，将 body 进行 delete element 的操作，这样操作的结果会更准确些~
刷新按钮
记录按钮右边，重新启动记录
清除按钮
刷新按钮右边，按下后会清除之前的记录信息，瞬间白板
记录列表
清除按钮右边是上传下载，再右边就是记录列表了，就是每次记录数据的列表
录制截屏和截屏列表
记录列表右侧，和Network的捕获截屏是一样的，会产生一定的性能损耗。
内存使用信息
当打开状态时，记录在记录过程中如js堆内存、Node节点数等数据的记忆线。下图是记忆线出现的位置，在该记忆线上移动鼠标，会在图的下面出现对应时间点时的各项指标数据
垃圾回收
针对记录过程所产生的垃圾进行回收，释放浏览器内存
Web Vitals
Core Web Vitals 是由Google 定期选出，在三种不同面相中最具代表性的使用者体验指标，而目前的Core Web Vitals 分别是：
Largest Contentful Paint (LCP) – 载入速度
First Input Delay (FID) – 互动性
Cumulative Layout Shift (CLS) – 稳定性
FPS信息
页面活动时的FPS变化信息，通常设备的屏幕的刷新频率是60FPS，超过的话，则有可能产生卡顿现象
CPU信息
记录浏览器内核的运行情况,以曲线区域图的形式展示。黄色的表示对js的操作所占内存(js代码评估及函数调用)，蓝色表示对html操作所占的内存(主要是html编译)，紫色表示对css操作所占的内存(css样式计算等)，灰色表示其他操作所占的内存
网络请求信息
网络资源请求信息，以不同颜色的条状表示不同的资源。黄色表示是script文件，蓝色表示是html文件，紫色表示是css文件，绿色表示是媒体文件，灰色表示各种其他文件~效果如图:
主线程-函数瀑布图
各种函数的信息大集合，第一行代表随着时间推移而发生的事件，下面各行是第一行事件的子项，由下面的各项组成第一行的整体事件。具体效果如图所示(为方便查看，这里截取一段时间内的事件瀑布图)
合成线程
了解合成线程先， 我们先温习一下浏览器渲染过程是怎样的？
按照渲染的时间顺序，流水线可分为如下几个子阶段：构建DOM树、样式计算、布局阶段、分层、栅格化和显示。
- 渲染进程将 HTML 内容转换为能够读懂DOM 树结构。
- 渲染引擎将 CSS 样式表转化为浏览器可以理解的styleSheets，计算出 DOM 节点的样式。
- 创建布局树，并计算元素的布局信息。
- 对布局树进行分层，并生成分层树。
- 为每个图层生成绘制列表，并将其提交到合成线程。合成线程将图层分图块，并栅格化将图块转换成位图。
- 合成线程发送绘制图块命令给浏览器进程。浏览器进程根据指令生成页面，并显示到显示器上。
so, 合成线程干的就是这个事。 当记录一个网站加载过程时，在事件瀑布面板会有4条虚线，绿色的表示第一次开始绘制页面，蓝色线代表DOM已加载完成，红色线表示页面加载完(包括资源引用)， 橄榄色代表LCP
summary 信息汇总&细节展示
该区域主要展示所选内容的信息汇总和各项细节信息
bottom-up
根据事件耗时长短，反向列出事件列表，有分类可选(通过类型、域、子域、URL分类列出)，面板右边也有详细介绍
call-tree(事件调用的树形图)
可在树形图中查看各项事件的子项信息，及各子项的信息,同样也有分组筛选，规则同上，面板右边同上
event-log(事件日志)
明确列出各项事件的详细信息，可以进行关键字筛选，所耗时间筛选，事件类型筛选等，右边是详细信息，可看到函数调用栈的跟踪信息。
