性能优化的目的
google官网说明：性能功能参考 | Chrome DevTools | Chrome for Developers
使用 Performance 前，我们最好打开 Chrome 的无痕模式。因为 Chrome 上一般有着大量的插件，会或多或少的影响页面的性能，所以我们关掉这个来避免对页面性能的影响。
我们每一次的UI的变化，都要经历以下步骤：
我们都知道像素管道有五步，JavaScript->样式计算->布局->绘制->合成。
人的眼睛大约每秒可以看到 60 帧，那么就代表我们每 16.7ms 就要看到 1 帧，一帧就要经历上图的 5 步，说明我们的每一个任务（task） 不宜过长，这样就会导致用户对于界面感知的不友好性
-
fps 是指页面每秒帧数
-
fps = 60 性能极佳
-
fps < 24 会让用户感觉到卡顿，因为人眼的识别主要是24帧
根据谷歌统计的数据，用户在不同时间段内接收到的反馈，可能直接影响到对于网站的用户留存，如下图：
Performance功能区分类
我把 Performance 面板大概划分为操作区、设置区、报告区三块区域：
1.操作区：主要用于性能分析的开启、关闭、性能报告的上传下载等；
2.设置区：用于设置性能数据分析期间的各项指标，比如：CPU 运算能力、网络状态等等；
3.报告区：顾名思义，就是呈现最终性能分析报告的地方。
一、操作区
观察下图中用红线框起来的部分，这里有几个按钮：
按钮的功能大致相同，都是用于记录页面性能数据；两个按钮点击后都会出现下面这样的弹窗：
不过需要注意的是，这两种录制方式之间有一些不同：
点击(Record) 按钮，Chrome 会开始记录交互阶段的性能数据，需要手动点击 Stop 停止录制；
而点击(Start Profiling and reload page) 按钮，Chrome 会重新刷新页面并自动开始记录，等到页面完全渲染出来后自动结束记录。
清除报告
录制完成的数据，如果我们不需要了，就可以点击(Clear) 按钮来清除数据；是不是很一目了然呢？
当我们的数据录制完成，就可以 点击(Save Profile) 按钮来将录制的报告下载保存在本地；有了下载，当然少不了它的好兄弟上传！点击
(Load Profile) 就可以将本地报告再次上到 Performance 面板中；
报告对比
实际上，我们每次录制的报告都被自动留存起来；当存在多份性能报告时，还可以通过下拉切换查看不同的报告：
这样就能很方便地对比不同时间段的性能报告。图中用红虚线框起来的部分，就是用于切换报告的下拉框。
Screenshots 和 Memory
在操作区的右边还有两个复选框，Screenshots 和 Memory：
Screenshots
当勾选 Screenshots 后，在生成的性能报告中就会多出一栏用于记录页面在加载过程中的每一帧的视觉变化，并生成一系列快照；
并且当鼠标 hover 在这个区域时，就可以查看当前帧的快照：
通过查看这些快照，我们就可以了解页面在不同时间点的渲染情况。
Memory
而 Memory 功能则是用于观察页面的内存使用情况随时间的变化。
当勾选 Memory 功能后，在性能报告中就会显示页面的总内存使用量、堆内存使用量以及各种 JavaScript 对象的内存分配情况：
同样，当鼠标 hover 在下方不同类型文件占据内存情况的折线图时，就可以查看当前时间点下这些文件使用内存的情况。最后，操作区的(Collect garbage) 按钮用于手动触发 JavaScript 垃圾回收。
二、设置区
在文章前面简单介绍过，设置区主要用于设置性能数据分析期间的各项指标；下面我们来看看具体可以做哪些设置：
Disable JavaScript samples
默认情况下，Chrome 在做性能分析采样时会记录当前 JavaScript 执行的堆栈信息，并在报告区的 Main 部分呈现出来：
如果我们不关注 JavaScript 执行相关的性能，比如：测试在不同网络情况下的代码执行性能、测试渲染性能时；这种情况下就可以勾选 Disable JavaScript samples 这个选项，从而提高性能分析的效率；未勾选 Disable JavaScript samples 的情况下，报告区记录了 JavaScript 执行时的堆栈信息。
勾选了 Disable JavaScript samples 的情况下，报告区只记录了一些高级事件，比如：Function Call、渲染相关事件等。
Enable advanced paint instrumentation
这个选项用于启用高级绘制仪器；当你勾选了这个选项后，Chrome 将记录更详细的绘制信息，包括每个绘制操作的时间、持续时间、绘制区域等。
勾选了 Enable advanced paint instrumentation 后，当鼠标选中报告中 Frames 数据的某一帧时，在下方的面板里就会多出一个 Layers 的选项；
CPU 和 Network
在 CPU 下拉选项中，我们可以通过降低 CPU 的性能，来模拟低性能设备上的页面运行情况；比如移动设备，或者一些比较老旧的计算机；
而 Network 下拉框可以选择不同的网络条件，用于模拟网络不佳的情况下页面的运行情况。
Hardware concurrency
hardware concurrency 选项用于模拟硬件并发性能；勾选这个选项后，我们就可以选择从 1 到最大硬件并发性能水平之间的值，以模拟不同的硬件环境。
通过切换不同的 hardware concurrency 值，可以观察页面在不同硬件并发性能水平下的性能表现；这对于优化页面的并发处理和多线程任务非常有帮助。
硬件并发性能是指处理器（CPU）同时执行多个线程或任务的能力。现代计算机通常具有多核处理器，每个核心都可以同时执行多个线程。硬件并发性能的提高可以显著提升计算机的性能和响应能力。
三、报告区
接下来就是我们的重头戏，最终性能分析报告呈现的区域；我们之前介绍的操作、设置最终都是为性能报告服务。我们以掘金首页为例，来看看报告区都有哪些内容。
首先，我们要打开谷歌浏览器的无痕模式；默认快捷键是 Command+Option+N (Mac) 或者 Control+Shift+N (Windows, Linux)；然后打开掘金首页，点击(Start Profiling and reload page) 按钮来进行录制；等待几秒钟后，一份完整的性能报告就呈现出来啦：
从上图中可以看出，这份性能报告大概可以分为两块区域：概览区、性能报告区。
而所有的这些性能指标都是基于时间的维度来展示的，因此在性能报告中还有一条贯穿整个报告的时间线。使用无痕模式是为了避免安装的一些插件对性能测试产生影响。
概览区
首先，概览区的 x 轴就是时间线，而 y 轴展示了几个关键指标：CPU 占用情况、NET 网络请求情况、HEAP 堆内存使用量等；如果勾选了 Screenshots 还会有每一帧的绘制快照。
这些指标会以时间为顺序，通过图表的形式展现出来。
当我们用鼠标点击这个区域，在下方的性能报告和详情信息区域，就会呈现这一时间区间的性能情况：
性能报告区
这个区域呈现了许多性能指标项，我们一起来看看吧。Network 部分展现的是网络请求的瀑布图，我们点击，图标就可以展开这个面板：
从图中可以看出，这些网络请求的瀑布图有许多种颜色，这些颜色就代表了请求对应的文件类型：
蓝色: 请求 HTML 文档；
紫色：请求 CSS 文件；
黄色: 请求 JS 文件；
绿色: 请求图片；
Frames
Frames 区域展示了绘制一个帧所花费的确切时间；在这个部分，同样用颜色来区分了四种类型的帧：
空闲帧（白色）：表示在该帧中没有发生任何渲染或更新。
正常帧（绿色）：表示该帧在适当的时间内被渲染出来，没有出现延迟或问题。
部分呈现帧（黄色，带有稀疏的宽虚线图案）：表示 Chrome 尽力在适当的时间内渲染了部分视觉更新。例如：渲染器进程的主线程的工作延迟了，但合成器线程（如滚动）按时完成了渲染，则会出现这种情况。
丢帧（红色，带有密集的实线图案）：表示该帧由于性能问题或其他原因导致延迟，无法按时渲染。
Timings
Timings 这个模块展示了衡量网页性能（FP、FCP、DCL、LCP、L）的几个关键指标，以及完成指标对应的时间：
FP （First Paint）
指页面的首次渲染的时间点。在完成首次渲染之前，用户看到的都是 没有任何内容的白色页面，也就是我们常说的 白屏时间。FP 可以反映页面加载的整体速度。
FCP （First Contentful Paint）
指页面的首个内容绘制时间，即浏览器在页面上绘制出第一块有实际内容的区域（如文本、图像等）的时间点。FCP 反映了用户可以看到有意义的内容的时间。
DCL （DOM Content Loaded）
指当 HTML 文档被完全加载和解析后，DOM 树构建完成并且所有关联资源（如样式表、脚本等）已经下载完成，触发 DOMContentLoaded 事件的时间点。DCL 反映了页面的可交互性，表示页面已经准备好响应用户的操作。
LCP （Largest Contentful Paint）
指页面上最大的一个可见元素（如图片、文本等）绘制完成的时间点。LCP 是衡量页面加载速度的重要指标，它反映了页面主要内容的加载完成时间。
L （Load）
指页面完全加载完成的时间点。包括所有资源（如图片、样式表、脚本等）都已下载完成，并且相关的 DOM、CSSOM 和 JavaScript 都已经处理完成。L 反映了整个页面加载的时间。
Layout Shifts
这个指标用于衡量 页面加载过程中发生的视觉不稳定性。
那么什么叫做视觉不稳定性呢？
实际上，当用户在页面加载期间进行交互时，如果页面中的元素发生意外的移动或调整，会导致页面上的元素重新排列，从而造成视觉上的不连续和不稳定感。
这种 元素的移动可能会干扰用户的操作，例如点击了一个不想点到的按钮，或者导致误触其他元素。
我们点击 Layout Shifts 区域的色具体色块，在下方的 Summary 一栏就会展示此次位移的具体信息。
Main
这项指标可谓是整个性能报告中的重点区域，其中展示了 主线程在进行的相关活动。由于 Main 的图表长得像一团团倒立的火焰，所以，我们将其称为火焰图。它展现了主线程在 Record 过程中做的所有事情，包括：Loading、Scripting、Rendering、Painting 等等。火焰图的横轴代表着时间，纵轴代表着调用堆栈。每一个长条代表执行了一个事件或函数，长条的长度代表着耗时的长短，如果某个长条右上角是红色的则表示该函数存在性能问题，需要重点关注。
与 Network 用固定颜色来区分请求类型不同，Main 指标中的颜色是随机分配的。但是来自同一个脚本的调用在记录中会被分配为相同的颜色。
长任务
小伙伴们可能已经留意到了，在有的 Task 中除了灰色的区域外，还有部分被红色密集实线覆盖，同时右上角还有一个红色的三角 ：这实际上是用来标识这个任务是个长任务。执行时长超过 50 毫秒的任务会被定义为长任务；而超过 50 毫秒的部分就会用这种红色密集实线覆盖，这些长任务可能会阻塞主线程，导致页面卡顿、无法及时响应用户输入等等；是我们需要 重点关注 的对象。
矩形堆叠逻辑
图中位于最上方的 Task 表示 一个由浏览器调度和执行的任务单元；Task 的 长度就表示这个任务执行时间的跨度。而 Task 下方的这些矩形是根据函数之间的调用关系来堆放的，比如上图中，一个指针事件 pointermove 的触发，导致了一个 （匿名函数调用（Function Call） ；而这个匿名函数调用又引起了 value 函数的调用...以此类推一直到最后的函数 n。
任务具体信息
下面我们来查看一下对应任务的具体信息。当我们选中任意一个任务时，下方的面板就会展现对应的信息：
内存走势图
JS Heap：表示 JS 占用的内存大小。
Documents：表示文档数。
Nodes：表示 Node 节点数。
Listeners：表示监听数。
GPU Memory：表示 GPU 占用数。
其中 FP、FCP、FMP 是同一条虚线，三者时间不一致。比如首次渲染过后，有可能出现 JS 阻塞，这种情况下 FCP 就会大于 FP。
其中折线表示变化情况，拿蓝线来说，表示JS内存使用情况，如果内存持续走高，表示内存没有被回收，就有可能是出现了内存泄漏。也可以通过Performance monitor来观察内存是不是一直走高，来判断是不是发生了内存泄漏。
Summary
Summary 选项卡展示了 当前任务的具体信息，包括长任务警告、总任务时长、各个子任务耗时等等：
Bottom-Up
Bottom-Up 选项卡将当前任务下所有活动都展示出来，并且根据时间进行倒序排序。这样一来，一眼就能看出是哪个活动耗费了较长的时间：
并且还贴心的提供了筛选 （Filter） 功能和分组 （Grouping） 功能，方便我们分类查看：
图中可以看出，整个图表分为三列：
Self Time 表示这个根活动自身花费的时间；
Total Time 表示这个根活动自身以及导致的子活动花费的时间总和。
Activity 就是对应的活动名称；并且点击活动名称右侧的链接，还可以直接跳转到对应的源码。
Call Tree
Call Tree 选项卡可以用来查看当前任务下的根活动，以及根活动引发的一系列子活动的耗时。
根活动是那些导致浏览器做一些工作的活动。比如前面提到的 pointermove ，浏览器会触发一个Event活动作为根活动，该事件可能导致处理程序执行，依此类推。可以简单理解为火焰图顶层的活动。
Event Log
最后的 Event Log 选项卡是按照活动在记录过程中发生的先后顺序来呈现表格的：
Performance monitor
看起来，Performance 提供的性能监测功能已经较为完备，但是，它有两个问题：1.数据缺少实时性。2.数据面板过于复杂，不够直观。为了解决这两个问题，Chrome 提供了 Performance monitor 功能，以实时直观的数据展示页面性能。
通过点击页面中的操作，来观察内存走势，如果出现了JS heap size持续走高的情况，就有可能是出现了内存泄漏。
Lighthouse(Audits) 面板
来自 Google 的描述： Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。 您可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。 您为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告,会对页面的加载进行分析，然后给出提高页面性能的建议
点击analyze page load就可以生成一个报告：
Performance 性能
accessibility 无障碍使用
Best Practice 用户体验
SEO SEO 优化
Progressive Web App 页对于 PWA 的兼容性
