大家都知道jQuery非常流行,是前端开发中重要的类库之一,也成为构建丰富web前端的利器。但是作为一个javascript类库,很多人并不是很清楚如何正确的使用jQuery来达到最佳的性能,特别是复杂的动画和web应用,它可能成为性能瓶顶。
我将在本篇文章中介绍我们在使用jQuery时,应该注意的一些性能问题,希望对大家开发高性能的web应用有所帮助。
使用最新版本的jQuery类库
JQuery每一个新的版本都会对上一个版本进行BUG修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的jQuery的提高性能。不过你需要注意的是,在更换版本之后,不要忘记测试你的代码,毕竟有时候不是完全向后兼容的。
使用合适的选择器
JQuery提供非常丰富的选择器DOM元素,选择器是开发人员最常使用的功能,但是很少开发人员会考虑使用不同选择器来处理性能问题。下面介绍几种常用选择器,以及他们之间的性能差异。
(1)$(“#id”)
使用id来定位DOM元素是最佳的提高性能的方式,因为jQuery底层将直接调用document.getElementById()。熟悉JavaScript的人都知道这个方法将直接通过元素id来返回对应的元素。当然,如果这个方式不能直接找到你需要的元素,那么你可以考虑调用find()方法。代码如下:
$(“#content”).find(“div”)
使用以上方法可以有效的缩小你定位的DOM元素。为了提高性能,建议从最近的ID元素开始往下搜索。
(2)$(“p”) , $(“div”) , $(“input”)
标签选择器的性能也是不错的,它是性能优化的第二种选择,因为jQuery将直接调用本地方法document.getElementsByTagName()来找到DOM元素。
(3)$(“.class”)
这种方法有可以有选择性的使用。对于IE9以上的浏览器,它支持本地方法document.getElementByClassName(),而对于IE8或者更早的版本,只能使用DOM搜索方式来实现,这会对性能产生较大影响。
(4)$(“[attribute=value]”)
对于属性选择器,本地JavaScript方法中并没有直接的实现,大多都是使用DOM搜索方式来达到效果,很多新版本浏览器支持querySelectorAll()方法,但是不通浏览器间的性能还是有区别。总体来说,使用这种方式来定位DOM元素,性能并不是非常理想。所以为了获得更好的性能优化效果 ,建议在开发中尽量避免这种对性能有害的方式。
(5)$(“:hidden”)
和属性选择器类似,伪选择器也没有直接在本地JavaScript方法中实现,jQuery需要搜索每一个元素来定位这个选择器,这将产生比较大的性能问题看,所以建议大家尽量不要使用。如果坚持使用,先用ID选择器定位父元素,然后再使用,这样对性能优化会有帮助。代码如下:
$(“content”).find(“:hidden”);
注意:尽量使用ID选择器,尽量给选择器指定上下文。
三、缓存对象
在书写jQuery代码中,开发人员最常用如下书写方式:
$(“#ydm input.on”).bind(“click”,function(){ . . .});
$(“#ydm input.on”).css(“border”,”1px dashed yellow”);
$(“#ydm input.on”).css(“background-color”,”orange”);
$(“#ydm input.on”).fadeIn(“slow”);
这样写导致的结果是:jQuery会在创建每一个选择器的过程中,查找DOM,创建多个jQuery对象。比较好的书写方式如下:
var a = a= a=(“#ydm input.on”); //缓存变量
$a.bind(“click”,function(){ . . .});
$a.css(“border”,”1px dashed yellow”);
$a.css(“background-color”,”orange”);
$a.fadeIn(“slow”);
在这个例子中,如果使用链式操作将更加简洁,这里只是为了说明缓存变量的重要性,这和Java开发中不要随意创建对象一样,可以有效的提高代码运行性能。
链式操作改写如下:
var