高效JavaScript学习（2）--- DOM编程

DOM编程

         Dom编程在帮助页面进行灵活的展示的同时带来了很大的性能消耗。在考虑进行DOM编程的时候应该采取相应的措施进行页面的快速展示。

何为DOM

         DOM用于操作XML和HTML文档的应用程序接口，浏览器通常会把DOM和javascript独立实现，IE中Jscript位于Jscript.dll中而DOM实现位于mshtml.dll中。

浏览器	Javacript实现	DOM实现
IE	Jscript.dll	Mshtml.dll
FF	SpiderMonkey/TraceMonkey	Gecko
Safari	SquirrelFish	Webkit 中的webCore
Chrome	V8	Webkit 中的webCore

这样产生的问题就是两个独立的接口彼此相连，就会产生性能消耗。ECMAScript每次访问DOM都会产生性能的消耗，因此，需要尽量避免少的减少这种相互间的调用，这就是所谓的天生就慢。

 

DOM的访问和修改

通常来说频繁的调用同一DOM节点进行相同的操作十分的占用系统资源，因此我们推荐将程序的运算留在ECMAScript进行。

function t1(){                                                                              function(){

         $(“#t1”).html(1000);                                                                vara =10000;$(“#t1”).html(a);

         Window.setInterval(function(){                                             window.function(function(){

                            $(“#t1”).html(--$(“#t1”).html());                                           $(“t1”).html(--a);

},1000)                                                                                         },1000)

}                                                                                                     }

 

InnerHTML效率永远高于DOM操作

节点克隆的速度高于新建节点的速度

 

HTML 集合

HTML集合是指通过以下函数获得的对象：

Document.getElementsByName();

Document.getElementsByClassName();

Document.getElementsByTageName();

HTML集合是一种类数组的列表，他最大的问题在于一直是和文档保持联系的，就算是访问其中的length信息，也会去尝试获取HTML集合里的元素个数。

 

 

var t = document.getElementsByTagName("div");

console.debug(t.length);

window.setTimeout(function(){

        

$("<div>123123</div>").appendTo("body");

console.debug(t.length);

},1000)

 

输出结果为

77

78

 

因此，在访问集合元素的时候我们尽量使用局部变量。或者使用选择器api即document.querySelectorAll()，因为选择器api为我们提供的也是普通的数组类，不会与底层关联。