浏览器解析html文件过程

1. 浏览器将取到的html代码解析成dom树
2. 每个tag都是dom树中的一个节点
3. 根结点是document对象
4. 浏览器把所有样式解析成样式结构体，解析过程中会去掉浏览器不能识别的样式
5. DOM tree和样式结构体组合构建render tree
6. render tree不包含隐藏的节点
7. visibility:hidden;会影响布局(layout)，会占有空间
8. 浏览器根据构建好的render tree来绘制页面

回流(reflow)

当render tree中的一部分(或全部)，因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，这就是回流(reflow)

重绘(repaints)

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不影响布局(例如：background-color)，则称为重绘(repaints)

tips:回流必将引起重绘，重绘不一定引起回流,回流比重绘的代价更高;

参考：

https://www.jianshu.com/p/01b9457f44d6