js-jQuery性能优化（一）

来自于《锋利的jQuery》

1、使用最新版本的jQuery类库

　　jQuery每一个新的版本都会较上一版本进行BUG修复和一些优化，同时也会包含一些创新，所以建议使用最新版本的jQuery来提高性能。

2、使用合适的选择器

　　①、$("#id")

　　使用id来定位DOM元素无疑是最佳提高性能的方式，因为jQuery底层将直接调用本地方法document.getElementById()。如果这个方法不能直接找到你需要的元素，那么可以考虑调用find()方法。代码如下：

$("#content").find("div")

　　使用以上代码可以有效的缩小定位的DOM元素。为了提高性能，建议从最近的ID元素开始往下搜索。

　　②、$("p"),$("div"),$("input")

　　标签选择器的性能也是不错的，它是性能优化的第二选择。

　　③、$(".class")

　　对于IE9+，将使用本地方法document.getElementByClassName()，而对于较老的浏览器，只能靠使用DOM搜索的方式来实现，这无疑对性能产生较大的影响。

　　④、$("[attribute=value]")

　　对于使用属性来定位DOM元素，本地JS方法中并没有直接地实现，大多都是使用DOM搜索方式来达到效果，很多浏览器支持querySelectorAll()方法，但是不同浏览器间的性能还是有区别。总的来说，使用这种方法来定位DOM元素，性能并不是非常理想。尽量避免。

　　⑤、$(":hidden")

　　jQuery需要搜索每一个元素来定位伪选择器，具有较大的性能问题。如果坚持使用这种方式，请先使用ID选择器定位父元素后再使用该选择器。

总结：1、尽量使用ID选择器。2、尽量给选择器指定上下文。

3、缓存对象

　　jQuery会在创建每一个选择器的过程中，查找DOM，创建多个jQuery对象。可以将多次使用的jQuery对象缓存下来。

　　所以，永远不要让相同的选择器在你的代码里出现多次。

4、循环时的DOM操作

　　在for、while、each中处理节点，应避免多次的DOM操作，比如在<ul>中插入<li>，不要每次循环插入一个<li>，应该将整个元素字符串在插入DOM之前全部创建好再一次性插入。