流程：解析html以及构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
概念：1.构建DOM树： 渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树
2.构建渲染树： 解析对应的css样式文件信息（包括js生成的样式和外部的css）
3.布局渲染树：从根节点递归调用，计算每一个元素的大小，位置等。给出每个节点所在的屏幕的精准位置
4.绘制渲染树：遍历渲染树，使用UI后端层来绘制每一个节点
重绘：当盒子的位置、大小以及其他属性，例如颜色、字体大小等到确定下来之后，浏览器便把这些颜色都按照各自的特性绘制一遍，将内容呈现在页面上
触发重绘的条件：改变元素外观属性。如：color，background-color等
重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观
注意：table及其内部元素需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多发时间，要尽量避免使用table布局
重排（重构/回流/reflow）： 当渲染书中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就是回流。
每个页面都需要一次回流，就是页面第一次渲染的时候
重排一定会影响重绘，但是重绘不一定会影响重排
