提高jQuery性能的十个技巧

1.使用最新版本的jQuery。jQuery的版本更新很快，所以您应该总是使用最新的版本。因为新版本将提高性能，所以有许多新功能。让我们看看不同版本的jQuery之间的性能差异。下面是三个最常见的jQuery选择语句：$('。elem') $('。elem '，context) context.find ' '。elem’)。我们使用三个版本的jQuery 1.4.2、1.4.4和1.6.2来测试浏览器在一秒钟内可以执行多少次。结果如下：。

可以看出，1.6.2版本的运行次数远远超过了两个老版本。尤其是第一种说法，性能提高了好几倍。其他语句的测试，例如。attr(“值”)和。val()，也表明新版本的jQuery比旧版本的表现更好。2.使用成对选择器在jQuery中，可以使用多种选择器来选择同一个页面元素。每个选择器的性能是不同的，所以您应该知道它们的性能差异。(1)最快的选择器：id选择器和元素标签选择器。例如，以下语句的性能最好：$(“# id”)$(“form”)$(“input”)当遇到这些选择器时，jQuery会自动调用浏览器的本机方法(如getElementById())，因此它们的执行速度很快。(2)慢选择器：类选择器$('的性能。类名称)取决于不同的浏览器。火狐、Safari、Chrome和Opera都有原生方法getElementByClassName()，所以速度不慢。但是IE5-IE8都没有部署这个方法，所以这个选择器在IE中会比较慢。(3)最慢的选择器：伪类选择器和属性选择器。为了找出网页中所有隐藏的元素，我们需要一个伪类选择器：$ (': hidden ')属性选择器的例子是：$ ('[attribute=value]')，这是最慢的语句，因为浏览器没有本机方法。但是，一些新版本的浏览器增加了querySelector()和querySelectorAll()方法，这将大大提高这类选择器的性能。最后是不同选择器的性能对比图。

如您所见，标识选择器遥遥领先，然后是标签选择器，第三个是类选择器。所有其他选择器都非常慢。3.了解子元素和父元素之间的关系。以下六个选择器都从父元素中选择子元素。你知道哪个最快哪个最慢吗？$ ('.child '，$ parent) $ parent.find ' .child') $ parent.children('。child)$(“# parent . child”)$(“# parent . child”)$(”。子代'，$ ('# parent。(1) $ ('.这个语句意味着给定一个DOM对象，然后从中选择一个子元素。JQuery会自动将这个语句转换成$。$.parent.find('child ')，这将导致一些性能损失。它比最快的形式慢5%-10%。(2) $ parent。查找('。child’)是最快的语句。那个。find()方法调用浏览器的本机方法(getElementById、getElementByName、getElementByTagName等)。)，所以比较快。(3)语句$ parent。孩子们。child’)在jQuery内部，它将使用$。sibling()和javascript的nextSibling()方法来逐个遍历节点。它比最快的形式慢大约50%。(4) $ ('# parent。child’)jquery在内部使用Sizzle引擎来处理各种选择器。Sizzle引擎的选择顺序是从右到左，所以这个语句选择。子元素，然后逐个过滤掉父元素#parent，这导致它比最快的表单慢70%左右。(5) $ ('# parent。child’)这个语句与上一个语句相同。但是前一个只选择直接子元素，这个可以选择多级子元素，所以速度比较慢，比最快的形态慢77%左右。(6) $ ('.child '，$ ('# parent')) jquery在内部将此语句转换为$ ('# parent ')。查找('。child ')，比最快的形式慢23%。因此，最好的选择是$ parent.find('。child’)。而且由于$parent总是在前一个操作中生成，jQuery会缓存它，进一步加快了执行速度。具体例子和对比结果，请看这里。4.不要过度使用jQuery。无论jQuery有多快，都比不上原生的javascript方法。因此，当有本机方法可以使用时，尽量避免使用jQuery。请参见下面的示例，为元素A绑定一个用于处理点击事件的函数：$ ('a ')。单击(function () {alert ($ (this))。attr(' id ')；});这段代码意味着点击元素A后，弹出元素的id属性。要获得这个属性，必须连续调用jQuery两次，第一次是$(this)，第二次是attr ('id ')。其实这种治疗是完全没有必要的。更正确的书写方式是直接使用javascript原生方法并调用this.id: $ ('a ')。单击(function(){ alert(this . id))；});根据测试，this.id比$ (this)快20多倍。attr ('id ')。5.缓存和选择某个网页元素是一个昂贵的步骤。所以选择器要尽量少用，选择的结果要尽量缓存，方便以后重复使用。比如下面写的不好：jquery ('# top ')。find(' p . a类')；jQuery('#top ')。find(' p . CLaSS b ')；更好的写法是：var cached=jquery(' # top ')；cached . find(' p . class a ')；cached . find(' p . class b ')；根据测试，缓存比不缓存快2-3倍。6.使用链写jQuery的一个特点是允许使用链写。$(“div”)。查找(' h3 ')。等式(2)。html(‘Hello’)；当采用链写时，jQuery会自动缓存每一步的结果，因此比非链写更快。根据测试，链写比非链写(没有缓存)快25%左右。7.事件委托(Event delegate)JavaScript采用“冒泡”模式，也就是说子元素的事件会一步步“冒泡”起来，成为父元素的事件。这样，事件的绑定可以大大简化。

例如，有一个表格(表格元素)包含100个网格(td元素)。现在需要将点击事件绑定到每个网格。是否需要执行以下命令100次？$(“TD”)。bind("click ")，function(){$(this)。toggleClass(“点击”)；});答案是否定的，我们只需要把这个事件绑定到table元素上，因为td元素的click事件发生后，这个事件会在父元素表上“冒泡”，从而被监控。因此，这个事件只需要绑定到父元素一次，不需要绑定到子元素100次，大大提高了性能。这称为事件的“委托处理”，即子元素“委托”父元素来处理事件。有两种具体的写作方式。第一种方法是。delegate (): $(“表”)。委托(“TD”、“click”、function () {$ (this))。切换类别(“点击”)；});第二种方法是。live (): $(“表”)。每个(函数(){ $(“TD”，这个)。live ("click "，function () {$ (this))。切换类别(“点击”)；});});两种写法基本相当。唯一不同的是。当事件冒泡到指定的父元素时，将触发delegate()，而。live()是在事件冒泡到文档的根元素后触发的，所以。delegate()比。live()。此外，与传统相比。bind()方法，这两种方法还有另一个优点，那就是它们对于动态插入的元素也是有效的.bind()仅对现有的DOM元素有效，对动态插入的元素无效。根据测试，委托处理比非委托处理快几倍。在委托处理的情况下。delegate()比。live()。8.对DOM结构的更改较少(1)更改DOM结构非常昂贵，所以不要使用。append()，insertBefore()和。insetAfter()频繁。如果要插入多个元素，请先将其合并，然后立即插入。根据测试，合并插入比不合并插入快近10倍。(2)如果要大量处理一个DOM元素，应该首先使用。方法将元素从DOM中取出，然后将其重新插入到文档中。根据测试，使用。detach()方法比不使用它快60%。(3)如果要在DOM元素上存储数据，不要这样写：varelem=$(' # elem ')；elem.data(键，值)；而是写：varelem=$(' # elem ')；$.数据(elem，key，value)；根据测试，后者的写作速度比前者快近10倍。elem.data()方法是在jQuery函数的原型对象上定义的，而$。data()方法是在jQuery函数上定义的，所以调用的时候要快很多。(见下文第10点。) 9.正确处理循环总是一项耗时的操作。如果可以用复杂的选择器直接选择元素，就不应该使用循环，逐个识别元素。和while的Javascript本机循环方法比jQuery的更快。每个()方法，所以应该首先使用本机方法。10.尽可能少地生成jQuery对象。每次使用选择器(如$ ('# id '))时，都会生成一个jQuery对象。JQuery对象是一个庞大的对象，有很多属性和方法，会占用很多资源。因此，尽可能少地生成jQuery对象。例如，许多jQuery方法有两个版本，一个用于jQuery对象，另一个用于jQuery函数。下面两个示例都使用text()方法，它们都提取了元素的文本。您可以使用jQuery对象的版本：var $ text=$(" # text ")；var $ ts=$ text . text()；您也可以使用jQuery函数的版本：var $ text=$(" # text ")；var $ts=$。文本($ text)；后一版本的jQuery函数不通过jQuery对象进行操作，因此开销相对较低，速度较快。