您的位置：首页 > Web前端 > JQuery

JQuery常用功能的性能优化

2014-04-11 15:55 225 查看



使用最佳选择器

通常比较常用的选择器有以下几个：

1.ID选择器$("#id")

2.标签选择器$("td")

3.类选择器$(".target")

4.属性选择器$("td[target='target']")

5.伪类选择器$("td:hidden")

结论

1.原生方法是最快的方法，如果可能，尽量选择用原生

2.性能顺序：ID选择器>标签选择器>类选择器>属性选择器>伪类选择器

3.ID(getElementById)、标签选择器(getElementsByTagName)都有原生的方法对应，所以很快；类选择器在除了IE5-IE8之外的主流浏览器几乎都有原生方法(getElementsByClassName)，为了兼顾IE6、7、8的性能，避免使用全局的类选择器；

4.属性和伪类选择器非常慢，如非必要，尽量少使用伪类选择器和属性选择器

最佳实践

1.为模块中操作最频繁的元素和根元素设置id，然后缓存；

2.对没有id的元素检索，尽量采用路径最短的祖先元素id作为默认的搜索范围，并采用纯类选择器或者标签选择器；

3.尽量避免复杂的选择器

避免执行全局查找

1
$(
"div.bizHelp"
);
=>

1
$(
"#container"
).find(
".bizHelp"
);
保证查询的路径最短，性能最优，参照第一条；

避免对空结果进行操作

对于数量为0的选择结果，JQuery会执行默认动作，并且不会报错，这会影响程序的性能。

1
var
blank=$(
".blank"
);
//length=0
1
blank.slideUp();
=>

1
blank.length&&blank.slideUp();
避免使用匿名函数

大量的使用匿名函数会对程序的调试、维护以及通过第三方软件来做性能测试增加难度，因此应该尽量避免大量的使用匿名函数

1
obj.click(
function
(){
2
//dosomething...
3
})
=>>

1
var
clickHandler=
function
(){
2
//dosomething...
3
}
4
obj.click(clickHandler)
大循环采用更高效的遍历方式

JQuery提供了$.fn.each()和$.each()两个方法来实现对集合的遍历，除此之外，还可以采用JS原生的for循环、while等来实现迭代：

1
var
list=ul.find(
"li"
),e;
A:

1
var
i=list.length;
2
while
(i--){
3
e=$(list[i])
4
}
B:

1
list.each(
function
(){
2
e=$(
this
);
3
});
C:

1
$.each(list,
function
(){
2
e=$(
this
);
3
});
结论

总体上来说A>C>B

最佳实践

追求极致性能，用原生方法；

循环数量少的话，建议使用$.each()，比较稳定；

优先使用原生属性

很多常用的属性，比如id、name等都被浏览器原生实现，在JQuery中我们有时会用$(this).attr("id")的方式来获取id，这种方法的效率相比原生属性的获取效率而言，非常慢。

1
$.each(list,
function
(){
2
//A
3
var
id=$(
this
).attr(
"id"
);
4
5
//B
6
var
id=
this
.id;
7
})
结论

使用原生的API，可以极大的提高性能

最佳实践

对于id等常用的属性，用原生的属性，不要通过attr去获取；

使用事件委托

给一个列表中所有元素添加点击事件，传统的做法是得到这个列表的JQuery对象:$("li"),然后添加click事件：

1
$(
"li"
).click(
function
(){})
这种方法的在列表数量比较大的时候会有严重的性能问题，应该值得关注。

可以使用JQuery的事件委托机制，能很大程度的降低添加事件监听的消耗和内存的消耗。

A:

1
var
list=$(
"li"
);
//length>1list.click(function(){})
B:

1
$(
"ul"
).delegate(
"li"
,
"click"
,
function
(){})
结论

委托的性能优势是非常绝对的；

最佳实践

对于需要同时给两个以上的同类型元素添加事件时，用方案B来代替A

使用$.data而不是$.fn.data

1
$(elem).data(key,value);$.data(elem,key,value);
后者比前者快近10倍
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航