标签：
我们都知道，在js编程中，很大一部分是和DOM打交道。
DOM是和编程语言无关的一个东西，用来映射html文档的，DOM里面包含一些API。在浏览器中，这些API可以被js调用。但是DOM和ECMA又是不同的2个模块，它们之间的沟通需要跨模块。所以，访问DOM就会比较慢。天生的 。。。
慢就慢把，总能做一些优化吧。
DOM访问和修改。
都说访问DOM耗性能，用循环访问更是如此。所以可以减少DOM访问来优化。
比如
for(var i=0;i<1000;i++){
document.getElementById(‘a‘).innerHTML+=‘a‘;
}
这段代码每次循环都访问了2次DOM，读取innerHTML一次，重写innerHTML里面的内容一次。超级耗性能啊。
改成
var str=‘‘;
for(var i=0;i<1000;i++){
str+=‘a‘;
}
document.getElementById(‘a‘).innerHTML=str;
for循环的部分不涉及DOM访问，在最后的时候访问一次DOM，重写DOM，ok。
（以上是针对一个DOM元素的，下面要讲一堆DOM元素，也就是HTML集合，原理也一样，就是弄成局部变量）
html集合
用document.getElementsByTagName之类的dom方法获得的都是类数组。只有length属性和可以通过下标查询元素。没有原生数组的一些方法。
另外由于html集合是和html文档随时绑定的。所以每次需要html集合里面的内容，哪怕是length，都会重复查询html文档。这就造成了低效。。
1.缓存length属性，免得每次查询都要遍历HTML文档来获得length。（在没有增删节点的情况下）。
2 利用局部变量访问html集合：
var a=document.getElementByName(‘a‘);
var str=‘‘;
for(var i=0;i<1000;i++){
str+=document.getElementByName(‘a‘)[i];
}
改成
var a=document.getElementByName(‘a‘);
var str=‘‘;
for(var i=0;i<1000;i++){
str+=a[i];
}
3 元素节点的获取
一般用childnodes，但这个效率低，还或获得文字节点，这些我们一般用不到，还要写代码删去。麻烦。。。
建议用children属性，直接获得nodelist的元素节点，效率也高。IE6都支持啊。。
另外一些好的节点获取方法，支持性不是很好，就不写了。嘿嘿。
4选择器API
超好用的选择器api,document.querySelectorAll(‘#a .a‘);
获得的是non-live的nodelist,也就是不是时时链接html文档的。不用担心访问DOM的性能啦。并且这个API比传统的一些获取DOM集合的方法速度快，还有代码短啊，就一句。棒！檫，别忘了做兼容,这个IE8以下不行。。。
重排和重绘
页面下载完所有的文件之后，(包括html，css，js，img等等)，开始绘制2棵树了。一棵是DOM树，另一棵是渲染树。
DOM树就是把html的文档结构映射到一棵树上。（好像是废话）。。。
渲染树用来表示dom怎么在浏览器中显示。
所有的DOM节点都在渲染树中有自己的位置（除了隐藏的节点外）。渲染树中的节点可以看成是一个box。
当这2棵树弄好了之后，浏览器就开始绘制啦（painting过程）
但绘制过程并非这么顺利。有时候突然改变了元素的box，比如宽度啊高度啊，这就影响了另外的DOM元素，浏览器就会找出受影响的部分，重新构造渲染树，这个过程就叫重排（reflow回流）。重排完成后，就会进行重绘(repaint)的过程了。
重排会发生在很多情况，比如宽高的改变（渲染树重构），增加元素（DOM树和渲染树都重构了），增加滚动条（整个页面都被重排了）。
所以我们要尽可能减少重排和重绘
有什么方法呢？
标签：
原文地址：http://www.cnblogs.com/wz0107/p/4947027.html
