jQuery技术

8个能够有效帮助你提高jQuery代码性能的技巧

字号+ 作者:H5之家 来源:H5之家 2018-02-13 17:08 我要评论( )

jQuery越来越流行了,大家可能也会发现,在浏览网站过程中,越来越多的网站开始使用jQuery来构建以前需要使用flash来实现的超酷动态效果,事实上jQuery已经成为

jQuery越来越流行了,大家可能也会发现,在浏览网站过程中,越来越多的网站开始使用jQuery来构建以前需要使用flash来实现的超酷动态效果,事实上jQuery已经成为前端开发中重要的类库之一,发挥着构建丰富web前端的利器。但是作为一个JS类库,很多人并不是非常清楚如何正确使用jQuery来达到最佳的性能(Peformacne),如果你觉得代码书写对于性能的影响不会那么巨大,那么我只能告诉你,当你使用jQuery开发一个复杂的动画和web应用的话,它有可能成为你性能上的终极噩梦。

在这篇文章中,我们将介绍代码书写中,大家应该需要注意的几个性能问题,希望对于大家在书写高性能的web应用中有帮助,大家在书写jQuery的过程中,尽量注意和避免这些性能的问题,才能写出高质量高性能的web应用,希望大家喜欢这篇文章。谢谢!

选择器Selector的使用

jQuery中的选择器selecor是大家经常使用的强大功能,事实上jQuery提供给我们非常丰富的手段来使用选择器定位DOM元素。但是很少有开发人员会考虑使用不同的选择器来处理性能问题。这里我们将介绍几种常用的选择器,及其它们之间的性能差异。

$("#id")

使用id来定位DOM元素无疑是最佳提高性能方式,因为jQuery底层将直接调用本地方法document.getElementbyId(),如果熟悉javascript的朋友应该了解这个方法将直接通过元素id来返回对应的元素。当然,如果这个方式不能直接找到你需要的元素,那么你可以考虑调用.find()方法。如下:

$("#gbid").find("div")
使用以上方法可以有效的缩小你定位的DOM元素。

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

使用标签名是第二优化选择,因为jQuery将直接调用本地方法document.getElementsByTagname()来定位DOM元素。
$(".class")

使用.class方法对于我们来说稍微复杂些,对于比较新的浏览器例如,IE9,它支持本地方法document.getElementsByClassName(),而对于老的浏览器,例如,IE8或者更早版本来说,不得不使用DOM搜索方式来实现,自然会对于性能产生比较大的影响。所以大家得选择使用。
$("[attribute=value]")

对于利用属性来定位DOM元素,本地javascript方法中并没有直接的实现。所以大都都是使用DOM搜索方式来达到效果,很多现代浏览器支持querySelectorAll()方法,但是不同浏览器的性能还是有区别。总体来说,使用这种方式来定位DOM元素,并不是非常理想。所以为了获得更好的优化效果,你需要尽量避免这个对性能有害的使用方式。
$(":hidden")

和上面使用属性来定位DOM的方式类似,这种伪选择器也同样没有本地js方法来直接实现。而且jQuery需要搜索每一个元素来定位这个选择器,将会对你的应用带来比较大的性能问题。所以大家尽量不要使用,当然,如果你非要使用的话,请先是用find方法定位父元素,然后,再使用这个选择器,这样会帮助你很好的优化性能,如下:

$("#gbdiv").find(":hidden")
以上是一个基本使用选择器的规则,自上而下性能依次下降,如果大家在开发中使用选择器,请遵循以上这个简单的优化性能规则。

当然,可能有朋友觉得的不是非常可信,那么这里我们将使用一个在线工具jsPerf来帮助大家更直观的查看性能区别,如下:

测试用例:

链式调用是jQuery的一个非常不错的特性,它能够帮助你写出非常简洁的代码,主要的思想在于,处理同一个对象的时候,jQuery会返回一个jQuery对象,好处是你可以继续的处理下一个方法。非常典型的应用如下:
$("#gbdiv").hide(); $("#gbdiv").css("color", "#202020"); $("#gbdiv").show();
如果使用链式调用,优化性能如下:

$("#gbdiv").hide().css("color", "#202020").show();
好处在于你不用多次调用$("#gbdiv"),当然,如果你非要这样写,建议你考虑使用缓存方式。但是使用链式调用会使得jQuery代码更加简单并且性能更好。

缓存caching

在书写jQuery代码中,开发人员经常喜欢如下书写:

$("#gbdiv").hide(); $("#gbdiv").css("color", "#202020"); $("#gbdiv").show();
当然,无可厚非,编程中的跳跃思维导致你有可能这样书写代码,但是这样的结果是导致jQuery会在创建每一个选择器的过程中,查找DOM,比较好的优化性能方式是如下书写:

var gbin1=$("#gbdiv"); gbin1.hide(); gbin1.css("color", "#202020"); gbin1.show();
当然本例中,使用链式更加简洁,但是说了一个使用caching的重要,这和Java开发中不要随意的创建对象一样,可以帮助你有效的提高代码运行性能。
测试用例:

事件代理

在jQuery1.7中提供了一个新的方式.on(),这个方法帮助你将整个事件监听封转到一个便利方法中,这里有个例子:

$('#gbin1').find('div').click(function() { $(this).toggleClass('gbin1'); });
这个方法很简单,找到指定ID的div,并且添加或者删除class=gbin1 。

如果你在#gbin1中有1000个div的话,你将绑定1000个事件。这将带来很负面的性能影响,使用.on方法,你可以重构如下,同样帮助你有效的优化性能:

$('#gbin1').on('click','div',function() { $(this).toggleClass('gbin1'); });
测试用例:

循环语句中的DOM操作

使用jQuery可以很方便的添加,删除或者修改DOM节点,但是在一些循环,例如,for(), while()或者$.each()中处理节点,大家得注意一下,这里有个例子:

var data = ["Saab","Volvo","BMW"]; $.each(data, function(i, item){ var newitem='<div>' + item + '</div>'; $("#gbcontainer").append(newitem); });
以上代码中,我们将每一个新添加的tag都作为一个节点添加到容器ID中,实际上jQuery操作节点的成本也不低,更好的方式是尽可能的减少DOM操作,修改代码优化性能如下:

var data = ["Saab","Volvo","BMW"]; tmp = ''; $.each(data, function(i, item){ tmp +='<div>' + item + '</div>'; }); $("#gbcontainer").append(tmp);  
转载:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jquery easyUI from表单支持json

    jquery easyUI from表单支持json

    2018-02-14 08:24

  • Jquery高效编程技巧

    Jquery高效编程技巧

    2018-02-13 16:03

  • jQuery插件treeview点击节点名称不展开、收缩节点

    jQuery插件treeview点击节点名称不展开、收缩节点

    2018-02-13 09:24

  • JQuery UI关闭Dialog使用回调函数会报错。

    JQuery UI关闭Dialog使用回调函数会报错。

    2018-02-13 08:09

网友点评