码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-03-11 23:22:59      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:

一、对象检测(是否支持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++){}}

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

 

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

标签:

原文地址:http://www.cnblogs.com/aegisada/p/4330995.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!