一些提升你jquery效率的小技巧
1.总是使用最新版本的jquery
jquery 处于不断发展和完善之中,john和他的团队一直在找询新的方法去提高程序的表现，
使用最新版本的jquery可以让你和程序与时俱进。
2.合并和最小化你的脚本
尽量把你页面用到的javascript脚本合并到一个文件中，并压缩它，这样你的页面会加载更快
3.用for函数代替jquery的each函数
原生函数总是比任何的辅助复本函数快,可以看下面的例子:
[javascript] view plaincopy
var array = new Array ();
for (var i=0; i<10000; i++) {
array[i] = 0;
}
console.time('native');
var l = array.length;
for (var i=0;i<l; i++) {
array[i] = i;
}
console.timeEnd('native');
console.time('jquery');
$.each (array, function (i) {
array[i] = i;
});
console.timeEnd('jquery');
我的机子上可以在firebug中看到:
在本地执行时用for()只需2ms,而$.each()需要26ms
网络上执行时用for()只需14ms,而$.each()需要160ms
当然机子和网络因素是不可控制的，但速度的快慢的问题还是能看出来。
4.在查找dom元素时，用id查找而不是class
通过id选择对象,这们是更好的，因为库的行为:jQuery使用浏览器的本土的方法getElementByID()来检索对象,
这样使得查询非常快速.
看下面例子：
[javascript] view plaincopy
// Example creating a list and filling it with items
// and selecting each item once
console.time('class');
var list = $('#list');
var items = '<ul>';
for (i=0; i<1000; i++) {
items += '<li class="item' + i + '">item</li>';
}
items += '</ul>';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('.item' + i);
}
console.timeEnd('class');
console.time('id');
var list = $('#list');
var items = '<ul>';
for (i=0; i<1000; i++) {
items += '<li id="item' + i + '">item</li>';
}
items += '</ul>';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('#item' + i);
}
console.timeEnd('id');
通过firebug可以看到:
local test:id 52ms ;class 175ms
online test:id 164ms;class 5s
下面还有其它几种选择串使用的比较：
[javascript] view plaincopy
console.profile() ;
$(".selected");
console.profileEnd();
//firebug profile(0.308ms,11 calls)
console.profile() ;
$("li.selected");
console.profileEnd();
//firebug profile(0.291ms,11 calls)
console.profile() ;
$("#someList .selected");
console.profileEnd();
//firebug profile(0.283ms,11 calls)
console.profile() ;
$("#someList li.selected");
console.profileEnd();
//firebug profile(0.275ms,11 calls)
console.profile() ;
$("#mainItem");
console.profileEnd();
//firebug profile(0.165ms,2 calls)
可以看到id选择器是最快的。
5.给你的选择器一个上下文参照
如果你必须使用class来指定你的元素,至少要通过适当的使用选择器来防止jQuery传递整个DOM.
象这样的代码： $('.class').css ('color' '#123456');
最好写成这样： $('.class', '#class-container').css ('color', '#123456');
这样不需要传递整个dom--而仅仅是#class-container元素.
6.总是把你已经选取到的元素缓存起来
不要错误的或一遍又一遍的重复你的选择器，你可以用一个变量把它缓存起来，
这样,DOM就不需要去一遍又一遍的追踪你的元素.
看下面例子：
[javascript] view plaincopy
$('#item').css ('color', '#123456');
$('#item').html ('hello');
$('#item').css ('background-color', '#ffffff');
// you could use this instead
$('#item').css ('color', '#123456').html ('hello').css ('background-color', '#ffffff');
// or even
var item = $('#item');
item.css ('color', '#123456');
item.html ('hello');
item.css ('background-color', '#ffffff');
// as for loops, this is a big no-no
console.time('no cache');
for (var i=0; i<1000; i++) {
$('#list').append (i);
}
console.timeEnd('no cache');
// much better this way
console.time('cache');
var item = $('#list');
for (var i=0; i<1000; i++) {
item.append (i);
}
console.timeEnd('cache');
在firebug中可以看到:
local test: caching 28ms; not caching 72ms
online test: caching 67ms; not caching 210ms
7.尽量避免dom操作
dom操作应该尽越少越好，因为类似prepend(),append(),after()这样的插入操作是相当耗时的,
上面的插入操作用html()函数和提前构建好列表来代替会更快。
看下面例子：
[javascript] view plaincopy
console.profile() ;
var list = $("#someList");
for (var i=0; i<50; i++)
{
list.append('<li>Item #' + i + '</li>');
}
console.profileEnd();
//firebug profile(17.851ms,602 calls)
console.profile() ;
var list = $("#someList");
var items = "";
for (var i=0; i<50; i++){
items += '<li>Item #' + i + '</li>';
}
list.append(items);
console.profileEnd();
//firebug profile(5.29ms,210 calls)
console.profile() ;
var list = document.getElementById('someList');
var items = '';
for (var i=0; i<50; i++){
items += '<li>Item #' + i + '</li>';
}
list.innerHTML = items;
console.profileEnd();
//firebug profile(3.644ms,5 calls)
现在应该清楚如何操作dom更快了吧。
8.使用join()函数代替concat()函数来进行长字符串连接
这样看起来可能很奇怪，但是对于加速很有帮助，特别是当你处理长字符串连接的时候。
先创建一个数组用你需要连接的字符来填充它。join()方法比concat()方法表现更好。
像下面这样：
[javascript] view plaincopy
var array = [];
for (var i=0; i<=10000; i++) {
array[i] = '<li>'+i+'</li>';
}
$('#list').html (array.join (''));
9.使用一个元素前，先判断一下它是否存在
虽然jquery对于这样的问题处理得很优雅了，但是这不意味着你可以忽略这个问题。
事实上如果你在一个空元素上调用jquery的方法，它是不会执行的。
看下面的例子：
[javascript] view plaincopy
console.profile();
var ele = $("#somethingThatisNotHere");
ele.text("Some text").slideUp(300).addClass("editing");
$("#mainItem");
console.profileEnd();
//Some more awesome, ground shattering code here ._.
firebug中显示profile(0.477ms,21 calls)
而下面这个：
[javascript] view plaincopy
console.profile() ;
var ele = $("#somethingThatisNotHere");
if ( ele[0] ) {
ele.text("Some text").slideUp(300).addClass("editing");
}
$("#mainItem");
console.profileEnd();
//Some more awesome, ground shattering code here ._.
firebug中显示profile(0.112ms,4 calls)
看出来效率的不同了吧。
10.学会使用event delegation
jquery 使为元素添加事件变得更容易了，但是增加太多的事件并不是很有效率的，
在很多情况下事件委托允许你只增加很少的事件但可以得到同样的结果.
看下面的例子:
[javascript] view plaincopy
$('#myTable TD').click(function(){
$(this).css('background', 'red');
});
一个简单的函数，当你点击它时，使表格中的元素变成红色。假设你有一个
10列50行的表格，这样的话就会产生500个事件绑定。如果仅仅对表格增加一个
事件，当表格被点击时使事件句柄算出中哪个元素被点击，然后在使元素变成红色，
这样不是更简洁吗？
下面就是这种简洁的实现：
[javascript] view plaincopy
$('#myTable').click(function(e) {
var clicked = $(e.target);
clicked.css('background', 'red');
});
11.写你自己的选择器
jquery有很多内建的选择器，可以通过id,class,tag,attribute等等来选择元素。
但是如果你需要去基于其它的东西选择元素而jquery没有这样的选择器呢？
一个解决办法是你可以增加额外的classes给元素，然后使用它来选择元素。
但事实证明扩展jquery来增加一个自己的选择器并不困难。
下面是一个例子（选取超过100px高的元素）：
[javascript] view plaincopy
$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a).height() > 100;
}
});
$('.box:over100pixels').click(function() {
alert('The element you clicked is over 100 pixels high');
});
jquery 处于不断发展和完善之中,john和他的团队一直在找询新的方法去提高程序的表现，
使用最新版本的jquery可以让你和程序与时俱进。
2.合并和最小化你的脚本
尽量把你页面用到的javascript脚本合并到一个文件中，并压缩它，这样你的页面会加载更快
3.用for函数代替jquery的each函数
原生函数总是比任何的辅助复本函数快,可以看下面的例子:
[javascript] view plaincopy
var array = new Array ();
for (var i=0; i<10000; i++) {
array[i] = 0;
}
console.time('native');
var l = array.length;
for (var i=0;i<l; i++) {
array[i] = i;
}
console.timeEnd('native');
console.time('jquery');
$.each (array, function (i) {
array[i] = i;
});
console.timeEnd('jquery');
我的机子上可以在firebug中看到:
在本地执行时用for()只需2ms,而$.each()需要26ms
网络上执行时用for()只需14ms,而$.each()需要160ms
当然机子和网络因素是不可控制的，但速度的快慢的问题还是能看出来。
4.在查找dom元素时，用id查找而不是class
通过id选择对象,这们是更好的，因为库的行为:jQuery使用浏览器的本土的方法getElementByID()来检索对象,
这样使得查询非常快速.
看下面例子：
[javascript] view plaincopy
// Example creating a list and filling it with items
// and selecting each item once
console.time('class');
var list = $('#list');
var items = '<ul>';
for (i=0; i<1000; i++) {
items += '<li class="item' + i + '">item</li>';
}
items += '</ul>';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('.item' + i);
}
console.timeEnd('class');
console.time('id');
var list = $('#list');
var items = '<ul>';
for (i=0; i<1000; i++) {
items += '<li id="item' + i + '">item</li>';
}
items += '</ul>';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('#item' + i);
}
console.timeEnd('id');
通过firebug可以看到:
local test:id 52ms ;class 175ms
online test:id 164ms;class 5s
下面还有其它几种选择串使用的比较：
[javascript] view plaincopy
console.profile() ;
$(".selected");
console.profileEnd();
//firebug profile(0.308ms,11 calls)
console.profile() ;
$("li.selected");
console.profileEnd();
//firebug profile(0.291ms,11 calls)
console.profile() ;
$("#someList .selected");
console.profileEnd();
//firebug profile(0.283ms,11 calls)
console.profile() ;
$("#someList li.selected");
console.profileEnd();
//firebug profile(0.275ms,11 calls)
console.profile() ;
$("#mainItem");
console.profileEnd();
//firebug profile(0.165ms,2 calls)
可以看到id选择器是最快的。
5.给你的选择器一个上下文参照
如果你必须使用class来指定你的元素,至少要通过适当的使用选择器来防止jQuery传递整个DOM.
象这样的代码： $('.class').css ('color' '#123456');
最好写成这样： $('.class', '#class-container').css ('color', '#123456');
这样不需要传递整个dom--而仅仅是#class-container元素.
6.总是把你已经选取到的元素缓存起来
不要错误的或一遍又一遍的重复你的选择器，你可以用一个变量把它缓存起来，
这样,DOM就不需要去一遍又一遍的追踪你的元素.
看下面例子：
[javascript] view plaincopy
$('#item').css ('color', '#123456');
$('#item').html ('hello');
$('#item').css ('background-color', '#ffffff');
// you could use this instead
$('#item').css ('color', '#123456').html ('hello').css ('background-color', '#ffffff');
// or even
var item = $('#item');
item.css ('color', '#123456');
item.html ('hello');
item.css ('background-color', '#ffffff');
// as for loops, this is a big no-no
console.time('no cache');
for (var i=0; i<1000; i++) {
$('#list').append (i);
}
console.timeEnd('no cache');
// much better this way
console.time('cache');
var item = $('#list');
for (var i=0; i<1000; i++) {
item.append (i);
}
console.timeEnd('cache');
在firebug中可以看到:
local test: caching 28ms; not caching 72ms
online test: caching 67ms; not caching 210ms
7.尽量避免dom操作
dom操作应该尽越少越好，因为类似prepend(),append(),after()这样的插入操作是相当耗时的,
上面的插入操作用html()函数和提前构建好列表来代替会更快。
看下面例子：
[javascript] view plaincopy
console.profile() ;
var list = $("#someList");
for (var i=0; i<50; i++)
{
list.append('<li>Item #' + i + '</li>');
}
console.profileEnd();
//firebug profile(17.851ms,602 calls)
console.profile() ;
var list = $("#someList");
var items = "";
for (var i=0; i<50; i++){
items += '<li>Item #' + i + '</li>';
}
list.append(items);
console.profileEnd();
//firebug profile(5.29ms,210 calls)
console.profile() ;
var list = document.getElementById('someList');
var items = '';
for (var i=0; i<50; i++){
items += '<li>Item #' + i + '</li>';
}
list.innerHTML = items;
console.profileEnd();
//firebug profile(3.644ms,5 calls)
现在应该清楚如何操作dom更快了吧。
8.使用join()函数代替concat()函数来进行长字符串连接
这样看起来可能很奇怪，但是对于加速很有帮助，特别是当你处理长字符串连接的时候。
先创建一个数组用你需要连接的字符来填充它。join()方法比concat()方法表现更好。
像下面这样：
[javascript] view plaincopy
var array = [];
for (var i=0; i<=10000; i++) {
array[i] = '<li>'+i+'</li>';
}
$('#list').html (array.join (''));
9.使用一个元素前，先判断一下它是否存在
虽然jquery对于这样的问题处理得很优雅了，但是这不意味着你可以忽略这个问题。
事实上如果你在一个空元素上调用jquery的方法，它是不会执行的。
看下面的例子：
[javascript] view plaincopy
console.profile();
var ele = $("#somethingThatisNotHere");
ele.text("Some text").slideUp(300).addClass("editing");
$("#mainItem");
console.profileEnd();
//Some more awesome, ground shattering code here ._.
firebug中显示profile(0.477ms,21 calls)
而下面这个：
[javascript] view plaincopy
console.profile() ;
var ele = $("#somethingThatisNotHere");
if ( ele[0] ) {
ele.text("Some text").slideUp(300).addClass("editing");
}
$("#mainItem");
console.profileEnd();
//Some more awesome, ground shattering code here ._.
firebug中显示profile(0.112ms,4 calls)
看出来效率的不同了吧。
10.学会使用event delegation
jquery 使为元素添加事件变得更容易了，但是增加太多的事件并不是很有效率的，
在很多情况下事件委托允许你只增加很少的事件但可以得到同样的结果.
看下面的例子:
[javascript] view plaincopy
$('#myTable TD').click(function(){
$(this).css('background', 'red');
});
一个简单的函数，当你点击它时，使表格中的元素变成红色。假设你有一个
10列50行的表格，这样的话就会产生500个事件绑定。如果仅仅对表格增加一个
事件，当表格被点击时使事件句柄算出中哪个元素被点击，然后在使元素变成红色，
这样不是更简洁吗？
下面就是这种简洁的实现：
[javascript] view plaincopy
$('#myTable').click(function(e) {
var clicked = $(e.target);
clicked.css('background', 'red');
});
11.写你自己的选择器
jquery有很多内建的选择器，可以通过id,class,tag,attribute等等来选择元素。
但是如果你需要去基于其它的东西选择元素而jquery没有这样的选择器呢？
一个解决办法是你可以增加额外的classes给元素，然后使用它来选择元素。
但事实证明扩展jquery来增加一个自己的选择器并不困难。
下面是一个例子（选取超过100px高的元素）：
[javascript] view plaincopy
$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a).height() > 100;
}
});
$('.box:over100pixels').click(function() {
alert('The element you clicked is over 100 pixels high');
});
还没人赞这篇日记
