JQuery性能优化

一：不要每次都在循环中访问数组的 <code>length</code> 属性，应在循环开始之前就将其缓存：

二:在循环外执行 append 操作

直接操作 DOM 是非常耗费性能的，尤其不要在循环中直接操作 DOM：

避免做重复的事情。如果你一直在做重复的事情，那么就可能出问题了：

 四：警惕匿名函数

匿名函数满天飞是很痛苦的事情，它们难以调试、维护、测试或者复用，应尽可能的对函数命名并将其封装在对象中，实施有效的管理：

 五：选择器的优化

随着越来越多的浏览器支持 <code>document.querySelectorAll()</code>，选择器的重担已经慢慢转移给浏览器了，但还是有一些技巧需要注意：

优先并尽可能地使用 ID 选择器：

六：使用 <code>$.fn.find</code> 的方式更快，因为在 <code>$.fn.find</code> 之前的选择器并没有使用 jQuery 自带的 Sizzle 选择器引擎，而是使用了浏览器 <code>document.getElementById()</code> 方法，浏览器原生的方法自然更快。

使用组合选择器时，尽可能使右端更明确，而左端不尽量不明确：

七：尽量在选择器右端使用 <code>tag.class</code>，而左端尽可能只使用 <code>tag</code> 或者 <code>.class</code>。

避免过度具体：

八：简洁的 DOM 结构也有助于提升选择器的性能，因为选择器可能少走几层弯路去寻找那些元素。

尽量避免使用通配符，任何显式或隐式的使用通配符，都会降低选择器的性能：

 九：使用事件代理

事件代理允许将一个事件绑定到某个容器上（例如一个无序列表 <code>ul</code>），而不是绑定到容器内所有元素上（例如列表元素 <code>li</code>）。虽说 <code>$.fn.live</code> 和 <code>$.fn.delegate</code> 都是将事件绑定到容器上，但是应尽可能是用 <code>$.fn.delegate</code>，毕竟其明确的上下文（相较于 <code>$.fn.live</code> 的上下文是<code>document</code>）要小得多，避免了很多不必要的过滤。

除了性能方面的提升，如果给绑定了事件的容器内添加新元素，那么这些新元素就无须再次绑定事件了，这也是个优点。

DOM 操作是比较慢的，所以应尽量避免直接操作 DOM。jQuery 在其 1.4 版中引入了 <code>$.fn.detach</code>方法，可以将元素从 DOM 中卸载出来然后进行操作，操作好了之后再添加到 DOM 中：

当使用 <code>$.fn.css</code> 为超过 20 个元素修改样式时，应考虑直接在页面中添加 <code>style</code> 标签，据说性能可提升 60%。

将 <code>$.data</code> 应用于 DOM 元素上，比直接在选择器上调用 <code>$.fn.data</code> 要快 10 倍。当然，前提是要先明白 DOM 元素和 jQuery 结果集之间的区别。

jQuery 不会主动告诉你，你正在一个空白的结果集上运行代码 – 而且执行过程中并未出错。所以有时候再执行代码之前，需要先判断一下结果集是否为空：　　

这种方法特别适用于 jQuery UI 方面，因为即使结果集中不包含任何元素，其开销也会很大。

可以在一条语句中定义多个变量：

 　　在自执行函数中，变量甚至可以不用定义：

 条件判断：