jQuery性能优化与技巧

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

jQuery的每一个新的版本都会较上一版进行Bug修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的jQuery来提高性能,需要注意的是在更换版本之后,要测试代码,毕竟有的时候不是完全向后兼容的。

2、选择合适的选择器

1)$("#id")  id选择器 和 $("p")  标签选择器 是最佳提高性能的方式

使用id选择器来定位DOM是最佳提高性能的方式,如果这个方式不能直接找到需要的元素,可以考虑调用find方法,比如

$("#id").find("div");

2) $("".class) class选择器 是较慢的选择器

比较新的浏览器,例如ie9 它支持本地方法document.getElemntsByTagClassName(),而对于老的浏览器,例如 ie8或者更早版本只能靠使用DOM方式来实现,对性能产生的影响比较大

3) $("[attribute = value]") 属性选择器 和 $(":hidden") 伪类选择器  最慢的选择器

因为这种选择器没有直接在本地JavaScript方法中实现,是使用DOM来实现的,如果必须使用这种方式,可以先使用id选择器来定位父元素,然后再使用该选择器

3、缓存对象

例如  $("#monitor_table").css("width", "60%");

         $("#monitor_table").css("color", "red");

   $("#monitor_table").click(function(){....})

4、当有DOM操作时,将所有元素封装成一个元素

posted @ 2017-10-13 10:21  甜甜宝宝  阅读(134)  评论(0编辑  收藏  举报