$.extend($.expr[':'], {
abovethefold: function(el) {
return $(el).offset().top < $(window).scrollTop() + $(window).height();
}
});
var nonVisibleElements = $('div:abovethefold'); // 选择元素

二十、 缓存jQuery对象
将你经常用的元素缓存起来：

复制代码 代码如下:

var header = $('#header');
var divs = header.find('div');
var forms = header.find('form');

当要进行DOM插入时，将所有元素封装成一个元素

二十一、直接的DOM操作很慢。尽可能少的去更改HTML结构。

复制代码 代码如下:

var menu = '';
for (var i = 1; i < 100; i++) {
menu += '

' + i + '

';
}
menu += '';
$('#header').prepend(menu);
// 千万不要这样做：
$('#header').prepend('');
for (var i = 1; i < 100; i++) {
$('#menu').append('

' + i + '

');

}
二十二、 尽管jQuery不会抛出异常，但开发者也应该检查对象

尽管jQuery不会抛出大量的异常给用户，但是开发者也不要依赖于此。jQuery通常会执行了一大堆没用的函数之后才确定一个对象是否存在。所以在对一个作一系列引用之前，应先检查一下这个对象存不存在。
二十三. 使用直接函数，而不要使用与与之等同的函数
为了获得更好的性能，你应该使用直接函数如$.ajax()，而不要使用$.get(),$.getJSON(),$.post()，因为后面的几个将会调用$.ajax()。
二十四、缓存jQuery结果，以备后来使用
你经常会获得一个javasript应用对象——你可以用App.来保存你经常选择的对象，以备将来使用：

复制代码 代码如下:

App.hiddenDivs = $('div.hidden');
// 之后在你的应用中调用：
App.hiddenDivs.find('span');

二十五、采用jQuery的内部函数data()来存储状态
不要忘了采用.data()函数来存储信息：

复制代码 代码如下:

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

二十六、 使用jQuery utility函数
不要忘了简单实用的jQuery的utility函数。我最喜欢的是$.isFunction(), $isArray()和$.each()。
二十七、 为HTML块添加“JS”的class
当jQuery载入之后，首先给HTML添加一个叫”JS”的class

复制代码 代码如下:

$('HTML').addClass('JS');

只有当用户启用JavaScript的时候，你才能添加CSS样式。例如：

复制代码 代码如下:

/* 在css中 */
.JS #myDiv{display:none;}

所以当JavaScript启用的时候，你可以将整个HTML内容隐藏起来，用jQuery来实现你想实现的（譬如：收起某些面板或当用户点击它们时展开）。而当Javascript没有启用的时候，浏览器呈现所有的内容，搜索引擎爬虫也会勾去所有内容。我将来会更多的使用这个技巧。
二十八、推迟到$(window).load
有时候采用$(window).load()比$(document).ready()更快，因为后者不等所有的DOM元素都下载完之前执行。你应该在使用它之前测试它。
二十九、使用Event Delegation
当你在一个容器中有许多节点，你想对所有的节点都绑定一个事件，delegation很适合这样的应用场景。使用Delegation，我们仅需要在父级绑定事件，然后查看哪个子节点(目标节点)触发了事件。当你有一个很多数据的table的时候，你想对td节点设置事件，这就变得很方便。先获得table，然后为所有的td节点设置delegation事件：

复制代码 代码如下:

$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});

三十、使用ready事件的简写
如果你想压缩js插件，节约每一个字节，你应该避免使用$(document).onready()

复制代码 代码如下:

// 也不要使用
$(document).ready(function (){
// 代码
});
// 你可以如此简写：
$(function (){
// 代码
});

三十一、jQuery单元测试
测试JavaSript代码最好的方法就是人来测试。但你可以使用一些自动化的工具如Selenium，Funcunit，QUit，QMock来测试你的代码（尤其是插件）。我想在另外一个专题来讨论这个话题因为实在有太多要说的了。
三十二、 标准化你的jQuery代码
经常标准化你的代码，看看哪个查询比较慢，然后替换它。你可以用Firebug控制台。你也可以使用jQuery的快捷函数来使测试变得更容易些：

复制代码 代码如下:

// 在Firebug控制台记录数据的快捷方式
$.l($('div'));

// 获取UNIX时间戳
$.time();

// 在Firebug记录执行代码时间
$.lt();
$('div');
$.lt();

// 将代码块放在一个for循环中测试执行时间
$.bm("var divs = $('.testdiv', '#pageBody');"); // 2353 on Firebug 3.6

分享到

本文地址：
文章标题：jQuery性能优化的38个建议