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

本文概述

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

【使用一些技巧来优化你的jQuery代码】如果你想大幅提高速度, 请考虑以下因素：

你的代码效率如何
浏览器的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 itemsfor (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。