重绘和重排

  浏览器下载完页面中所有的组件——html标记、js、css、图片，之后就会解析并生成两个内部数据结构：DOM表示页面结构、渲染树表示DOM节点如何显示。
  DOM树中每一个需要显示的节点在渲染树中至少存在一个对应的节点（隐藏的元素在渲染树中没有对应的节点）。一旦DOM和渲染树构建完成。浏览器开始绘制页面元素。
  当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的集合属性，同样其他元素的集合属性和位置也会受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为“重排”。完成重排后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为“重绘”（比如改变一个元素的背景色并不影响几何属性）。

何时发生
  重排：当页面布局和几何属性改变时就需要“重排”。下述情况会发生重排：

• 添加或删除可见的DOM元素。
• 元素的位置、尺寸（内外边距、边框厚度、宽高等属性）改变
• 内容改变（文本改变或图片被另一个不同尺寸的图片替代）
• 页面渲染器初始化
• 浏览器窗口尺寸改变。

  "重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。但是，"重排"必然导致"重绘"，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。

  js中一些方法会导致重新获取布局信息,刷新渲染队列。

• offsetTop，offsetLeft，offsetWidth，offsetHeight
• scrollTop，scrollLeft，scrollWidth，scrollHeight
• clientTop，clientLeft，clientWidth，clientHeight
• getComputedStyle(currentStyle in IE)

最小化重绘和重排
  重回和重排代价可能会很昂贵，因此一个好的提高程序响应速度的策略就是减少此类操作的发生。为了减少发生的次数，应该合并多次对DOM和样式的修改，然后依次处理掉。

eg：改变样式：

var el = document.getElementById('myDiv');
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';

  上述示例中有三个样式被改变，每一个都会影响元素的几何结构，会导致浏览器触发三次重排，可以优化，合并操作
1、使用cssText属性实现

var el = document.getElementById('myDiv');
el.style.cssText = 'border-left:1px; border-right: 2px; padding: 5px;'

  上述代码覆盖了之前的样式，如果想要保存之前的样式，可以将它附加到cssText字符串后面。

el.style.cssText += '  border-left:1px; border-right: 2px; padding: 5px;'

2、修改css的class名称

批量修改DOM
  当需要对DOM元素进行一系列操作，可以通过以下步骤来减少重绘和重排的次数：
1、使元素脱离文档流（重排）
2、对应用多重改变
3、把元素带回文档（重排）

有三种基本方法可以使DOM脱离文档流：
1、隐藏元素，应用修改，重新显示
2、使用文档片段在当前DOM之外构建一个子树，再把它拷贝回文档（推荐）
3、将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素。