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之前全部创建好再一次性插入。