摘要：极客时间《浏览器工作原理与实践》 浏览器中 Lighthose 与 Performance 学习笔记
Lighthouse（Audtis）
Chrome 的 Lighthouse 面板会展示一些直观的性能数据，同时还会提供一些优化建议。检测网站之前要先切换到隐身模式，这样可以屏蔽掉安装的扩展、浏览器缓存、Cookie 等数据的影响。配置模块有两部分：监测类型（Categories）和设备类型（Device）。
监控类型是指需要监控的内容：
1、Performance，监控分析 Performance
2、Progressive Web App，监控分析 PWA
3、Best practices，检测分析是否使用了最佳实践策略
4、Accessibility，检测分析是否实施了无障碍功能
5、SEO，检测分析是否实施了 SEO 搜素引擎优化
设备类型是指以哪种设备来检测，有 Mobile（移动端）和 Desktop（桌面）两种可选。
点击 Generate report 按钮来生成报告，每个监控类型的报告包含性能指标（Metrics）、可优化项（Opportunities）和手动诊断 （Diagnostics），报告的最后部分是运行时设置（Runtime Settings）。Metrics 可以查看从 Web 应用的加载到页面展示完成的这段时间中，各个阶段所消耗的时长和对应 Performance 的信息。Opportunities 可以根据这里面的提示来优化网站。Diagnostics 展示一些可能存在性能问题的指标，可以根据实际情况手动排查。Runtime Settings 可以查看到检测时的一些基础设置信息。
提高性能指标的分数可以快速优化 Web 应用。面板上显示的性能指标有六项：
1、First Contentful Paint (FCP)
2、Speed Index (SI)
3、Largest Contentful Paint (LCP)
4、Time to Interactive (TTI)
5、Total Blocking Time (TBT)
6、Cumulative Layout Shift (CLS)
还有些其他一些指标，具体可以查看Metrics、Chrome Performance常见名词解释(FP, FCP, LCP, DCL, FMP, TTI, TBT, FID, CLS)
Performance
使用 Performance 需要分三步走：
1、配置 Performance
2、生成报告页
3、人工分析报告页，并找出页面的性能瓶颈
配置 Performance
区域 1 可以模拟网络加载速度和 CPU 的运算速度。区域 2 第一个按钮用来开启记录交互阶段性能数据（需要手动暂停），第二个按钮用来记录加载阶段的性能数据，第三个按钮用来停止录制。
报告页
录制完后会生成报告页，报告页分为三部分：概览面板、性能指标面板和详情面板。概览面板和性能指标面板都依赖于时间线，会按照时间顺序来记录、展示这些性能数据。
1、概览面板
在概览面板中，有几个关键指标，诸如页面帧速 (FPS)、CPU 资源消耗、网络请求流量、V8 内存使用量 (堆内存) 等，会按照时间顺序做成图表的形式展现出来。
可以由图表快速定位问题：
1）如果 FPS 图表上出现了红色块，那么就表示红色块附近渲染出一帧所需时间过久，也许会卡顿
2）如果 CPU 图形占用面积太大，表示 CPU 使用率就越高，也许会影响其他任务的执行
3）如果 V8 的内存使用量一直在增加，就有可能是某种原因导致了内存泄漏
还会有竖线展示 FP、LCP、DOMContentLoaded、Onload 等事件产生的时间点
2、性能面板
性能面板中，记录了非常多的性能指标项，比如 Main 指标记录渲染主线程的任务执行过程，Compositor 指标记录了合成线程的任务执行过程，GPU 指标记录了 GPU 进程主线程的任务执行过程。过概览面板来定位问题的时间节点，然后再使用性能面板分析该时间节点内的性能数据。
3、解读性能面板的各项指标
性能面板就是展示特定时间段内的多种性能指标数据，它从上到下有很多性能指标，其中有和渲染进程和 GPU 进程的任务记录相关的指标：
1）先看最重要的 Main 指标，它记录了渲染进程的主线程的任务执行记录。它的每一段横条都代表一个任务，竖向代表该任务的执行记录。
2）Compositor 指标，也就是合成线程的任务执行记录
3）Raster 指标和 GPU 指标，光栅化线程池 (Raster) 和 GPU 进程中的任务执行也会影响到页面的性能，点开 Raster 项就可以看到它维护的多个线程
4）Chrome_ChildIOThread 指标，它对应的就是 IO 线程的任务记录
还有其他一些比较重要的性能指标：
1）Network 指标，记录每个网络请求所消耗的时长
2）Timings 指标，记录一些关键的时间节点在何时产生的数据信息
3）Frames 指标，浏览器生成每帧的记录
4）Interactions 指标，记录了用户交互操作
4、详情面板
通过在性能面板中选中性能指标中的任何历史数据，详情面板中就会展现选中记录的细节信息
Main 指标
Main 指标中每个灰色横条就对应了一个任务，灰色长条的长度对应了任务的执行时长。灰线下面的横条就是执行任务的关键细节过程，同样这些横条的长度就代表这些过程执行的时长。
页面加载过程主要分为三个阶段：
1、导航阶段，该阶段主要是从网络进程接收 HTML 响应头和 HTML 响应体；
2、解析 HTML 数据阶段，该阶段主要是将接收到的 HTML 数据转换为 DOM 和 CSSOM；
3、生成位图阶段，该阶段主要是利用 DOM 和 CSSOM，经过计算布局、生成层树 (LayerTree)、生成绘制列表 (Paint)、完成合成等操作，生成最终的图片
具体过程：
1、导航阶段
1）该任务的第一个子过程就是 Send request，该过程表示网络请求已被发送。然后该任务进入了等待状态。
2）由网络进程负责下载资源，当接收到响应头的时候，该任务便执行 Receive Respone 过程，该过程表示接收到 HTTP 的响应头了。
3）接着执行 DOM 事件：pagehide、visibilitychange 和 unload 等事件，如果页面中注册了这些事件的回调函数，那么这些回调函数会依次在该任务中被调用。
4）后面开始接收 HTML 数据的 Recive Data 过程，Recive Data 过程表示请求的数据已被接收，如果 HTML 数据过多，会有多个 Recive Data 过程。
所有数据都接收完后，渲染进程会触发另一个任务，主要执行 Finish load 过程，表示网络请求已经完成。
2、解析 HTML 数据阶段
解析 HTML 数据阶段，最主要的过程就是 HTMLParser，主要是解析收到的 HTML 数据
1）如果遇到 script 标签，就开始执行脚本过程 Evalute Script。
2）执行脚本需要先编译脚本，即 Complie Script 过程。脚本编译好后，就进入程序执行过程。执行全局代码时，V8 会先构造一个 anonymous 过程，之后就是执行具体的代码，如果脚本中修改了 DOM，那么还会执行 ParserHTML 过程生成的新的 DOM。
3）DOM 生成完成之后，会触发 readyStateChanged、DOMContentLoaded 等事件。
4）继续计算样式表生成 CSSOM，即 Reculate Style 过程。
3、生成位图阶段
1）生成 DOM 和 CSSOM 之后，渲染主线程会先执行 readyStateChange、load、pageshow 这些 DOM 事件。
2）之后开始执行布局 Layout 过程
3）然后是更新层树 (LayerTree) 的 Update LayerTree 过程
4）接着是为层树中的每一层准备绘制列表的 Paint 过程，主线程上的任务到此处就完成了
5）再之后是合成线程利用绘制列表来生成相应图层位图的 Composite Layers 过程
合成线程执行任务的过程可以配合 Composite、Raster 和 GPU 这三个指标来分析，合成线程执行过程：
1）主线程将绘制列表等信息提交给合成线程，合成线程的执行记录通过 Compositor 指标可以查看到
2）合成线程维护了一个 Raster 线程池，线程池中的每个线程称为 Rasterize，对应的光栅化任务就是 Rasterize Paint。
3）光栅化操作是在 GPU 进程中执行的，因此 Rasterize 线程需要和 GPU 线程保持通信
4）然后 GPU 生成图像，这些图层被提交给浏览器进程后，浏览器进程将其合成并最终显示在页面上