浏览器的渲染机制

1. 构建DOM树：渲染引擎解析HTML文档，将标签转换成DOM树中的DOMnode生成DOM Tree。
2. 构建渲染树：解析对应的css文件，构建Rending Tree。
3. 布局渲染树：从根节点递归调用，计算每一个元素的大小、位置等，给出每一个元素的精准坐标。
4. 绘制渲染树：绘制页面像素信息。
5. 合成：浏览器讲上述信息发送给GPU，合成页面展示。

重绘（repaint/redraw)

重绘是指一个元素外观的改变触发的浏览器行为，浏览器会根据元素的新属性进行重新绘制，是元素呈现新的外观。

触发条件：改变外观属性，如color，background-color等

回流/重排(reflow)

重排是指当渲染树中一个或所有元素的尺寸、布局或展示隐藏等发生变化时，需要重新构建渲染树，即回流。

触发条件：页面初始化、添加删除元素、元素尺寸位置变化、浏览器窗口变化等等

两者关系

回流必会引起重绘，但重绘不一定回流。都会耗时导致浏览器卡慢。

优化（减少重绘回流的方式）

1. 直接改变classname而非多次改动样式。
2. 需要多次重排的元素，position属性设置为absolute或fixed使其脱离文档流。
3. 如果创建多个dom元素，创建完成后一次性加入document。