首页 » 编写高质量代码:改善JavaScript程序的188个建议 » 编写高质量代码:改善JavaScript程序的188个建议全文在线阅读

《编写高质量代码:改善JavaScript程序的188个建议》建议180:提高DOM访问效率

关灯直达底部

一个页面一般包含1000多个页面元素,在定位具体元素时,往往需要花费一定的时间。如果用ID或name定位,效率可能比较快,而用元素的一些其他属性(如className等)定位,效率就不理想了。可能只有通过遍历所有元素(getElementsByTagName),然后过滤才能找到相应元素,这就更加低效了。为了提高DOM访问效率,这里推荐使用XPath查找元素。很多浏览器已支持该功能,具体用法如下:


if(document.evaluate){

var tblHeaders=document.evaluate("//body/p/table//th");

var result=tblHeaders.iterateNext;

while(result){

result.style.border="1px dotte"d blue";

result=xpathResult.iterateNext;

}

}else{//getElementsByTagName

//处理浏览器不支持XPath的情况

}

}


浏览器XPath的搜索引擎会提高搜索效率,大大缩短结果返回时间。

HTMLCollection对象是一类特殊的对象,类似数组,但不完全是数组。下列方法的返回值一般都是HTMLCollection对象。

❑document.images、document.forms

❑getElementsByTagName

❑getElementsByClassName

这些HTMLCollection对象并不是一个固定的值,而是一个动态的结果。它们是一些比较特殊的查询返回值。在HTMLCollection对象为下面两种情况时,它们会重新执行之前的查询而得到新的返回值(查询结果),不过在多数情况下会和前一次或几次的返回值一样。

❑length属性

❑具体的某个成员

HTMLCollection对象对这些属性和成员的访问,比数组要慢很多。当然也有例外,Opera和Safari对这种情况就处理得很好,不会有太大性能问题。例如:


var items=["test1","test2","test3",...,"testn"];

for(var i=0;i<items.length;i++){

}

var items=document.getElementsByTagName("p");

for(var i=0;i<items.length;i++){

}


与上面一段代码相比较,下面代码频繁读取items的length属性值,执行效率要低很多,因为每一个循环都会读取items.length的值,也会导致document.getElementsByTagName方法的再次调用,这便是效率大幅度下降的原因。可以这样解决:


var items=document.getElementsByTagName("p");

var len=items.length

for(var i=0;i<len;i++){

}


这样一来,效率基本与普通数组一样。

加载并执行一段JavaScript脚本是需要一定时间的,有时候JavaScript脚本被加载后基本没有被使用过,如脚本中的函数从来没有被调用等。加载这些脚本只会占用CPU时间和增加内存消耗,降低Web应用的性能,所以推荐动态加载JavaScript脚本文件,尤其是那些内容较多、消耗资源较大的脚本文件。


if(needXHR){

document.write("<script type='test//Javascript'src='dojo_xhr.js'>");

}

if(dojo.isIE){

document.write("<script type='test//Javascript'src='vml.js'>");

}