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

浏览器的渲染过程

首先，先来了解一下浏览器的渲染过程是什么样的，也就是说浏览器把一堆代码呈现到页面上的过程是什么样子的，浏览器采用的是流式布局模型(Flow Bsaed Layout)，如图1所示，可以总结出浏览器的渲染步骤为：

图1 浏览器渲染过程

步骤：

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，展示到页面上。

由于浏览器采用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但是table以及其内部元素除外，他们可能需要多次计算，通常要花三倍同等元素的时间，这也是为什么要避免使用table布局的原因。
————分割线————
在步骤2中，渲染树(Render Tree)是如果构建的呢？

图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)。重绘有一定的代价，因为浏览器会验证DOM树上其他元素的可见性。
例如：
某网站首页页面中，将蓝色框内导航栏的背景颜色变为粉色，其他的不变，并没有改变整体布局和各个部分的位置，所以此时会引起重绘，不会引起回流。

回流

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

优化

上面提到，回流重绘给浏览器性能带来了很大的影响，为了提高性能，可以采取下面的一些措施进行性能优化。

1、浏览器优化

现代浏览器大多是通过队列机制来批量更新布局，浏览器把修改操作放在一个队列里面，然后再批量执行，如果是60HZ刷新率的话，至少要16.6ms才会清空队列。但是当你获取布局信息的操作的时候，会导致队列被强制清空，触发回流重绘以确保返回正确的值，主要包括以下属性和方法：

• offsetTop、offsetLeft、offsetWidth、offsetHeight
• scrollTop、scrollLeft、scrollWidth、scrollHeight
• clientTop、clientLeft、clientWidth、clientHeight
• width height
• getComputedStyle()
• getBoundingClientRect()
  所以，上述的属性和方法要避免频繁使用，最好不用，如果要用，可以想办法把值缓存下来。

2、减少回流与重绘

CSS

• 使用 transform 代替 top ；
• 使用 visibility 代替 dispaly。因为visibility只会引起重绘，而dispaly会引起回流；
• 避免 table 布局。可能一个小小的改动会导致整个table的重新布局；
• 尽可能的在DOM树的最末端改变class；
• 避免设置多层的内联样式，CSS选择器从右向左匹配查找，避免节点层级太多；
• 将动画效果应用到position属性为absolute或者fixed的元素上，避免影响其他元素布局，这样只有重绘，同时，控制动画速度可以用requestAnimationFrame；
• 避免使用CSS表达式；
• CSS3硬件加速(GPU加速)
  ......

JS

• 避免频繁的操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性；
• 避免频繁的操作DOM；
• 避免频繁读取会引发回流重绘的属性；
• 对有复杂动画的元素使用绝对定位
  ......

【作者水平有限，欢迎大家在评论区交流指正~】