这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战。
前言
Chrome DevTools 是 Chrome 浏览器提供的开发者工具，可以帮助开发者对页面进行性能分析，网络请求分析等，帮助我们寻找到性能瓶颈，从而制定优化策略。
接下来我们将对 Chrome DevTools 的 Performance、Network 面板展开介绍。
Performance
在使用 Performance 进行页面分析之前，我们一般先让浏览器处于无痕模式下，无痕模式可以保证 Chrome 在一个相对干净的环境下运行，屏蔽浏览器插件等因素对页面性能分析造成干扰。通过 Chrome 右上角打开无痕模式：
通过快捷键 Command+Opiton+I (window 系统 Control+shift+I) 打开 Chrome DevTools，选择 Performance 面板，根据面板的提示信息，开始生成页面性能分析报告。
生成的分析报告中，包含许多跟页面性能相关的指标，从区域上可分为概览区域，资源消耗详情区域和统计汇总区域。
概览区域
概览区域横坐标为时间，自上而下分别为 FPS、CPU、NET 和屏幕快照：
FPS：帧率，每秒渲染帧等次数，红色表示帧率过低，绿色则正常。该指标一般在页面分析动画性能时使用，FPS稳定在60左右最佳，FPS过低，页面则会有明显的卡顿。CPU：表示CPU耗时，区域内的颜色表示各种事件。NET：蓝色区域表示这个时间段存在网络请求。- 屏幕快照：表示该时间点上的屏幕截图。
资源消耗详情区域
资源消耗详情区域包含各项重要资源的统计详情，横轴为时间轴。
Frames
表示绘制每一帧消耗的时间，鼠标移动到该区域，可以查看每一帧的耗时和 FPS。
Timing
我们知道在页面呈现过程中，大致经历以下几个步骤：
HTML解析生成DOM树。- 结合计算样式规则，生成或更新
render树。 - 图层化：根据一定的规则将
DOM子树划分到的图层，生成或更新layer树。 - Paint：绘制图层，输出绘图指令列表。
- Rasterization：光栅化，为图层区域填充像素值。
- 合成：将图层按规则合成。
Timings 中记录一些关键的时间点，这些时间点可以辅助分析页面性能：
- DCL：
DOMContentLoaded Event触发的时间点，表示页面DOM树解析完成。 - L：
onload事件触发时间点，表示页面加载完成，包括图片等资源。 - FP：
First Paint，页面首次绘制的时间点，即页面首次产生像素变化，例如设置页面背景颜色，当背景颜色绘制完成即触发。 - FCP：
First Contentful Paint，页面首次有效内容的绘制，包括文本、图片、canvas和svg。FCP和FP有时可能相等。 - LCP：
Largest Contentful Paint，最大有效内容的绘制时间点，表示页面中占可视区域面积最大的内容绘制完成，在单页面盛行的时代，FP和FCP逐渐失去它的衡量意义，LCP成为一个更准确衡量页面呈现快慢的重要指标。
Main
记录主线程处理 task 消耗的时间，区域的内容自上而下表示task的调用栈，不同的颜色表示执行不同类型的事件，主要需要关注三种颜色：
| 颜色 | 事件 |
|---|---|
| 黄色 | js 脚本执行 |
| 紫色 | Render 相关的事件 （包括样式计算，更新 layer 树，更新 render 树） |
| 绿色 | Paint 相关的事件 |
task 如果存在红色的三角形，表示该任务存着异常的情况，点击该事件可以在 summary 区域查看详细内容：
Raster
记录 Rasterizer （光栅化）线程的运行时间，该线程主要处理 Rasterizer Paint 相关的任务。
GPU
表示 GPU 运行的时间，GPU 具有高并行计算能力，能够“加速”页面处理，例如合成图层一般就由 GPU 处理。
Compositer
记录 Compositer (合成线程)的运行时间，该线程主要负责：
- 页面渲染时将内容上传给GPU，通知GPU绘制到屏幕。
- 页面滚动时处理可视区域和即将可视区域。
- 处理
CSS动画。 当页面不存在CSS动画时，该线程被利用的时间很少。
统计汇总区域
- Summary：以扇形图的形式统计各个事件占用的时间。
- Bottom-Up、Call Tree和Event Log：这三个面板可以查看每个事件的时间信息，调用顺序和日志等内容。
Network
网络资源请求是构成一个网站的重要组成成分，Network 作为 DevTools 另一个重要的面板，可以帮助我们从网络资源请求的角度，分析页面的性能。
从面板中我们可以详细的每个请求的信息：
-
请求的名称（Name），点击Name 还可以查看具体的请求信息和响应信息。
-
请求的状态（status）：如果请求的状态异常（4XX 或 5XX），则表示资源加载异常，可能影响页面渲染。
-
资源的类型（Type）。
-
发送请求的对象（initiator）。
-
资源的大小（Size）：如果是直接从缓存里获取的资源，还可以看出是从哪种类型的缓存获取的资源（memory cache 和 disk cache）。
-
耗时（time）：从连接开始，到最终内容下载完成经过的时间。
-
瀑布图（waterfall）：鼠标移动上去可以看到这个请求的时间线。
