JQuery性能优化和技巧

JQuery性能优化

1.使用最新版本的jquery库

2.使用合适的选择器

注意：

尽量选择id选择器
尽量给选择器指定上下文

3.缓存对象

在书写jquery代码中，新手经常喜欢用如下书写方式：

$('#traffic_light input.on').bind(’click‘，function(){...});
$('#traffic_light input.on').css('border','1px dashed yellow');
$('#traffic_light input.on').css('background-color','orange');
$('#traffic_light input.on').fadeIn('slow');

这样会导致jquery会在创建每一个选择器的过程中，查找dom，创建多个jquery对象，较好的书写方式是：

var $active_light = $('#traffic_light input.on');   //缓存变量
$active_light.bind('click',function(){...});
$active_light.css('border','1px dashed yellow');
$active_light.css('background-color','orange');
$active_light.fadeIn('slow');

还可以用jquery的链式操作再加以完善，如下：

var $active_light = $('#traffic_light input.on');
 $active_light.bind('click',function(){...})
 							.css({;
									'border':'1px dashed yellow',
									'background-color':'orange'	
							})
							.fadeIn('slow');

4.循环时的dom操作

使用jquery可以方便地添加、删除或修改dom节点，但是在一些循环，例如for(),while()或者$.each()中处理节点时，下面有个实例值得注意：

var top_100_list = [...];
$mylist = $('#mylist');
for(var i=0,l=top_length_list.length;i<1;i++){
	$mylist.append('<li>' + top+100+list[i] + '</li>');
}

以上代码中，我们将每一个新添加的标签元素都作为一个节点添加容器ID中，实际上，jquery操作消耗的性能不低，所以更好的方式时尽可能减少dom操作，这里应该将整个元素字符串再插入dom前全部创建好，修改如下：

var top_100_list = [...];
$mylist = $('#mylist');
top_100_lli = " ";
for(var i=0,l=top_length_list.length;i<1;i++){
	top_100_li += '<li>' +top_100_list[i] + '</li>';
}
$myList.html(top_100_li);

也有一个类似的例子，竟然把#myList循环获取了100次。如下

for(i = 0;i < 100;i++)｛
	var $myList = $(‘#myList’)；
	$myLIist.append('This is list item' + i);
｝

5.数组方式使用jquery对象

使用jquery选择器获取结果是一个jquery对象。然而，jquery类库会让你感觉正在使用一个定义了索引和长度的数组。在性能方面，建议使用简单for或者while循环来处理，而不是$each()

6.事件代理

每一个javascript事件，例如click、mouseover等，都会冒泡到父级节点。每当我们需要多个元素调用同个函数时会用到这一点。比如：

$('#myTable td').click(function(){
	$(this).css('background','red');
})

假设有100个td元素，在使用以上方式的时候，你绑定了100个事件，这将带来很负面的性能影响。代替这种效率差的多元素事件监听的方法就是，只需要向它们的父亲节点绑定一次事件，然后通过event.target获取到点击的当前元素，如下

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

改进后，只为一个元素绑定了1个事件。显然，这种方式性能要优于上面那种。同时，还有另一个方式on()，来将整个事件监听封装到一个便利方法中，如下：

$('#myTable').on('click','td',function(){
	$(this).css('background','red');
})

7.将代码转化成jquery插件

如果你每次都需要花上一定时间去开发类似的jquery代码，那么可以考虑将代码编程插件，它能使你的代码有更好的重用性，并且能够有效地帮助你组织代码。创建一个插件的代码如下：

(function($){
	$.fn.yourPluginName = function(){
		//Your code 
		return this;
	}
})(jQuery);

8.使用join()来拼接字符串

很多人可能习惯于用“+”来拼接长字符串，在优化性能的时候，我们可以选择用join(),尤其是长字符串处理的时候。
首先创建一个数组，然后循环，最后使用join()把数组转化为字符串，如下

var array[];
for(var i = 0;i <= 10000; i++){
	array[i] = '<li>' +i +</li>;
}
$('#list').html(array.join(' '));

9.合理使用html5的data属性

html5的data属性可以帮助我们插入数据，特别是前后端的数据交换。jquery的data()方法，有效地利用html5的属性，来自动得到数据。此处不做举例。

10.尽量使用原生的JavaScript方法

下面的一段代码，用来判断多选框是否被选中：

var $cr = $('#cr');
$cr.click(funciton(){
	if($cr.is(":checked")){   //jquery方式判断
		alert("该选项被选中")；
	}
})

这里使用了jquery提供的is()方法，也可以直接使用原生的JavaScript方法，如下

var $cr = $('#cr');
va cr = $cr.get(0);
$cr.click(function(){
	if(cr.checked){
		alert("该选项被选中");
	}
})

毋庸置疑，第二种原生的方式效率更高，因为它不需要拐弯抹角地去调用许多函数。
还有更多类似的操作，如下

$(this).css('color','red');

优化成

this.style.color = 'red';

把如下代码

$('<p></p>');

优化成

$(document.createElement('p'));

经验告诉我们，方法的选择很重要，有时也许根本不需要jquery。

以上参考于《锋利的JQuery》第二版

JQuery性能优化和技巧

JQuery性能优化

猜你喜欢