浏览器重排重绘

什么是重排、重绘

由于某个元素的布局几何属性发生了比变化而导致了其他元素位置的变化，浏览器就会使渲染树中受到影响的部分失效，并重新构造新的渲染树，这个过程就成为浏览器的重排操作；

重排之后必会触发重绘，浏览器会重新绘制受影响的部分到屏幕上，此过程就是浏览器的“重绘”

何时会触发重排

当页面布局的几何属性改变时就需要重排

1. 添加或删除可见的DOM元素
2. 元素的位置改变
3. 元素的尺寸改变
4. 内容改变（例如：文本改变或图片被替换成另一张不同尺寸的图片替换）
5. 页面渲染初期
6. 浏览器窗口尺寸改变
7. 获取特殊的布局信息（例如：offset* clinet* scroll* getComputedStyle,currentStyle ）
   1. 因为以上的属性和方法需要返回的是最新的布局信息，因此浏览器不得不执行渲染队列中的“待处理”变化，从而触发重排以便返回正确的值

如何尽量防止重排的发生（以提高浏览器渲染速度）

1. 合理缓存元素的几何属性
2. 批量修改dom时
   1. 脱离文本流操作
   2. 文档片断 document.createDocumentFragment(一种轻量级dom对象)
   3. 节点clone(true)然后对副本进行操作，再替换原来的整个节点
3. 添加/替换样式时使用cssText = ”border-left:1px solid red ......;”
4. addClass(’xxx’)
5. 减少dom操作，减少浏览器窗口伸缩