浅谈浏览器中渲染引擎干的那些事儿-五八三

前言

上文我们了解到浏览器内核其实是有渲染引擎和JS引擎构成，那么渲染引擎都干了哪些事情呢？以Google浏览器为例，当我们打开浏览器，输入相应的URL后，浏览器中的网络进程完成对网络资源的加载。资源加载完成后，渲染引擎开始工作。我们知道，一个网页是由结构（HTML），表现（CSS），行为（JS）来组成，暂且抛开行为不谈，那么渲染引擎又是怎么处理HTML和CSS的呢？

demo

我们先看一个demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .text1 {
        width: 100px;
        height: 100px;
        color: red;
      }
      .text2 {
        width: 100px;
        height: 100px;
        border: 1px solid black;
      }
    </style>
</head>
<body>
  <p class="text1">text1</p>
  <script>
    debugger
  </script>
  <p class="text2">text2</p>
</body>
</html>

结合上述代码及渲染结果，我们了解到，浏览器的渲染引擎并不会像我们想的那样先解析所有的HTML，然后是CSS（曾几何时我一度认为先是对所有HTML进行DOM的构建，然后才是对CSS的处理，给自己个弱爆??）。实际上他们是渐进式的，即为了提高用户体验，浏览器渲染引擎为了尽可能快的把结果显示给最终用户，它不会等到所有HTML都被解析完才创建并布局渲染树。它会在从网络层获取文档内容的同时把已经接收到的局部内容先展示出来。

正文

浏览器渲染引擎工作的流程主要分为以下几个步骤：

1. 解析HTML文档，构建DOM树

渲染引擎使用HTML解析器（调用XML解析器）解析HTML文档，将各个HTML元素逐个转化成DOM节点，从而生成DOM树。DOM树表示网页的内容结构，它是由多个节点组成，一个节点就代表一个HTML元素。所谓的树，只有一个根节点，DOM树的根节点就是document。

2. 解析CSS构建CSSOM（CSS Object Model）树

通过CSS解析器解析CSS，并将其转化为CSS对象，将这些CSS对象组装起来，构建CSSOM树。

3. DOM与CSSOM树结合构建渲染树

DOM 树和 CSSOM 树都构建完成以后，浏览器会根据这两棵树构建出一棵渲染树。

4. 布局（Layout）

渲染树构建完毕之后，元素的位置关系以及需要应用的样式就确定了，使用布局来计算每个节点的几何体。即确定呈现树中所有节点的宽度、高度和位置，以及页面上每个对象的大小和位置。
其中，回流（重排）即发生在布局的过程中，第一次确定节点的大小和位置称为布局。随后对节点大小和位置的重新计算称为回流。例如：当初始布局后，有新的DOM由于定位或者宽高发生变化，导致需要重新计算DOM所在的位置。然后在进行绘制，那么重排必定会引起重绘。