浏览器渲染，重排和重绘，如何优化

1. 重绘和重排？哪些操作会导致重排和重绘？

* 重排：

浏览器解析页面内容时会生成一个渲染树，当渲染树中部分或全部元素的尺寸、结构、内容发生变化是，浏览器就会出发重新生成渲染树的方法，进而进行重新渲染。

哪些操作会触发重排？

• 页面的首次渲染；
• 浏览器窗口大小发生变化（拖拽浏览器或容器引发）；
• 改变元素内容；
• 字体大小改变；
• 激活了伪类（比如hover出现气泡之类）；
• dom的显示隐藏插入删除等。

全局重排和局部重排

• 全局重排：从根节点开始，对整个渲染树进行重新布局；
• 局部重排：渲染树某部分或者一个渲染对象进行重新布局。

* 重绘：

对于元素自身属性进行改变，不会影响本身在文档流的位置变化，也不会对其他元素产生影响

问题：动画与重排的关系？如何考虑动画性能的优化？

一般情况下，动画都会频繁操作dom，会导致被操作的dom比较多的时候页面性能降低。

优化： 1. 尽量减少频繁操作的dom数量;

      2. 尽量使用脱离文本流的动画主体，比如让它fixed 或者absolute，脱离文档流，将全局的重排转化为局部的重排，提升一部分性能;

      3. 尽量减少循环动画。

问题：documentFragment是什么？它和直接操作dom有什么区别？

documentFragment不是真实DOM树的一部分，它的属性变化不会直接导致DOM树的更新，故频繁改动不会有性能问题。即：需要频繁操作dom时。先将其插入到documentFragment中（数据操作），操作完成后，将documentFragment的所有节点一次性插入到文档树里，触发更新。