一个页面一般包含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'>");
}