说明
浏览器工作原理与实践专栏学习笔记
什么是 Web 性能?
Web performance：https://en.wikipedia.org/wiki/Web_performance
Web 性能描述了 Web 应用在浏览器上的加载和显示的速度。
性能检测工具：Performance vs Audits
Performance 和 Audits，它们能够准确统计页面在加载阶段和运行阶段的一些核心数据，诸如任务执行记录、首屏展示花费的时长等，有了这些数据我们就能很容易定位到 Web 应用的性能瓶颈 。
Performance
非常强大，它提供了非常多的运行时数据，利用这些数据我们就可以分析出来 Web 应用的瓶颈。学会起来非常有难度，因为涉及到了特别多的概念，而这些概念又和浏览器的系统架构、消息循环机制、渲染流水线等知识紧密联系在了一起。
Audtis (Lighthouse)
简单许多，它将检测到的细节数据隐藏在背后，只提供给一些直观的性能数据，同时，还会提供一些优化建议。
总的来说：Perfomance 能让我们看到更多细节数据，但是更加复杂，Audits 就比较智能，但是隐藏了更多细节。
检测之前准备工作
配置好工作环境：
首先准备 Chrome Canary 版的浏览器（稳定版的 Chrome 也行）
Chrome Canary 是采用最新技术构建的，它的开发者工具和浏览器特性都是最新的
然后需要在 Chrome 的隐身模式下工作，这样可以确保我们安装的扩展、浏览器缓存、Cookie 等数据不会影响到检测结果。
下载：Google Chrome
安装好就是金色的图标
利用 Audits（Lighthouse ）生成 Web 性能报告
打开 B站 为例
首先打开浏览器的隐身窗口
然后在隐身窗口中输入 B 站的网站。
打开 Chrome 的开发者工具，选择 Audits 标签。
这里说明一下：chrome v83.0.4103.61 的 Audits 升级成 Lighthouse 了。
所以看不到 Audits 标签的，直接看 Lighthouse 标签就行。
Audits（Lighthouse ） 界面
Audits 界面
升级后的 Lighthouse 界面
监测类型 (Categories)：指需要监控哪些内容
监测并分析 Web 性能 (Performance)；
监测并分析 PWA(Progressive Web App) 程序的性能；
监测并分析 Web 应用是否采用了最佳实践策略 (Best practices)；
监测并分析是否实施了无障碍功能 (Accessibility)，无障碍功能让一些身体有障碍的人可以方便地浏览你的 Web 应用。
监测并分析 Web 应用是否采实施了 SEO 搜素引擎优化 (SEO)。
设备类型 (Device)
Moblie：选项是用来模拟移动设备环境的
Desktop：选项是用来模拟桌面环境的
开始生成报告
配置好选项之后，点击生成报告 (Generate report) 按钮来生成报告
报告生成中
报告生成完毕
解读性能报告
分数的范围：
1.性能指标 (Metrics)
点击 view original trace 按钮会进入：
点击 view treemap 按钮会进入：
2.可优化项 (Opportunities)
页面中的一些可以直接优化的部分:
3.手动诊断 (Diagnostics)
采集了一些可能存在性能问题的指标，这些指标可能会影响到页面的加载性能，需要依据实际情况，来手动排查每一项。
4.运行时设置 (Runtime Settings)
有运行时的一些基本数据，如果选择移动设备模式，可以看到发送网络请求时的 User Agent 会变成设备相关信息，还有会模拟设备的网速，这个体现在网络限速上。
