jQuery性能优化

jQuery

作为一个前端新手，经常会偷懒使用jquery代替JavaScript原生语法执行一些操作，虽然知道无论如何优化jquery的性能总是赶不上原生的，但是如果能在使用jquery的时候注意一些细节，就能很大程度上提升性能。看了很多文章，这里简单做个归纳总结。

一、尽可能使用最快的选择器

速度上id选择器>tag选择器>类选择器>伪类选择器

1
2
3

$('#content').hide();   //id选择器速度是最快的
//或者从ID选择器继承来选择多个元素:
$('#content p').hide();

二、将对象缓存后再进行后续的操作

选中某一个网页元素，是开销很大的步骤。所以，使用选择器的次数应该越少越好，并且尽可能缓存选中的结果，便于以后反复使用。子查询应该缓存父对象，另外find的效率比上下文查找高

var header = $('#header'); //缓存query对象，子查询时也应缓存父对象
var menu = header.find('.menu');
// 或者
var menu = $('.menu', header);

三、使用链式写法

jQuery的一大特点，就是允许使用链式写法.

1	$('div').find('h3').eq(2).html('Hello');

采用链式写法时，jQuery自动缓存每一步的结果，因此比非链式写法要快。根据测试，链式写法比（不使用缓存的）非链式写法，大约快了25%。

四、事件的委托处理

除非在特殊情况下, 否则每一个js事件(例如:click, mouseover等.)都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点会很有用。代替这种效率很差的多元素事件监听的方法就是,你只需向它们的父节点绑定一次。比如,我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class传统的做法是，直接选中input，然后绑定focus等，如下所示：

$("#entryform input").bind("focus", function(){
       $(this).addClass("selected");
   }).bind("blur", function(){
       $(this).removeClass("selected");
   });

更高效的做法是：

$("#entryform").bind("focus", function(e){
        var $cell = $(e.target); // e.target 捕捉到触发的目标元素
        $cell.addClass("selected");
    }).bind("blur", function(e){
        var $cell = $(e.target);
        $cell.removeClass("selected");
    });

五、减少DOM操作

当要进行DOM插入时，将所有元素封装成一个元素，直接的DOM操作很慢。尽可能少的去更改HTML结构。

var menu = '&lt;ul id="menu"&gt;';
for (var i = 1; i &lt; 100; i++) {
menu += '&lt;li&gt;' + i + '&lt;/li&gt;';
}
menu += '&lt;/ul&gt;';
$('#header').prepend(menu);
// 千万不要这样做：
$('#header').prepend('&lt;ul id="menu"&gt;&lt;/ul&gt;');
for (var i = 1; i &lt; 100; i++) {
$('#menu').append('&lt;li&gt;' + i + '&lt;/li&gt;');
}

我们应该将整套元素字符串在插入进dom中之前先全部创建好，如下所示：

var top_100_list = [],$mylist = $("#mylist"), top_100_li = ""; // 这个变量将用来存储我们的列表元素
for (var i=0, l=top_100_list.length; i&lt;l; i++){
   top_100_li += "&lt;li&gt;" + top_100_list[i] + "&lt;/li&gt;";
}
$mylist.html(top_100_li);

六、尽量少生成jQuery对象

每当你使用一次选择器（比如$(‘#id’)），就会生成一个jQuery对象。jQuery对象是一个很庞大的对象，带有很多属性和方法，会占用不少资源。所以，尽量少生成jQuery对象。

七、采用jQuery的内部函数data()来存储状态

不要忘了采用.data()函数来存储信息：

1
2
3

$('#head').data('name', 'value');
// 之后在你的应用中调用:
$('#head').data('name');

八、事件绑定

将事件绑定推迟到$(window).load，有时候采用$(window).load()比$(document).ready()更快
，因为后者不等所有的DOM元素都下载完之前执行。你应该在使用它之前测试它。

九、优化选择器以适用Sizzle的“从右至左”模型

自版本1.3之后，jQuery采用了Sizzle库，与之前的版本在选择器引擎上的表现形式有很大的不同。
它用“从左至右”的模型代替了“从右至左”的模型。确保最右的选择器具体些，而左边的选择器选择范围较宽泛些：

1
2
3

var linkContacts = $('.contact-links div.side-wrapper');
//而不要使用
var linkContacts = $('a.contact-links .side-wrapper');

迎风向前是唯一的方法