快速掌握Jquery代码优化诀窍，提高页面运行速度。

本文将从最多见的三个方面，来讨论jquery优化：

一、从选择器方面优化：

Jquery选择器的原理其实是基于js的选择器（getElementByXXXX）等等。所以我们很容易就能知道，不同选择器的选择速度。

像js有方法这种getElementById、getElementByTagName速度会很快。也就是如果代码里$(“#xxx”)、$(“input”)的速度会快于类名选择器$(“.xxx”)。其中id选择器的速度是最快的。

因为类名不唯一，所以jquery在实现类名选择器的时候，是通过遍历dom树的方法实现的。所以可想而知，类名选择器的速度。

我们要优化我们的代码，就可以从以下几个方面来优化：

1、  优先使用id选择器、tag选择器。

2、  在使用类名选择器的时候，提供一个范围比如：

var selectedItem = $('.listItem', $('.myList'));

这样他就不用再所有的dom树里面循环找该类名的元素了。

3、  可以定义自己的选择器，只要在代码里写：

$.extend($.expr[':'], { over100pixels: function(a) { return $(a).height() > 100; } });

这样你就可以使用自己定义的选择器了

 $('.box:over100pixels').click(function() { alert('The element you clicked is over 100 pixels high'); });

4、  在有代码重复使用同样的选择器的时候，使用变量代替

for(var i=0;i<100;i++){
	$(“.sd”).css(“height”,”1px”);
}

变成

var $dom=$(“.sd”);
for(var i=0;i<100;i++){
	$dom.css(“height”,”1px”);
}

效率会提高很多

5、当有同一个元素的多种操作的时候不用分开写，可以使用方法连。

$('#mypanel') .find('TABLE .firstCol') .removeClass('.firstCol') .css('background' : 'red') .append('<span>This cell is now red</span>');

这样就避免了，多语句再多次选择元素。

6、  总是使用最新的jquery版本，每一次的新版本，都会对选择器的性能做优化。所以用新版本的jquery会让代码性能提升一点。

二、从dom操作方面优化：

像我们经常用的dom插入的操作，如.append(),.prepend(),.after(),.wrap()，等使用起来是相当耗时的。

尤其是当重复操作的时候。但是也是经常重复使用的。当我们获得了数组数据的时候经常要遍历，去拼页面上的dom。

那么这样就出现了选择：

你可以：

$.each(response.data,function(index,item){
$(“.aaa”).append(“<li>”+item+”</li>”);
});

但根据我们上面讨论过的优化手段可以做两点优化：

第一$(“.aaa”)选择器可以提出来，第二append（）操作，可以等到循环完在操作。

var $dom=$(“.aaa”);
var str=””;
$.each(response.data,function(index,item){
str+=“<li>”+item+”</li>”;
});
$dom.append(str);

上面也可以用数组来攒字符串。

 

三、从事件绑定方面优化：

绑定事件是一件再通用不过的的操作。

需要注意的时候是，当我们绑定一个类的事件，同类名的dom可能非常多。但是我们习惯写的绑定事件。

$('.kkk ').click(function(){ $(this).css('background', 'red'); });

这种写法可能会让有多少个kkk类名的元素就会绑定多少个事件。那么这种情况下该怎么优化呢：

$('#myTable').click(function(e) { var clicked = $(e.target); clicked.css('background', 'red'); });

这样不管kkk类名的dom有几个都只绑定一个事件。这叫做事件代理。

 

除了这些优秀的jquery代码优化方法，其实还有很多可以改善页面加载速度的方法。养成良好的代码习惯，是一名优秀程序员的基本功，只有每一步都走的优秀，才能走的更快、更稳。