发送&接收信息

浏览器会从你的硬盘(或网络)中读取 HTML 的原始字节,浏览器接收字节数据后会经过重重转换翻译为浏览器可以识别的代码

在渲染的过程中,HTML总是第一个开始进行数据的转换的

从HTML的原始字节到DOM(Document Object Model)

  1. 第一步:将原始数据字节转换为字符 Bytes=>Characters
  2. 第二步:将字符转换为标记(token) Characters=>Tokens (标记化)
  3. 第三部:将标记转换为节点(node) Tokens=>Node
  4. 第四部:这些节点将被链接到称为 DOM 的树数据结构中。DOM 建立起了父子关系、相邻兄弟关系等。在这个 DOM 对象中,每个节点之间都建立了关系。现在,这是我们可以使用的东西了
  • 综合来说 Bytes=>Characters=>Tokens=>Node=>DOM


从CSS的原始字节到CSSOM(Css Object Model)

Css的转换和我们的HTML一样都要经过4步从原始数据到cssom

  • Bytes=>Characters=>Tokens=>Node=>CSSOM


渲染树

DOM 和 CSSOM 树结构是两个独立的树结构。DOM 中包含关于页面 HTML 元素关系的所有信息,而 CSSOM 则包含关于元素样式的信息

  • DOM + CSSOM = 渲染树


布局

浏览器在拿到渲染树后,会计算页面上每个对象的确切大小和位置.这个布局阶段被称为回流


绘制

当确定好每个元素在屏幕上的位置和大小后,剩下就是将元素“绘制”到屏幕上

综合:得到DOM和CSSOM => 渲染树 => 布局 => 绘制


重绘和回流

  • 重绘是当节点需要更改外观而不会影响布局的,比如改变 color 就叫称为重绘
  • 回流是布局或者几何属性需要改变就称为回流。

回流必定会发生重绘,重绘不一定会引发回流。回流所需的成本比重绘高的多,改变父节点里的子节点很可能会导致父节点的一系列回流。

以下几个动作可能会导致性能问题:

  • 改变 window 大小
  • 改变字体
  • 添加或删除样式
  • 文字改变
  • 定位或者浮动
  • 盒模型


减少重绘和回流

  • 使用 transform 替代 top
  • 使用 visibility 替换 display: none ,因为前者只会引起重绘,后者会引发回流(改变了布局)
  • 不要把节点的属性值放在一个循环里当成循环里的变量
  • 不要使用 table 布局,可能很小的一个小改动会造成整个 table 的重新布局
  • 动画实现的速度的选择,动画速度越快,回流次数越多,也可以选择使用 requestAnimationFrame
  • CSS 选择符从右往左匹配查找,避免节点层级过多
  • 将频繁重绘或者回流的节点设置为图层,图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说,浏览器会自动将该节点变为图层。设置节点为图层的方式有很多,我们可以通过以下几个常用属性可以生成新图层:will-change、video、iframe 标签