js-jQuery性能优化(一)

时间:2021-02-02 20:36:48

来自于《锋利的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之前全部创建好再一次性插入。