浏览器渲染原理
浏览器渲染分为五个阶段。
第一阶段：HTML解析 --> DOM树
浏览器不能够直接理解 HTML文档，首先对其进行解析，并在解析过程中发出页面渲染所需的各种外部资源请求生成DOM树。
第二阶段： CSS解析 --> CSSOM树
同样浏览器也办法直接理解 CSS 代码，需要将识别并加载的CSS 代码处理成自己理解的 CSSOM 树。
第三阶段： 样式与结构合并 --> 渲染树
浏览器将DOM 树和 CSSOM 树结合在一起生成渲染树（:after :before 等伪元素会在这个环节被构建到 DOM 树中）。
渲染树特点：只包含渲染网页所需的节点。
构建渲染树的过程
- 第一步：从 DOM 树的根节点开始遍历，筛选出所有可见的节点；
- 第二步：对可见节点为其匹配 CSSOM树；
第四阶段： 页面布局 --> 布局渲染树
浏览器对渲染树进行遍历，将元素间嵌套关系以盒子模型的形式写入文档流盒模型，并在布局过程中会计算出元素确切的大小和定位。计算完毕后，将相应的信息写回渲染树上形成“布局渲染树”。
第五阶段： 页面绘制 --> 显示页面
在这一阶段浏览器终于拿到了绘制页面的所有信息，将渲染树上的每一个节点转换成肉眼可见的像素点，最终将页面呈现在我们面前。
重排
当我们修改DOM节点的宽、高或进行隐藏操作时，浏览器就需要重新计算节点的几何属性，然后再将计算的结果绘制出来的过程叫做重排（也叫回流）。
浏览器重排过程
触发重排的条件
- 改变 DOM 树的结构：节点的增减、移动等
- 获取一些需要通过"即时计算"得到值的属性：offsetWidth、offsetHeight、offsetTop、offsetLeft、 scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 等属性以及调用 getComputedStyle 方法，或者 IE 的 currentStyle 方法。
重绘
当我们修改DOM的样式（未影响其几何属性）时，浏览器需要重新为元素绘制新的样式过程叫做重绘。
浏览器重绘过程
触发重绘的条件
修改DOM的样式，但未影响其几何属性会发生重绘。
优化
重排和重绘是比较消耗性能的，因此在开发过程中，我们应该避免重排和减少重绘。
本文到此结束
如果大家还有什么其他想法，欢迎在评论区交流！