浏览器的渲染机制

1.首先浏览器会在真实DOM挂载前生成一个虚拟DOM树，这个虚拟的DOM树是由html解析成的DOM树和由css解析成的DOM规则构成的。然后开始绘制页面。

2.页面在更新的时候也会再次渲染，渲染分为重绘和回流，回流一定会产生重绘，重绘不一定会回流。 回流和重绘在什么情况下发生呢？

重绘：当页面的属性改变时，例如color，background-color，之类的颜色背景改变，会发生重绘。 回流：当页面的布局、大小发生变化时，会导致结构的改变，因此产生回流。

性能优化

说白了就是减少页面的重绘和回流，性能自然就上去了。那么接下来就是怎样减少页面的重绘和回流了。

1.让节点隐藏，例如display：none；这样无论你怎样修改，只要不让他显示，他就不会产生重绘和回流。只有在第一次加载和显示的时候才会产生重绘和回流，这样一共只有两次重绘和回流，因此加载性能自然就上去了。

2.减少行内样式的使用，直接设置calssName统一管理，把想要设置的样式用calssName放在一起，减少了渲染的代码，性能自然也上去了。

3.让操作的节点脱离文档流，position：fixed，absolute，这样操作他的时候就可以不用考虑整体的影响了，也可以提升性能。

4.使用克隆技术，克隆元素可以复用之前的各种东西。

5.使用碎片化文档的方式（documentFragment），把需要操作的东西放在里面，最后只需要把文档碎片加到DOM树里面就行