jQuery性能优化

使用合适的选择器

不同的选择器有性能差异，以下为性能从好到坏：

• $("#id")
  使用id来定位无疑是最佳提高性能的方式，因为直接调用js的document.getElementById方法。这个方法直接通过元素id来返回对应元素。
  若直接用id找不到，可以考虑从最近的id元素开始向下搜索：$("#content").find("div").

• $("p"),$("input")
  标签选择器是性能优化的第二选择，因为直接调用js的document.getElementsByTagName（）来定位元素。

• $(".class")
  对于新的浏览器，支持document.getElementsByClassName();而老的浏览器则只能靠DOM搜索实现，对性能产生较大影响。

• $("[attribute = value]")
  对于利用属性查找元素，大多是靠DOM元素搜索。很多现代浏览器支持querySelectorAll()方法，但不同浏览器间性能还是有差别，因此性能不是很理想。

• $(":hidden")
  这种也是通过搜索全部DOM元素实现的，性能不佳。若一定要使用，请先使用id选择器定位父元素然后再使用该选择器。
  $("#content").find(":hidden");
  $("a.button").find(":animated");

综上，
1.尽量使用id选择器；
2.尽量给选择器指定上下文；

缓存变量

每一次创建选择器的时候jQuery都会查找DOM从而创建多个jQuery对象。
最好的做法是将会重复用到的jQuery选择器对象缓存起来：
var input = $("#selector input");

循环时的DOM操作

最好不要很多次修改DOM，可以在拼接好字符串后一次性插入到DOM中。

判断jQuery对象是否存在

if( $("#content").length > 0 )而不是if( $("#content") )

事件代理

每一个js事件默认都会冒泡到父节点，当我们需要给多个元素调用相同函数时，与其给每一个元素绑定事件，可以选择为它们的父元素绑定事件，通过event.target获得发生事件的当前元素即可。
另外，on( )方法能帮助将整个事件监听封装到一个便利方法中。

使用join来拼接字符串

用join方法代替+来拼接字符串。

合理利用h5的data属性

h5的data属性帮助插入数据，特别是前后端的数据交换。如元素中的data-role,data-options等自定义属性，可利用jQuery的data方法获得：$("#d1").data("role")

有的时候使用js原生方法效率更高