十提高jQuery性能的诀窍

1。使用jQuery的最新版本

jQuery的版本更新很快，您应该始终使用最新版本。因为新版本将提高性能，因此有许多新特性。

现在让我们看看jQuery性能的不同版本有多么不同。下面是三种最常见的jQuery选择语句：

$（'元'）

$（'元'，上下文）

Context.find（'元'）

我们使用三1.4.2，1.4.4版本，和jQuery 1.6.2测试多少次看浏览器可以在1秒钟完成，结果如下：
你可以看到，在1.6.2版本运行远远超过两老版本。尤其是第一句，绩效乘以几倍。

其他语句进行测试，如.attr（价值）和瓦迩（），和jQuery性能的新版本比旧版本。

2。使用对选择器

在jQuery中，您可以使用各种选择器选择相同的页面元素。每个选择器的性能不同，您应该了解它们的性能差异。

（1）最快的选择器：id选择器和元素标记选择器

例如，以下语句具有最好的性能：

$（# ID）

$（‘形'）

$（输入的）

当这些选择器时，浏览器的本地方法（如getElementById（））被自动调用在jQuery，所以他们马上执行。

（2）较慢的选择器：类选择器

美元的表现（'。类名）取决于不同的浏览器。

Firefox，Safari，Chrome，和Opera浏览器都有本地方法getelementbyclassname（），所以速度并不慢。然而，ie5-ie8不部署这个方法，所以选择在IE.会比较慢

（3）最慢的选择器：伪类选择器和属性选择器。

先看看这个例子，一个伪类选择器用于查找Web页面中的所有隐藏元素。

$（隐藏）

属性选择器的示例是：

$（{属性=值}）

这两句话是最慢的，因为浏览器没有本土的方法。然而，一些浏览器的新版本增加queryselector（）和querySelectorAll（）方法，所以这样的选择器的性能将大大提高。

最后，不同选择器的性能比较图。

如您所见，id选择器遥遥领先，然后是标记选择器，第三是类选择器，而其他选择器则非常慢。

三.理解的子元素和父元素的关系

以下六个选择器从父元素中选择子元素，您知道哪个速度最快，哪个最慢

美元（儿童，父母）

parent.find美元（'孩子'）

parent.children美元（'孩子'）

$（#母>。孩子）

$（#家长。孩子）

$（'孩子'，$（' #父母））

让我们看一句话。

（1）美元（儿童，父母）

这句话的意思是：一个DOM对象是给定的，然后一个子元素选自it.jquery自动打开此声明为美元。parent.find（''），造成一定的性能损失。它的速度比5%最快10%。

（2）parent.find美元（'孩子'）

这是最快的sentence.the.find（）方法调用浏览器的本地方法（包括，getelementbyname，getelementbytagname，等等），因此它的速度更快。

（3）parent.children美元（'孩子'）

在jQuery，这个语句使用nextSibling（）方法美元。兄弟（）和Javaｓｃｒｉｐｔ，并遍历节点之一。它比最快的慢大约50%。

（4）$（' #母>。孩子）

在jQuery，嘶嘶的引擎是用来处理各种选择器，选择顺序啸引擎是从右到左，所以这句话的第一选择。孩子然后滤出父元素#母一个一个的，导致它比最快的慢了约70%。

（5）$（' #家长。孩子）

该方法与前一种方法相同，但最后只选取直接子元素，可以选择多级子元素，速度较慢，比最快形式慢77%左右。

（6）$（'孩子'，$（' #父母））

在jQuery，声明将把语句到$（' #父母）。找到（'孩子'），23%的速度比最快的。

所以，最好的选择是parent.find美元（孩子）。同时，由于父母通常是美元在前面的操作产生，jQuery将被缓存，所以执行速度进一步加快。

具体例子和比较结果，请参见此处。

4。不要过度使用jQuery

jQuery速度快，无法与原生Javaｓｃｒｉｐｔ方法进行比较，因此有一些地方可以使用本机方法，尽可能避免使用jQuery。

请看下面的示例来绑定一个函数，该函数处理元素的单击事件：

$（a。单击（功能）{（）{

警报（$（this）。Attr（'id'））；

}）；

这个代码就是在点击一个元素，该元素的ID属性就出来了。为了得到这个属性，jQuery必须在排称为两次，第一是美元（本），第二是attr（'id'。

事实上，这种治疗是绝对必要的。写的更正确的方式是直接使用Javaｓｃｒｉｐｔ原生方法叫this.id：

$（a。单击（功能）{（）{

警报（此id）；

}）；

据测试，对this.id速度超过20倍的速度比美元（这）Attr（'id'）。

5。做好缓存工作

选择页面元素是一个非常昂贵的步骤。因此，选择器的数量应该越少越好，并且尽可能地缓存所选的结果，以后易于使用。

例如，以下的写作是一种糟糕的写作方式：

jQuery（#顶部）发现（'p.classa）；

jQuery（#顶部）发现（'p.classb）；

更好的写作方式是：

VaR缓存= jQuery（#顶）；

Cached.find（'p.classa）；

Cached.find（'p.classb）；

根据测试，缓存比没有缓存快2-3倍。

6。采用链条式

jQuery的一个最重要的特性是允许使用链式样式。

$（'div找到（H3）。情商（2），Html（你好）；

在使用链写时，jQuery自动缓存每个步骤的结果，因此比非链式写入速度快，根据测试，链式草图比非缓存非链写入速度快25%左右。

7。事件委托处理（事件委托）

Javaｓｃｒｉｐｔ的事件模型使用冒泡模式，即子元素的事件是冒泡的，直到父元素。

这样，事件的绑定可以大大简化。例如，有一个表（表元素），它包含100个格（TD元素）。现在它需要绑定每个网格上的单击事件（单击）。您需要执行以下命令100次吗

$（TD）Bind（单击，函数（））{

$（这）ToggleClass（点击）；

}）；

答案是不必要的。只要我们将事件绑定到表元素，我们就可以在单击事件之后监听TD元素，该事件将冒泡到父元素表。

因此，这个事件只需要绑定到父元素1次，而不需要在子元素上绑定100次，从而大大提高性能。这称为事件委托处理，即子元素委托父元素处理事件。

有两种特定的写作方式：第一种是使用委托（）方法：

$（表）。委托（TD，点击，函数（））{

$（这）ToggleClass（点击）；

}）；

第二种是活的（）方法：

$（表）。每个（函数（）{）

$（TD，this）。Live（单击，函数（）{（））

$（这）ToggleClass（点击）；
}）；
}）；

这两种写作基本上是等价的。唯一的区别是，委托（）时触发的事件冒泡到父元素的生活..（）指定的触发事件时，气泡的文档根元素，代表（）比稍快。生活除了（）。，这两种方法比传统的优势。Bind（）的方法，那就是，他们是有效的动态插入的元素绑定（）只适用于现有的DOM元素和动态插入的元素无效。

根据测试，委托处理的速度比不委托处理快几倍。在委托的情况下，委托（）比实际（大约）快26%。

8。对DOM结构的较小更改

（1）是改变DOM结构的贵，所以不经常使用。追加（），InsertBefore（）（），and.insetafter。

如果要插入多个元素，先将它们组合起来，然后再插入一次。根据测试，组合插入比插入的速度快近10倍。

（2）如果您想处理大量DOM元素，您应该首先使用.（）（）方法从DOM中提取元素，然后在处理后重新插入文档。

（3）如果您想在DOM元素上存储数据，请不要写如下：

var elem = $（#元素）；

elem.data（键，值）；

应该写如下：

var elem = $（#元素）；

美元。数据（元素、关键、价值）；

据测试，后者是比以前快了近10倍。因为elem.data（）方法在jQuery函数原型对象的定义，而美元。数据（）方法来定义jQuery函数。当它被调用时，它不会从复杂的jQuery对象调用，所以它要快得多（参见下面第十点）。

9。正确处理循环

循环总是一个耗时的操作。如果可以使用复杂的选择器直接选择元素，则不要使用循环逐一标识元素。

Javaｓｃｒｉｐｔ原生循环方法，同时，比jQuery的每个（）方法更快，并且应该优先于本机方法。

10。尽可能少生成jQuery对象

每当你使用一个选择器（如$（' # ID）），产生一个jQuery对象，jQuery对象是一个具有很多属性和方法，将占用大量的资源，巨大的对象。因此，jQuery对象生成尽可能少。

例如，许多jQuery方法有两个版本，一个是jQuery对象，另一个是jQuery函数。下面两个例子是文本（）方法使用的元素的文本：

Var $text = $(#text);

VaR的TS = text.text美元（美元）；

您还可以使用jQuery函数的一个版本：

VaR（#美元美元文本=文本）；

变量$ $ = text（text）；

由于jQuery函数的后一版本不通过jQuery对象操作，所以相对开销更小，速度更快。