高性能javascript读书笔记（三.DOM 编程2）

重绘和重排版

浏览器下载完全部的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.对其应用多重改变