jQuery性能优化

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1. 优化选择器执行的速度

优先使用ID与标记选择器

在jQuery中，访问DOM元素的最快方式是通过元素ID号，其次是通过元素的标记。因为前者源于JavaScript中的document.getElementById()，而后者源于document.getElementsByTagName()方法。

这个时候要访问这个div元素，如果有ID号，建议使用ID号直接访问元素，这样的速度是最快的；如果没有ID号，可使用元素标记(tag)访问，其次就是使用类别(class)进行访问。

在jQuery中访问页面元素时，应尽量避免出现下列的访问语法，说明如下：

1）虽然用ID好访问页面中的元素最快，但应避免重复修饰，即避免使用ID号修饰ID号，错误代码如下所示：

var eleName0 = $("#divTip #divShow");

2) 避免使用tag或class来修改ID号，这样的话，代码先执行遍历，后进行匹配，错误代码如下：

var eleName0 = $(".MyClass #divShow");

或

var eleName0 = $("div #divShow");

3) 如果是通过元素的属性访问，应尽量使用tag修饰进行访问，这样可以加快访问速度，正确的代码如下：

var eleName3 = $("div[title='tmp']");

使用jQuery对象缓存

所谓对象缓存，就是在使用jQuery对象时，先尽量使用变量保存对象名，然后，通过变量进行相应的方法操作。

例如：

var objTmp = $("#divTip");//先使用变量进行保存

objTmp.bind("click",function(){ alert("hello!");});

如果想让定义的变量在其他函数中也能使用，可以将该变量定义为全局性的变量，实现代码如下：

window.objPub = {//在全局范围中，定义一个windows对象

objTmp:$("#divTip")

}

那么，通过全局的变量，可以在各个自定义的函数中访问该变量。通过变量，实现DOM元素的获取，显示代码如下：

function TestFun() {

objPub.objTmp.bind("click",function(){alert("hello!");});

}

以上代码最终实现的功能，与定义局部变量一样，但它却可以被不同的自定义函数所调用，也可以当成普通的jQuery对象使用。

在使用变量缓存jQuery对象时，有以下两个地方需要我们在编写代码时注意。

1）无论是局部还是全局性的变量，为了避免与其他变量名相冲突，原则上，请尽量使用“$”符号进行命名，代码如下所示：

window.$objPub = {

$objTmp:$("#divTip")

}

2）如果在同一个DOM对象中有多个对象的操作，应尽量采用链接式的写法优化调用的代码。

给选择器一个上下文

在jQuery中，DOM元素的查找可以通过$(element)方法实现。除此之外，还可以通过$(expression,[context])方法，在指定的范围内查找某个DOM元素，这个方法的优势在于，缩小定位元素的范围，比一般的元素定位更快捷，效果更好。

语法格式如下：

$(expression,[context])

其中，参数expression为需要查找的字符串，可选项[context]为等待查找的DOM元素集、文档或jQuery对象。

$("#div0",".MyCls")

$("#div0")

明显前者的查找速度更快

处理选择器中的不规范元素标志

1.选择器中含有特殊符号

$("#div#2#)

$("#div\\#2\\#")

为了正确获取这些属性中含有特殊字符的DOM元素，必须使用在特殊字符前添加转义符“\\”的方法。

2.选择器中含有空格符号

在元素的属性中除了含有特殊符号外，有时还会含有空格符。空格符在元素的属性中虽不起眼，但如果我们在编写通过选择器获取元素的代码时，选择器中含有空格符与不含有空格符将会出现两种完全不同的结果。

例如：

$(".MyCls :hidden")

$(".MyCls:hidden")

前者为类别为MyCls中的隐藏元素也就是后代中的隐藏元素

后者为隐藏元素中类别为MyCls的元素

优化事件中的冒泡现象

使用stopPropagation()方法来停止事件中的冒泡事件

在元素绑定事件的过程中，还有一个方法target()，通过该方法可以获取触发事件的元素。如果是多个元素触发同一个事件，可以借助target()方法，获取这些元素的父级元素，并将事件绑定到父级元素，通过冒泡现象，扩展到其子级元素中，这在某种程度上，比将事件绑定到每个子级元素执行效果更加优化。

使用data()方法缓存数据

缓存数据无论是在前端页面开发，还是在后台服务器脚本编写，都有十分重要的作用。同样，在jQuery中，也可以通过data()方法将数据缓存，虽然使用局部或全局的变量可以保存数据，但变量并不能进行数据的缓存，而且并不依附于某元素自身；如果使用data()方法，可以针对元素定义数据，在元素中存取数据，从而避免数据被循环引用的风险。根据功能的不同，data()方法有下列几种使用格式：

1）根据元素中的名称定义或返回存储的数据，其调用格式为：

data([name])

其中，可选项参数[name]为字符型，表示存储数据的名称。

2）根据元素中的名称在元素上存储或设置数据，其调用的格式为：

data（name，value）

其中，参数name表示存储数据的名称，value表示将要被存储的数据。

3）除了定义和存储数据外，还可以移除元素中存放的数据，其调用格式为：

removeData(name)

其中，参数name表示将要被移除的元素上的数据名称。

解决jQuery库与其他库的冲突

在通常情况下，由于jQuery库良好的封装性，无论是全局变量（global），还是公用函数，都被无一例外地限定在其固有的默认空间中。基于这样的情况，在一般情况下jQuery库可以与其他的JS库并存，不会发生冲突现象。

jQuery.noConflict()

这个函数的作用是变更的使用权，以确定jQuery库不与其他库相冲突，使用权变更后，就只能使用jquery变量访问jquery对象了。

使用子查询优化选择器性能

在jQuery中，如果要查找一个元素，而这个元素被众多别的元素所包含或嵌套在其中。这时，如果直接使用find()方法进行查找，其操作性能较低。由于jQuery允许在一个集合中附加其他的选择操作，这样的话，我们可以先查找最外层的元素，保存起来，再查找更近一层的元素，进行保存，最后，在最接近的外层中，使用find()方法，查找需要的元素。通过这种方式，可以在本地变量中保存上一级对象，减少选择器性能开销。

减少对DOM元素直接操作

我们知道，DOM元素操作的原理是：先在内容中创建DOM结构，然后，更新现有的DOM结构。如果直接对DOM进行操作，那么，其性能也是很低的，因此，为了减少这种对DOM元素直接操作的次数，有必要在操作前完善大部分的DOM操作，最后通过一次直接操作，更新其DOM结构。

正确区分DOM对象与jQuery对象

DOM对象与jQuery对象的定义

所谓DOM对象，指的是通过传统的JavaScript方法获取的DOM元素对象

所谓jQuery对象，指的是通过jQuery语法包装原始的DOM对象后生成的新对象。jQuery对象在jQuery库中是特有的，只要是jQuery对象，就可以使用jQuery库中的所有方法与事件。

DOM对象与jQuery对象的类型转换

在jQuery中，可以很方便地完成DOM对象与jQuery对象之间的转换。只需调用jQuery中提供的[index]与get(index)方法即可将jQuery对象转换成jQuery对象。DOM对象只要通过jQuery方法$()进行包装，就可以转换成jQuery对象。