乐趣区

关于前端:知识订正浏览器是如何渲染页面的

jiezi

一. 浏览器是如何渲染页面的？

  当浏览器的网络线程收到 HTML 文档后，会产生一个渲染工作，并将其传递给渲染主线程的音讯队列。在事件循环机制的作用下，渲染主线程取出音讯队列中的渲染工作，开启渲染流程。

  整个渲染流程分为多个阶段，别离是：HTML 解析（Parse HTML）、款式计算（Computed Style）、布局（Layout）、分层（Layer）、绘制（Paint）、分块（Tiling）、光栅化（Raster）、画（Draw）。

  每个阶段都有明确的输入输出，上一个阶段的输入会成为下一个阶段的输出。这样，整个渲染流程就造成了一套组织紧密的生产流水线。

1.HTML 解析（Parse HTML）

  浏览器解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。为了进步解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的内部 CSS 文件和 内部的 JS 文件。
  如果主线程解析到 link 地位，此时内部的 CSS 文件还没有下载解析好，主线程不会期待，持续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的。这就是 CSS 不会阻塞 HTML 解析的根本原因。为了提⾼解析效率，浏览器会启动⼀个预解析器率先下载和解析 CSS，如下图：

  如果主线程解析到 script 地位，会进行解析 HTML，转而期待 JS 文件下载好，并将全局代码解析执行实现后，能力持续解析 HTML。这 是因为 JS 代码的执行过程可能会批改以后的 DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阻塞 HTML 解析的根本原因。如下图：

  第一步实现后，会失去 DOM 树和 CSSOM 树，浏览器的默认款式、外部款式、内部款式、行内款式均会蕴含在 CSSOM 树中。

2. 款式计算（Computed Style）

  主线程会遍历失去的 DOM 树，顺次为树中的每个节点计算出它最终的款式，称之为 Computed Style。
  在这一过程中，很多预设值会变成绝对值，比方 red 会变成 rgb(255,0,0)；绝对单位会变成相对单位，比方em 会变成px。这一步实现后，会失去一棵带有款式的 DOM 树。

3. 布局（Layout）

  布局阶段会顺次遍历 DOM 树的每一个节点，计算每个节点的几何信息。例如节点的宽高、绝对蕴含块的地位。大部分时候，DOM 树和布局树并非一一对应。

  比方 display:none 的节点没有几何信息，因而不会生成到布局树；又比方应用了伪元素选择器，尽管 DOM 树中不存在这些伪元素节点，但它们领有几何信息，所以会生成到布局树中。还有匿名行盒、匿名块盒等等都会导致 DOM 树和布局树无奈一一对应。这里各个元素的地位是绝对于 蕴含块 的地位。
蕴含块：
  英语全称为 containing block，就是元素的尺寸和地位，会受它的蕴含块所影响。对于一些属性，例如 width, height, padding, margin，相对定位元素的偏移值（比方 position 被设置为 absolute 或 fixed），当咱们对其赋予百分比值时，这些值的计算值，就是通过元素的蕴含块计算得来。
蕴含块分为三种：
  1. 一种是根元素（HTML 元素）所在的蕴含块，被称之为初始蕴含块（initial containing block）。对于浏览器而言，初始蕴含块的的大小等于视口 viewport 的大小，基点在画布的原点（视口左上角）。它是作为元素相对定位和固定定位的参照物。
  2. 另外一种是对于非根元素，对于非根元素的蕴含块断定就有几种不同的状况了。大抵能够分为如下几种：

  • 如果元素的 positiion 是 relative 或 static，那么蕴含块由离它最近的块容器（block container）的内容区域（content area）的边缘建设。
  • 如果 position 属性是 fixed，那么蕴含块由视口建设。
  • 如果元素应用了 absolute 定位，则蕴含块由它的最近的 position 的值不是 static（也就是值为fixed、absolute、relative 或 sticky）的先人元素的内边距区的边缘组成。

  3. 如果 position 属性是 absolute 或 fixed，蕴含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：

  • transform 或 perspective 的值不是 none
  • will-change 的值是 transform 或 perspective
  • filter 的值不是 none 或 will-change 的值是 filter (只在 Firefox 下失效).
  • contain 的值是 paint (例如: contain: paint;)

例子：

<body>
    <div class="container">
      <div class="item">
        <div class="item2"></div>
      </div>
    </div>
  </body>
.container {
  width: 500px;
  height: 300px;
  background-color: skyblue;
  position: relative;
}
.item {
  width: 300px;
  height: 150px;
  border: 5px solid;
  margin-left: 100px;
}
.item2 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 10px;
  top: 10px;
}

其后果如下：

  其实起因也非常简单，依据下面的第三条规定，对于 div.item2 来讲，它的蕴含块应该是 div.container，而非 div.item。

4. 分层（Layer）

  主线程会应用一套简单的策略对整个布局树中进行分层。分层的益处在于，未来某一个层扭转后，仅会对该层进行后续解决，从而晋升效率。滚动条、重叠上下文、transform、opacity 等款式都会或多或少的影响分层后果，也能够通过 will-change 属性更大程度的影响分层后果。

5. 绘制（Paint）

  主线程会为每个层独自产生绘制指令集，用于形容这一层的内容该如何画进去。

  渲染主线程的⼯作到此为⽌，残余步骤交给其余线程实现，如下图：

6. 分块（Tiling）

  实现绘制后，主线程将每个图层的绘制信息提交给合成线程，残余工作将由合成线程实现。合成线程首先对每个图层进行分块，将其划分为更多的小区域。它会从线程池中拿取多个线程来实现分块工作。

7. 光栅化（Raster）

  光栅化是将每个块变成位图，此过程会⽤到 GPU 减速，会开启多个线程来实现光栅化，并优先解决凑近视⼝的块。

8. 画（Draw）

  合成线程拿到每个层、每个块的位图后，生成一个个「指引（quad）」信息。指引会标识出每个位图应该画到屏幕的哪个地位，以及会思考到旋转、缩放等变形。变形产生在合成线程，与渲染主线程无关，这就是 transform 效率高的实质起因。合成线程会把 quad 提交给 GPU 过程，由 GPU 过程产生零碎调用，提交给 GPU 硬件，实现最终的屏幕成像。

整一个渲染过程如下图：

二. 面试题：

1. 什么是 reflow（重排 / 回流）？

答：
  reflow 的实质就是从新计算 layout 树，如元素地位，大小等扭转。
  ⑴当进行了会影响布局树的操作后，须要从新计算布局树，会引发 layout。
  ⑵为了防止间断的屡次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全副实现后再进行对立计算。所以，改变属性造成的 reflow 是异步实现的。也同样因为如此，当 JS 获取布局属性时，就可能造成无奈获取到最新的布局信息。
  ⑶浏览器在重复衡量下，最终决定获取属性立刻 reflow。

2. 什么是 repaint（重绘）？

答：
  repaint 的实质就是从新依据分层信息计算了绘制指令，如元素色彩，背景色等扭转。
  ⑴当改变了可见款式后，就须要从新计算，会引发 repaint。
  ⑵因为元素的布局信息也属于可见款式，所以 reflow（重排 / 回流）肯定会引起 repaint（重绘）。

3. 为什么 transform 的效率高？

答：
  因为 transform 既不会影响布局也不会影响绘制指令，它影响的只是渲染流程的最初一个「draw」阶段。
  因为 draw 阶段在合成线程中，所以 transform 的变动简直不会影响渲染主线程。反之，渲染主线程无论如何繁忙，也不会影响 transform 的变动。

退出移动版