【前端】chrome 意料之外的操作

自动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)