【001】浏览器渲染过程/重绘与回流

前言

大前端知识点查漏补缺，一天更新三个知识点。今天的主题重绘与回流，之前简单的了解过但是用的少没复习就忘得快，自己复习一遍希望也给你带来一些思考与收获。

浏览器的渲染过程

重新认识了浏览器的渲染过程不仅仅是dom树和css样式树合成的渲染树。看看下面这张图。

渲染的过程有以下几步：
1.解析html生成dom树（从根节点开始遍历可见结点）
2.解析css生成style树
3.dom树和style树合并为render树
4.渲染树进行回流得到结点的几何信息（layout）
5.通过经过回流后的渲染树重绘得到结点的绝对像素（painting）
6.将像素发给GPU展示到页面上（display）
关于这几步每一步都可以细化，这里不细说，可以看这篇文章你不知道的浏览器页面渲染机制

回流与重绘是什么

• 回流就是将render树中得到结点在视口内的几何信息位置大小。当树中部分或者全部结点的规模尺寸、布局、隐藏等改变时需要重新构建render树。第一次构建好render树后必然会回流。
• 重绘是得到结点的构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(