标签：
参考高性能javascript javascript编程全解
1）DOM
文档对象模型是一种操作xml和html文档的接口（API），我们可以通过javascript（ECMAScript）访问DOM，访问或者修改DOM的时候会产生开销，接下来讨论如何减少这方面的开销
这里面想到了几种方案
1）减少DOM的访问次数
使用局部变量
2）创建新的节点的时候 clone已经存在的节点
使用能区分元素节点和其他节点的属性
使用选择器API（这3种优化了方法，使用了不同于之前的方法）
3）最小化重绘与重排
4）合理利用事件委托，减少事件处理器的数量
1）
1.1减少DOM访问次数
当我们向一个DOM元素增加大量的内容的时候 我们选择这种方案的时候
function addInnerHTML() {
for(var i = 0;i < 10000;i++) {
document.getElementById("container").innerHTML += "a";
}
}
console.time(‘addInnerHTML‘);
addInnerHTML();
console.timeEnd(‘addInnerHTML‘);
发现运行时间在2000ms左右，是因为在加黑的代码中存在两次访问DOM元素，一次是读取，一次是重写 ，当改写为下面的方式的时候
function addInnerHTML() {
var content = "";
for(var i = 0;i < 10000;i++) {
content += "a";
}
document.getElementById("container").innerHTML += content;
}
console.time(‘addInnerHTML‘);
addInnerHTML();
console.timeEnd(‘addInnerHTML‘);
会发现速度得到了显著的提升，均值在1ms左右,在这里将要增加的内容保存在局部变量content中，它通过对DOM元素访问次数的减少，得到了性能的提升
1.2
当我们使用以下的方法的时候，
document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName()
会得到一个HTML集合，这个集合是一个NodeList对象，它的特征也是它是一种live对象，即DOM树种相应的变化都会在这个NodeList对象中得到体现。
当同一个DOM属性或者方法需要多次访问的时候，可以使用一个局部变量来缓存这个成员，利用这个局部变量去访问需要多次访问的元素
function search() {
var collention = document.getElementsByTagName("div");
var length = collention.length;
var temp;
for(var i = 0;i < length;i++) {
temp = collention[i];
/*操作*/
}
}
上面的方法会提高性能，同时我们也可以将获得HTML集合通过Array.prorotype.slice()转换为数组在操作，也会得到性能的提升
2）
2.1使用element.cloneNode（）替代document.createElement（） 这样程序的效率也会得到相应的提升
2.2在我们只需要元素节点的时候，需要筛选掉从集合中筛选掉不是元素节点的其他节点（空白或者注释），这时候我们可以使用children替代childNodes firstElementChild替代firstChild等实现
2.3 Selector API
通过Selector API选取DOM元素更加灵活，例如 document.querySelectorAll(“#menu a”) 选取id为menu下的所有a元素，这样返回的集合是一个StaticNodeList，它与NodeList的区分就是NodeList的更改会反映在HTML文档中，对StaticNodeList的改变不会反映在HTML文档中
3）最小化重绘与重排
浏览器下载完页面的所有组件后（图片 javascript html标记 css），之后会解析并生成两个内部结构
DOM树 表示页面结构
渲染树 表示DOM节点如何显示
DOM树中每一个需要显示的节点在渲染树种至少存在一个对应的节点（隐藏的元素除外），在渲染树中的节点称为帧或者盒
当DOM元素的几何属性变化时，浏览器会使渲染树中受影响的部分失效，并重新构造渲染树，这个过程叫重排，完成重排后，将受影响的部分重新绘制到浏览器中，这个过程叫重绘
大多数浏览器都通过队列化修改并批量执行来优化重排过程，当我们更改布局信息的时候，更改的信息就会进入队列等待处理
1）当我们对DOM元素操作不多的时候，我们可以尽可能的将DOM样式修改合并，并且将获取布局信息的操作与DOM样式修改的操作分离开来（会刷新渲染队列导致重排），在这里我们也可以用之前的方法，将获得的布局信息缓存起来，使用局部变量来达到减少重排次数的目的
2）当批量修改DOM的时候，可以通过以下的步骤减少重绘和重排的次数
1让元素脱离文档流
2 对其应用多重改变
3 把元素带回文档中
如果没有1 3 在2中的任何操作都有可能触发重排 ，让元素脱离文档有3种方式
1 隐藏元素，应用修改，重新显示（隐藏的元素在渲染树中没有对应的节点）
2利用文档片段，在当前文档外构建一个子树，在把它拷会文档
3 创建当前节点的副本，在副本上应用修改，完成后替换原始元素
4）合理利用事件委托，减少事件处理器数量 通过减少事件处理器数量，能提高页面的性能
标签：
原文地址：http://www.cnblogs.com/tiantianwaigong/p/4451704.html
