第七课提升DOM操作效率的9个手段

1、第七课 提升dom操作效率的9个手段本课目标提升dom操作效率的9个通用手段注意：这一节考虑的点和上一节恰好相反，如果把内存泄漏归结为“空间问题”，那么这一节考虑的则是“时间问题”。算法设计里面一个常见的手段是：用空间换时间或者用时间换空间。如何考量，需要具体权衡。基础概念1、浏览器加载html、js、图片的顺序；2、如何解析、渲染html；3、“重绘”加载顺序工具：http:/ 插入顺序 插入顺序：function test1() var d1=new date().gettime(); var father=document.createelement(div); for(var i=0;

2、i1000;i+) var sub=document.createelement(div);sub.id=sub_+i;father.appendchild(sub);document.body.appendchild(father); var d2=new date().gettime();alert(d2-d1);function test2() var d1=new date().gettime(); var father=document.createelement(div);document.body.appendchild(father); for(var i=0;i1000;i+

3、) var sub=document.createelement(div);sub.id=sub_+i;father.appendchild(sub); var d2=new date().gettime();alert(d2-d1);注意点：这里和上一节说的“内存泄漏”中的代码不同可以发现，用时间换空间、用空间换时间之间的考量和平衡第二种 在副本上修改function test3() var orig=$(mydiv); var d1=new date().gettime(); var cloned=orig.clonenode(true); for(var i=0;i10000;i+) v

4、ar sub=document.createelement(div);sub.id=sub_+i;cloned.appendchild(sub);/orig.appendchild(sub);orig.parentnode.replacechild(cloned,orig); var d2=new date().gettime();alert(d2-d1);第三种 先设置为不可见再改varel=$(id);el.style.display=none;/注意一下display=none和visible=false的区别，display=none的时候元素不占位置，而visible=false的时

5、候元素不显示，但是位置还占着。el.appendchlid(newnodes);第四种 缓存元素的属性其实，获取属性的操作也有可能引起“重绘”。如果获取的次数非常频繁，还是非常昂贵。for(vari=0;i=500)clearinterval(timer); return;orig.style.left=(i*5+px);i+;,50);第七种 关于查找第一种，没有优化的手工查找：第二种：break!/在大量查询的时候，找到元素之后，立马break很重要！第三种：使用内置的xpath引擎来查找varheadings=document.evaluate(/h2|/h3|/h4,document,

6、null,xpathresult.ordered_node_iterator_type,null);varoneheading;while(oneheading=headings.iteratenext().下一节的ext优化手段里面给出xpath的实例第八种 dom walk在迭代dom节点的过程中，不要改变节点：varallelements=document.getelementsbytagname(div);for(vari=0;iallelements.length;i+)if(allelementsi.tagname.match(/h2-4$/i).这个例子可以参考java里面的iterator.remove()第九种 缓存频繁使用的节点第一段：document.getelementbyid(test).property1=value1;document.getelementbyid(test).property2=value2;document.getelementbyid(test).property3=value3;document.getelementbyid(test).property4=value4;第二段：varsample=document.getelementbyid(test);perty1=value1;sample.