使用一些技巧来优化你的jQuery代码

本文概述

• 1)如果以后需要查询, 可以将查询保存在变量中
• 2)当你的查询使用类选择器时, 请在有限的区域内进行搜索
• 3)尽可能链接你的jQuery函数
• 4)缩小你的javascript文件, 并将它们合并为1个文件
• 5)使用本地方法代替$ .each

如果你想大幅提高速度, 请考虑以下因素：

• 你的代码效率如何
• 浏览器的JS解释器的效率如何
• 计算机运行代码的速度有多快

但是, 即使只有100毫秒左右的时间, 也有一些简单的技巧可以使执行效果更好：

1)如果以后需要查询, 可以将查询保存在变量中

假设你有一个按钮, 并且是应用某些CSS属性所必需的。

$("#button").css('color', 'white');
$("#button").css('width', '100%');
$("#button").css('background-color', 'green');

上一个示例对DOM搜索ID为’button’的按钮执行了3次相同的查询, 肉眼看来还算不错。但是, 如果你在循环中执行该查询会发生什么？

for(var i = 0;i < 100;i++){
    $('#list').append("<li>"+i+"</li>");
}

该查询已执行100次！你可以先缓存查询, 作为一种好习惯：

var list = $("#list");
for(var i = 0;i < 100;i++){
    list.append("<li>"+i+"</li>");
}

2)当你的查询使用类选择器时, 请在有限的区域内进行搜索

当使用类选择器时, 大概需要选择一个以上的DOM对象, 例如

$(".mydivision");

但是, 为你的查询提供上下文以快速进行搜索是一种很好的做法, 否则jQuery将在所有Document上查找我们类的对象, 而是应用：

$(".mydivision", "#mydivision-container");

这样, jQuery将仅关注给定的容器, 并且查询将更快地执行。

3)尽可能链接你的jQuery函数

如果使用返回的对象而不是执行另一个查询, 则通过选择器执行的功能会快速运行

$("#button").css('color', 'white');
$("#button").addClass('greenButton');
$("#button").show('slow');

像提到的第一点一样, 该查询执行了3次, 因此你宁愿将这些函数链接在其位置：

$("#button").css('color', 'white').addClass('greenButton').show('slow');

4)缩小你的javascript文件, 并将它们合并为1个文件

提高脚本的加载速度, 因此你可以花更多的时间来执行脚本。

5)使用本地方法代替$ .each

在浏览器的控制台中执行以下示例。

var array = []; //Adding an array with 1000 items
for (var i=0; i<10000; i++) {
    array[i] = 0;
}
 
console.time('nativeFor');
var l = array.length;
for (var i=0;i<l; i++) {
    array[i] = i;
}
console.timeEnd('nativeFor');
 
console.time('jqueryEach');
$.each (array, function (i) {
    array[i] = i;
});
console.timeEnd('jqueryEach');

你会注意到, for的本机速度比jQuery每个方法快约5倍。最后, 我们建议你始终加载可从官方jQuery网站获得的最新版本的jQuery。