了解基本的浏览器渲染

目录

1.浏览器的内核

2.常见的浏览器内核

3.页面的加载过程    

4.浏览器渲染过程 

5. 将HTML 文件转换为 DOM 树的步骤

6. 生成节点对象并构建DOM

7.构建CSSOM

8.构建渲染树

9.布局与绘制

10.回流

11.重绘

---

1.浏览器的内核

渲染引擎、JS引擎

2.常见的浏览器内核

Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）

3.页面的加载过程    

1.向浏览器输入网址

2.浏览器根据 DNS 服务器得到域名的 IP 地址

3.向这个 IP 的机器发送 HTTP 请求

4.服务器收到、处理并返回 HTTP 请求

5.浏览器接收到服务器返回的内容

4.浏览器渲染过程 

解析HTML

生成DOM树

解析CSS

生成CSSOM树

将DOM树和CSSOM树结合，生成渲染树(Render Tree)

Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信 息（位置，大小）

Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像 素

Display: 将像素发送给GPU，最后通过调用操作系统Native GUI的API绘 制，展示在页面上。

        

5. 将HTML 文件转换为 DOM 树的步骤

字节数据——字符串——Token——Node——DOM

6. 生成节点对象并构建DOM

        构建DOM的过程中，不是等所有Token都转换完成后再去生成节点对象，而是一边生成Token一边消耗Token来生成节点对象。换句话说，每个Token被生成后，会立刻消耗这个Token创建出节点对象。注意：带有结束标签标识的Token不会创建节点对象。

7.构建CSSOM

DOM会捕获页面的内容，但浏览器还需要知道页面如何展示，所以需要构建CSSOM。

8.构建渲染树

        注意：渲染树只包含可见的节点。 如果某个节点是 display: none 的，那么就不会在渲染树中显示。

        渲染过程中，如果遇到<script>就停止渲染，执行 JS 代码。因为浏览器有GUI渲染线程与JS引擎线程，为了防止渲染出现不可预期的结果，这两个线程是互斥的关系。

        如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件，这也是都建议将 script 标签放在 body 标签底部的原因。当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer(延迟) 或者 async(异步) 属性。

        原本DOM和CSSOM的构建是互不影响，井水不犯河水，但是一旦引入JavaScript，CSSOM也开始阻塞DOM的构建，只有CSSOM构建完毕后，DOM再恢复DOM构建。 这是因为JavaScript不只是可以改DOM，它还可以更改样式，也就是它可以更改CSSOM。因为不完整的CSSOM是无法使用的，如果JavaScript想访问CSSOM并更改它，那么在执行JavaScript时，必须要能拿到完整的CSSOM。所以就导致了一个现象，如果浏览器尚未完成CSSOM的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟脚本执行和DOM构建，直至其完成CSSOM的下载和构建。也就是说，在这种情况下，浏览器会先下载和构建CSSOM，然后再执行JavaScript，最后在继续构建DOM。

9.布局与绘制

        当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。布局流程的输出是一个“盒模型”，它会精确地捕获每个元素在视口内的确切位置和尺寸，所有相对测量值都将转换为屏幕上的绝对像素。布局完成后，浏览器会立即发出“Paint Setup”和“Paint”事件，将渲染树转换成屏幕上的像素。

10.回流

        前面我们通过构造渲染树，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。为了弄清每个对象在网站上的确切大小和位置，浏览器从渲染树的根节点开始遍历。

 

11.重绘

        我们通过构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点。