原文链接：Improve your jQuery – 25 excellent tips

jquery是令人惊叹的框架，我已经使用它一年多了，我发觉使用它的时间越长，就会越喜欢它，也越理解它内部的工作原理。

我不是一个jquery专家，我也不奢求成为专家，所以如果这篇文章里出现一些错误我非常乐意接受大家的批评和改正。

我常常称自己为jquery中级使用者，我一年以来学到的、总结出来的技巧和技术，应该可以让一些人从中获益。

1.从google code载入jquery

Google挺久以前就开始提供各种javascript库供使用者载入，从google载入javascript框架相对于直接从自己的服务器载入有许多优势，首先它节省了自己服务器的带宽，从google载入也十分快，最重要的是如果用户之前已经访问过其他从google载入javascript库的网站，再访问你的网站时直接从缓存里取出即可,无需再次请求，会大大加快载入速度。

这很有意义，有多少网站储存着同一个版本的jquery呢，它们都没有被缓存。从google载入jquery是很容易做到的：

<script src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
    // 载入jQuery
    google.load(”jquery”, “1.2.6″);
    google.setOnLoadCallback(function() {
    //代码放这里
    });
</script>

或者，你也可以直接包含jquery对应的网址，像这样：

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js” type=”text/javascript”></script>

完整的说明在这里

2.使用参考表(cheat sheet)

这不仅仅是个关于jquery的建议，对于很多语言，都有相应的很好的参考表，它很方便地把所有函数都列在可打印的A4格式的文档上，对于jquery1.2，下面这两个网址给出了两个很好的参考表：

http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/
http://colorcharge.com/jquery/

3.组合你所有的代码并压缩它们

嗯，这本来是一个普遍的javascript的建议，但任何使用jquery的大项目通常都会使用很多插件，所以这条建议也适用于jquery。

现在的浏览器不能同时载入几个脚本，这意味着如果你一次载入很多个脚本，会减慢载入网页的速度，所以，如果你的脚本需要载入到所有页面上，就可以考虑把你所有的代码放在一起，然后压缩它们。

有一些插件脚本已经被压缩过，你要考虑的是那些没有被压缩过的脚本。压缩脚本需要花费的时间很少，个人来说，推荐Dean Edwards制作的Packer这个工具。

4.使用firebug的控制台记录工具

如果你还没有安装firebug，那应该立即去下载。它除了提供其他一些常用的功能例如检查http传输和查找CSS错误外，还有优秀的控制台记录命令让你能轻易地检测脚本里的错误。

这里有这个功能的详细介绍

我个人喜欢的功能是“console.info”，它能输出信息或变量，代替了弹出窗口的alert，还有“console.time”让你轻易地在一段代码间设置一个计时器，得出执行这段代码所用的时间。这些console命令都很容易使用：

console.time('create list');
for (i = 0; i < 1000; i++) {
var myList = $('.myList');
myList.append('This is list item ' + i);
}
console.timeEnd('create list');

这个例子我故意写了一些效率很低的代码，在接下来几条技巧/建议里，我会说明如何使用这个计时器展示代码的改进。

5.通过暂存减少选择器的使用

jquery选择器让人赞叹，它以难以置信的简单方式选择页面上任何元素，但在其内部，选择器需要做大量的工作，所以如果大量使用选择器，你会发现程序开始变得很慢。

如果你多次地选择同一个元素（例如在一个循环里），你可以只选择它一次并赋给一个变量，再在你的核心代码里使用它。下面这个例子我们通过循环添加元素到一个无序列表里。

for (i = 0; i < 1000; i++) {
var myList = $('.myList');更能描述问题
myList.append('This is list item ' + i);
//译者注：我觉得直接用$('.myList').append('This is list item ' + i)，去掉myList更能说明问题
}

这在我的电脑里用firefox3花费了1066毫秒（想象下如果是IE6将会是多长时间！），这在javascript来说是很慢的。现在我们看看下面的代码，只使用选择器一次：

var myList = $('.myList');
for (i = 0; i < 1000; i++) {
myList.append('This is list item ' + i);
}

只花费了224毫秒，快了4倍多，只是移动了一行代码。

6.减少DOM处理

通过减少插入DOM的次数，我们可以让刚才那个例子运行得更快。DOM插入操作像.append().prepend().after()和.wrap()都相对地更耗费资源，如果运行很多DOM插入处理会让网页变得很慢。

我们需要做的是使用字符串连接建立列表，然后使用函数把列表一次性添加到无需列表上，使用.html()会更快，看看下面的例子：

var myList = $('#myList');
for (i=0; i<1000; i++){
myList.append('This is list item ' + i);
}

在我的电脑里运行需要216毫秒，差不多1/5秒，但如果我们先建立一个字符串，再使用.html()插入，像这样：

var myList = $('.myList');
var myListItems = '';
for (i = 0; i < 1000; i++) {
myListItems += '<li>This is list item ' + i + '</li>';
}
myList.html(myListItems);

用了185毫秒，虽然没有快多少，但还是节省了31毫秒。

7.插入DOM时包含所有内容在单个元素里

嗯，别问我为什么这样做（我一定会有更有经验的程序员可以解释）

上一个例子中我们通过.html()函数插入1000个元素到一个无序列表里。如果我们在插入前将它包含在一个UL标签里，然后将整个UL插入到另外一个标签(一个DIV)里，这样就只插入了一个标签，而不是1000个，这会让程序块很多，像这样：

var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li>This is list item ' + i + '</li>';
}
myListItems += '</ul>';
myList.html(myListItems);

只花费了19毫秒的时间，巨大的改进，比第一个例子快了50倍。

8.尽可能使用ID而不是class

jquery优秀的选择器使通过Class选择元素变得跟通过ID选择元素一样简单，让人比以前更放心大胆地使用class。但事实上最好还是使用ID而不是class，因为使用ID获取元素时，jquery使用了浏览器默认的方法（getElementByID)获取元素，这无需经过遍历元素即可找到所需要的元素，比通过class查找元素更快。有多快？让我们来看看。

我使用了前面的例子，并对它进行小小的改动，让每一个li元素都有class属性，然后通过循环选择每一个元素。

// 创建list
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li class="listItem' + i + '">This is a list item</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
// 每一个元素都选择一次
for (i = 0; i < 1000; i++) {
var selectedItem = $('.listItem' + i);
}

跟我想的差不多，我的浏览器卡住了，它使用了5066毫秒（超过5秒）。现在修改一下代码，给每一个元素一个ID代替class，然后做同样的事：

// 创建list
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li id="listItem' + i + '">This is a list item</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
// 每一个元素都选择一次
for (i = 0; i < 1000; i++) {
var selectedItem = $('#listItem' + i);
}

这段代码只需要61毫秒的时间，差不多快了100倍！

9.给你的选择器定一个范围

默认地，当你像#(“.myDiv”)这样使用一个选择器，页面上所有的DOM元素将会被遍历，去查找符合条件的元素，这将会十分耗资源。

jquery的选择函数提供了第二个参数：

jQuery( expression, context )

通过提供一个上下文参数给选择器，可以让选择的范围缩小在所提供的元素内，不需要遍历整个页面。

为了演示，让我们引用上一个例子的代码，创建1000个元素的无序列表，每个li标签都有class属性，循环选择每一个元素，像上一个例子所看到的，将会花费超过5秒的时间运行这段代码。

var selectedItem = $('#listItem' + i);

然后我为选择器增加了一个上下文参数，让它只在.myList元素里遍历，像这样：

var selectedItem = $('#listItem' + i, $('.myList'));

它仍然使用了3818毫秒的时间，因为选择class还是一个效率低的做法。但这已经比之前快了25%，而且只为选择器添加了一个上下文参数而已。

译者注：我想如果把上面的代码放在一个大页面里执行，效果会很明显。

10.使用jquery链

jquery最酷的特性之一就是它能把函数调用连接在一起，例如，如果你想转换某个元素的class，可以这样写：

$('myDiv').removeClass('off').addClass('on');

如果你像我的话，会在mg游戏平台官方网站jquery的前5分钟就知道这个特性，但jquery链不仅仅是这样。
首先，它可以跨行运行（因为jquery=JavaScript），这意味着你可以像这样简洁地写代码：

$('#mypanel')
.find('TABLE .firstCol')
.removeClass('.firstCol')
.css('background' : 'red')
.append('<span>This cell is now red</span>');

养成使用jquery链的习惯可以减少选择器的使用。

假设你想在某一个元素上执行几个函数，但其中有一个函数通过某种途径改变了元素本身，像这样：

$('#myTable').find('.firstColumn').css('background','red');

上面的代码首先选择了一个table，然后选择table里class为”firstColumn”的单元格填充红色。

假设我们现在想把所有class为”lastColumn”的单元格都填上蓝色。因为我们之前已经用find()函数把所有class不是”firstColumn”的单元格排除了，所以我们要再次使用选择器获取table元素，所以我们就不能使用jquery链了，是不是？其实不是，jquery还有一个end()函数可以让链恢复到未被改变的时的状态，这样就可以继续链接下去，像这样：

$('#myTable')
.find('.firstColumn')
.css('background','red')
.end()
.find('.lastColumn')
.css('background','blue');

创建一个有链接功能的jquery函数比你想象中的还要简单，需要做的只是在函数里修改完元素后返回它：

$.fn.makeRed = function() {
return $(this).css('background', 'red');
}
$('#myTable').find('.firstColumn').makeRed().append('hello');

简单不？

继续阅读：改善你的jquery—25条jquery实用技巧<二>