自动devtool
//快捷键中配置
--auto-open-devtools-for-tabs
显示继承样式
compute 面板中勾线show all
定位未使用的css
- 在聚焦DevTools的情况下，按Command+ Shift+ P（Mac）或 Control+ Shift+ P（Windows，Linux，Chrome OS），以打开“命令菜单”。
- 开始输入coverage并选择显示覆盖率。覆盖选项卡出现。
- 点击录制，即可。
- 页面会重新加载，“覆盖率”选项卡概述了浏览器加载的每个文件中使用了多少CSS（和JavaScript）。绿色表示使用过的CSS。红色表示未使用的CSS。
样式添加
- styles面板右上角的.cls .hover南
- styles面板中样式右下角的…
动画优化
- styles面板，→ ctrl+p
- 输入> animate
- 可进行动画重播、修改、优化
cache-control
- network面板
- ctrl+F
- 输入cache-control
资源block
- network面板，→ ctrl+p
- 输入> block
- 添加资源，重新请求页面
- 进而可以模拟网络异常
界面渲染
- CSSOM 树和 DOM 树合并成渲染树，然后用于计算每个可见元素的布局layout，并输出给绘制流程paint，将像素渲染render到屏幕上。
- 优化上述每一个步骤对实现最佳渲染性能至关重要。
- 从 DOM 树的根节点开始遍历每个可见节点,为其找到适配的 CSSOM 规则并应用它们
- 最终输出的渲染同时包含了屏幕上的所有可见内容及其样式信息
- 从渲染树的根节点开始进行遍历,计算每个对象在网页上的确切大小和位置,让设置的样式规则生效，即安排元素的几何布局
- 将几何位置转化为屏幕对应的像素数值
- 最后进行绘制
界面渲染阻止
- CSS 被视为阻塞渲染的资源。
- 基于css会转化为cssom, 一旦在页面底部，存在css。那么之前得到的渲染树，就可能变动很大，此时暂停渲染，重新生成cssom，生成渲染树，避免重复工作。
- 界面配置了css资源，一旦没有生效，会体验不好。
- js也会操作dom树，cssdom树，而不是渲染树，故会影响渲染树的生成。
- 除非将 JavaScript 显式声明为异步，否则它会阻止构建 DOM
- 媒体类型和媒体查询将一些 CSS 资源标记为不阻塞渲染
界面首屏加载优化
- 最好利用 Lighthouse( Chrome 扩展程序or NPM 模块) 发现明显的 CRP 优化机会，然后使用 Navigation Timing API 设置您的代码，以便监控应用在实际使用过程中的性能。
domLoading：这是整个过程的起始时间戳，浏览器即将开始解析第一批收到的 HTML 文档字节。
domInteractive：表示浏览器完成对所有 HTML 的解析并且 DOM 构建完成的时间点。
domContentLoaded：表示 DOM 准备就绪并且没有样式表阻止 JavaScript 执行的时间点，这意味着现在我们可以构建渲染树了。
许多 JavaScript 框架都会等待此事件发生后，才开始执行它们自己的逻辑。因此，浏览器会捕获 EventStart 和 EventEnd 时间戳，让我们能够追踪执行所花费的时间。
domComplete：顾名思义，所有处理完成，并且网页上的所有资源（图像等）都已下载完毕，也就是说，加载转环已停止旋转。
loadEvent：作为每个网页加载的最后一步，浏览器会触发 onload 事件，以便触发额外的应用逻辑。 - 优化从缓存或从网络获取资源所需的时间
参考文献：
本文作者：前端首席体验师(CheongHu)