javascript DOM编程艺术(检测与性能优化)

一、对象检测（是否支持js方法）:只有支持了该方法才可调用

if(!getElementById || getElementsByTagName){
    return false;
}

二、性能考滤

 1、尽量少访问DOM和尽量减少标记：以下面代码为例

if(document.getElementsByTagName("a").length > 0){
   var aLiks = document.getElementsByTagName("a");
   for(var i = 0 ; i < aLiks.length; i++){
  
   }
}

这段代码是查找DOM中的<a>元素。如果大于0，则获得<a>的个数并循环遍历。在这里两次使用了document.getElementsByTagName ，不管什么时候，只要查询DOM中的某个元素，都会搜索整个DOM树，所以这段代码多执行了一次搜索。

优化后的代码：

var aLiks = document.getElementsByTagName("a");
if(aLiks.length > 0){
    for(var i = 0 ; i < aLiks .length; i++){
  
   }
}

 

三、合并和放置脚本

<srcript src="js/A.js"></script>

多使用外部js引用的方式和将多个js文件合并成一个，既可以共用又可以减少加载页面时发送的请求数。

四、压缩脚本

//获取对象数组
var aLiks = document.getElementsByTagName("a");
if(aLiks.length > 0){
    //循环遍历
    for(var i = 0 ; i < aLiks .length; i++){
  
   }
}

压缩后：

var aLiks = document.getElementsByTagName("a");if(aLiks.length > 0){for(var i = 0 ; i < aLiks .length; i++){}}

精简后的脚本虽然看不太懂但能减少脚本的大小。大多数情况下我们应该有两个版本的脚本，一个有格式和注释的开发版易于阅读，一个压缩的精简版放在站点上。