浅谈浏览器的渲染过程，重绘与回流~

浏览器的渲染过程

首先，咱们先来了解一下浏览器的渲染过程是什么样的，也就是说浏览器把一堆代码呈现到页面上的过程是什么样子的，根据下图，咱们能够总结出浏览器的渲染步骤为：

步骤：

1.解析HTML代码，生成DOM树(DOM Tree)；解析CSS代码，生成CSSOM树(CSS Tree)；

2.将DOM树和CSSOM树进行结合从而构建起渲染树(Render Tree)；

Render Tree相似于DOM Tree，但存在很大的区别：Render Tree可以识别样式，Render Tree中的每一个节点都有本身的样式，并且Render Tree不包含隐藏的节点，好比display:none的节点，由于这些节点不会用于页面呈现。

3.回流(Layout)，根据生成的Render Tree，进行Layout，获得节点的位置、大小；

4.重绘(Painting)，根据Render Tree以及回流获得的位置信息，肯定各节点的绝对位置，获得各节点的绝对像素；

5.呈现(Display)，将像素发送给GPU，展现到页面上。

————分割线————
在步骤2中，渲染树(Render Tree)是若是构建的呢？

如上图所示，总结出的构建步骤为：

1.从DOM树的根节点开始遍历每一个可见节点；

遍历的是每一个可见节点，那么不可见的节点包括：
(a)一些不会渲染输出的节点，好比script、meta、link等；
(b)一些经过css进行隐藏的节点。好比display:none。注意，利用visibility和opacity隐藏的节点，仍是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。

2.对于每一个可见的节点，找到CSSOM树中对应的规则，并应用它们；

3.根据每一个可见节点以及其对应的样式，组合生成渲染树。

又是怎么组合的呢？
简单是就是一个匹配的过程，要将每一个HTML元素节点与之正确的样式相匹配。由于节点位置属性将经过CSS选择器链的优先级来决定，渲染树中的某个结点可能会同时知足多个选择器链，这时候就要经过选择器的优先级来完成属性的赋值。
这时候，将渲染结点同时知足的几个选择器链经过其优先级加权算值，从小到大依次覆盖渲染结点；而如何肯定此渲染结点是否知足某个选择器链呢？这也是一个逐层判断的过程：今后渲染结点开始，判断此结点是否与选择器链表的当前选择器相匹配。若是匹配，判断此选择器与下一个选择器的关系：若是为NONE，表示本选择器是选择器链的最后一个，返回成功；若是关系为AND (好比：#id.class)，选择下一个选择器与本渲染结点继续比较；若是关系为CHILD，表示本选择器是下一个选择器的子结点，返回下一个选择器与下一个渲染结点的匹配结果；不然，关系为DESCENDANT，选择器和渲染结点各指向下一个结点，而后将渲染结点继续回溯，直到第一个知足回溯后的选择器的结点，此时将继续判断回溯后的选择器和回溯后的渲染结点是否匹配。
————分割线————

重绘

什么是重绘呢？当Render Tree中的一些元素须要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的，好比改变背景颜色等，这就会引发浏览器重绘(Painting)。
例如：
某网站首页页面中，将蓝色框内导航栏的背景颜色变为粉色，其余的不变，并无改变总体布局和各个部分的位置，因此此时会引发重绘，不会引发回流。

回流

当Render Tree中的部分节点由于元素的尺寸、布局、隐藏等改变而须要从新构建，这就会引发浏览器回流(reflow)。每一个页面至少须要一次回流，就是在页面第一次加载的时候(浏览器渲染过程步骤3)，由于要第一次构建Render Tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并从新构造这部分渲染树，完成回流后，浏览器会从新绘制受影响的部分到屏幕中，即重绘。
例如：
某网站首页页面中，将蓝色框内导航栏直接删掉，则下面的全部部分会进行上移，总体的布局发生了变化，因此此时会引发回流，接着进行重绘。
【在这里引出了回流与重绘的一个最大的区别：
回流必定会引发重绘，重绘不必定会引发回流 】
什么时候会触发回流重绘呢？
(a)添加或删除可见的DOM元素;
(b)元素的位置发生变化;
(c)元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）;
(d)内容发生变化，好比文本变化或图片被另外一个不一样尺寸的图片所替代;
(e)页面一开始渲染的时候（这确定避免不了）;
(f)浏览器的窗口尺寸变化（由于回流是根据视口的大小来计算元素的位置和大小的）......

【做者水平有限，欢迎你们在评论区交流指正~】