jQuery是一个非常强大的js类库,它总是想让我们以最少的代码完成更多的事情,他有强大的选择器,震撼的事件机制,无所不能的文档操作;但都知道一个再好的程序员,如果不去用心工作那么写的代码也是很垃圾的,比如电脑,再高的配置你一直在滥用也是很慢的,8G内存看着是挺大,试想如果你开机就行动7个G的程序能快吗?所以说很多事情都有待优化.

源码1:

$(".xuexb").hover(function(){
},function(){
});
$(".xuexb .on").click(function(){
})

上面代码是在绑定事件,看着很清楚,可是不知道大家知道不知道用class要比别的选择器慢的多,因为有的浏览器不支持直接byClassName,还得遍历所有的标签(也就是*),然后逐一的对比className是否与目标相同或包含,如果成立则添加到对象里,这是一个漫长的过程,当然对于页面元素少来说你是看不到的.我们使用jquery一定要记住,一般要以ID开头,如:

$("#xuexb div.xuexb").hover(function(){
},function(){
});
$("#xuexb div.xuexb li.on").click(function(){
})

且在必需用class选择的时候在class前加它的标签名,这样jquery就不会用*了,而是你写的Tag标签名,速度又要快好几倍.当然上面还不是很好,因为jQuery的工作方式是从右向左解析.

jQuery优化一:使用id开头,class前加标签名称,缓存对象,且适当用find,children等

源码如:

var xuexb=$("#xuexb");
xuexb.children("li")....
xuexb.find("div.xuexb")...

jQuery优化二,尽量不用live,die,not

在jquery1.9中已经去除live,die了,耗资源吧. not是个去除条件选择器,在不必要的时候也少用,影响速度!

jQuery优化三,缓存常用局部变量

$("#xuexb").click(function(){
 var $this=$(this);
 $this.siblings().removeClass("on").addClass("on");
 $this.next().eq($this.index()).show(); 
})

如果超过二次使用一个对象,那么请缓存它.

jQuery优化四,能用css的用css吧.

比如像一些下拉菜单,导航什么的要写hover事件,是否考虑用css的:hover呢? IE6不支持非a的元素使用可以对IE6写js啊,这样也会大大的提高效率的.如:

#shortcut li.menu:hover ul,#shortcut li.on ul { display: block; }

上面CSS是让 li 滑过的时候显示下面的ul;而IE6是不支持li:hover事件的.那么可以加个js来完成.

if(IE6){
 $("#shortcut li.menu").mouseover(function(){
 $(this).addClass("on")
 }).mouseout(function(){
 $(this).removeClass("on")
 });
}

这样岂不是很省资源吗?当然那个IE6是自定义的.

学习吧提示:

其实写JS还有很多地方需要注意,比如适当的使用父级侦听,代码要保持结构,适当的写注释,写开发文档,处理容错等!

未完待续...

发表于 2013年04月06日 16:14:42 ,添加在分类 前端技术 下 ,最后修改于 2016年07月16日 16:14:42