重绘和重排版

浏览器下载完所有的HTML标记，Javascript，CSS，图片之后，它解析文件并创建两个内部数据结构

DOM树 表示页面结构
渲染树 表示DOM节点如何显示

渲染树中为每个需要显示的DOM树木=节点存放至少一个节点(隐藏DOM元素在选桉树中没有对应节点)
渲染树上的节点称为"框"或者"盒"，符合CSS模型的定义，将页面元素看作一个具有填充，边距，边框和位置的盒。一
旦DOM树和渲染树构造完毕，浏览器就可以显示(绘制)页面上的元素了。

当DOM改变影响到了元素的几何属性(宽和高)--改变了边框宽在段落中添加文字，将发生一系列后续动作。
浏览器需要重新计算元素的几何属性，而且其他元素的几何属性和位置也会因此改变收到影响。浏览器使渲染树上受到
影响的部分失效，然后重构渲染树。这个过程被称作重排版。重排版完成时。浏览器在一个重绘进程中重新绘制屏幕上
受影响的部分。

不是所有的DOM改变都会影响几何属性。 例如改变元素的背景颜色不会影响它的宽度或高度。在这种情况下，只需要重
绘(不需要重排版)，元素的布局没有改变。

发生重排版的情况：

添加或删除可见的DOM元素
元素的位置改变
元素的尺寸改变(边距，填充，边框宽度，宽度，高度等属性改变)
内容改变 文本改变或图片被另外一个不同尺寸的所替代
最初的页面渲染
浏览器窗口改变尺寸

根据改变的性质，渲染树上或大或小的一部分需要重新计算。某些改变个导致重排版整个页面。例如，当一个滚动条出
现。

因为计算量与每次重排版有关，大多数浏览器通过对劣化修改和批量显示优化重排版过程，然而，你可能强迫队列刷新
并要求所有计划改变的部分立刻应用。获取布局信息的操作将导致刷新队列动作。
offsetTop..offsetLeft...offsetWidth...offsetHeight
scrollTop ....
clientTop.....
getComputedStyle() currentStyle in IE //获取非行间样式的兼容性
document.body.currentStyle getComputedStyle(document.body)

布局信息由这些属性和方法返回最新的数据，所以浏览器不得不运行渲染队列中待改变的项目并重新排版以返回正确的
值。

在改变风格的过程中，最好不要使用前面列出的那些属性。任何一个访问都将刷新渲染队列。即使你正在获取那些最近
未发生改变的或与最新的改变无关的布局信息。

最小化重绘和重排版

el.style.borderLeft="1px";
el.style.borderRight="2px";
el.style.borderPadding="5px";

这里改变的三个风格属性,每次改变都影响到了元素的几何属性。它导致浏览器重排版了三次。
大多数现代浏览器优化了这种情况只进行了一次重排版，但老式的浏览器中，效率低下。

一次性改变风格的办法：
cssText属性:
el.style.cssText="border-left:1px; border-right:2px; padding:5px;"
cssText会覆盖之前的CSS样式，
el.style.cssText+="border-left:1px;"

修改CSS的类名称
el.className="active"

批量修改DOM

减少重绘和重排的次数
1.从文档中摘除该元素
2.对其应用多重改变