回流(reflow)和重绘(repaint)

 1.生成DOM树(DOM TREE)

 2.加载CSS 

 3.生成渲染树(RENDER TREE),渲染树是和样式相关的 

 4.浏览器基于GPU(显卡)开始按照RENDER TREE画页面 

 重绘(repaint)：

当某一个DOM元素 样式更改 (位置没变只是样式更改，例如：颜色变为红色...)浏览器会重新渲染这个元素

例子：

box.style.color = 'red'
//...
box.style.fontsize = '16px'

上面操作触发了两次重绘，性能上有所消耗，为了优化性能，我们最好一次性把需要修改的样式搞定，例如：

.xxx{
    color:'red',
    font-size:'16px'
}
box.className = 'xxx'

回流(reflow)

1.页面首次渲染

2.当DOM元素的结构或者位置发生改变（删除、增加、改变位置、改变大小......）

3.获取某些属性也会引起回流

都会引发回流，所谓回流，就是浏览器抛弃原有计算的结构和样式，从新进行DOM TREE或者RENDER TREE，非常非常非常......消耗性能

解决方案