13、JQuery性能优化

1、使用最新版的jQuery类库

2、使用合适的选择器

$(#id)
使用id来定位DOM元素是最佳的方式，为了提高性能，建议从最近的ID元素开始往下搜索

$("p") , $("div") , $("input")
标签选择器性能也不错，它是性能优化的第二选择。因为jQuery将直接调用本地方法document.getElementsByTagName()来定位DOM元素

$(".class")
建议有选择性的使用

$("[attribute=value]")
对这个利用属性定位DOM元素，本地JavaScript并没有直接实现。这种方式性能并不是很理想。建议避免使用。

$(":hidden")
和上面利用属性定位DOM方式类似，建议尽量不要使用

注意的地方
尽量使用ID选择器
尽量给选择器指定上下文

3、缓存对象

如果你需要在其他函数中使用jQuery对象，你可以把他们缓存在全局环境中

4、数组方式使用jQuery对象

使用jQuery选择器获取的结果是一个jQuery对象。在性能方面，建议使用for或while循环来处理，而不是$.each()

5、事件代理

A、每一个JavaScript事件（如：click、mouseover）都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点很有用。比如，我们要为一个表单绑定这样的行为：点击td后，把背景颜色设置为红色

a、$("#myTable td").click(function(){$(this).css("background","red");});
假设有100个td元素，在使用以上的方式时，绑定了100个事件，将带来性能影响

b、代替这种多元素的事件监听方法是，你只需向他们的父节点绑定一次事件，然后通过event.target获取到点击的当前元素
$("#myTable td").click(function(){$(e.target).css("background","red")});
e.target捕捉到触发的目标

c、在jQuery1.7中提供了一个新的方法on()，来帮助你将整个事件监听封装到一个便利的方法中
$("#myTable td").on("click",'td',function(){$(this).css("background","red");});

B、将你的代码转化成jQuery插件
它能够使你的代码有更好的重用性，并且能够有效的帮助你组织代码

6、使用join()方法来拼接字符串

也许你之前使用+来拼接字符串，现在可以改了。它确实有助于性能优化，尤其是长字符串处理的时候

7、合理使用HTML5和Data属性

A、HTML5的data属性可以帮助我们插入数据，特别是后端的数据交换。jQuery的Data()方法有效利用HTML5的属性
a、例如：
<div id="dl" data-role="page" data-list-value="43" data-options='{"name:""John"}'>

b、为了读取数据，你需要使用如下代码
$("#dl').data("role';//page)
$("#dl').data("lastValue';//43)
$("#dl').data("options';//john)

B、尽量使用原生的JavaScript方法

C、压缩JavaScript代码
一方面使用Gzip；另一方面去除JavaScript文件里面的注释、空白