JQuery Tips(4)－－－－一些关于提高JQuery性能的Tips

核心提示： 从代码可以看到，避免多次重复选择可以提高性能:-)尽量少用选择符JQuery的选择器是面向数组的，JQuery Tips(4)－－－－一些关于提高JQuery性能的Tips(3)，所以在条件允许的情况下尽量少用选择器，比如：<divid="Div0"></d

从代码可以看到，避免多次重复选择可以提高性能:-)

尽量少用选择符

JQuery的选择器是面向数组的，所以在条件允许的情况下尽量少用选择器，比如：

<div　id="Div0"></div>　
<div　id="Div1"></div>　
<div　id="Div2"></div>　
　　<script　type="text/javascript">　
　　　　$("#Div0").slideDown("slow");　
　　　　$("#Div1").slideDown("slow");　
　　　　$("#Div2").slideDown("slow");//slow　
　
　　　　$("Div0,Div1,Div2").slideDown("slow");//fast　
　　</script>

可以看出，使用选择器并用逗号将被选择的元素分开，并选择多个元素不仅让代码更加简洁，并且通过减少创建JQuery的实例所以在性能上也稍胜一筹!

在循环次数很多时避免使用$().each,而使用for循环

使用$().each方法让在进行循环时，会让编程更加轻松，少量的循环在使用$().each时对性能的影响可以忽略不计，但是当这个数字很大的时候，对性能的影响便开始变得可观了.

这个数字，我查了下资料，据说是1000以下可以使用$().each方法，而这个数字如果继续增加，则应该使用for循环语句。

尽量减少对DOM的操作

在页面中对DOM操作是比较消耗的（比如在页面插入或删除一段文字），把这个改动降至最小是保持性能的最佳实践！比如：

　　<ul　id="test">　
　　</ul>　
　　<script　type="text/javascript">　
　　　　var　$list　=　$("#test");　
　　　　for　(i　=　1;　i　<　101;　i++)　{　
　　　　　　$list.append("<li>Item"　+　i　+　"</li>");　
　　　　}　//very　bad,change　dom　100　times　
　
　　　　var　listItem　=　"　";　
　　　　for　(j　=　1;　j　<　101;　j++)　{　
　　　　　　listItem　+=　"<li>Item"　+　j　+　"</li>";　
　　　　}　
　　　　$list.html(listItem);　
　　　　//good　practice,only　modify　dom　once　
　　　　　
　　</script>

可以看出，第一个例子对DOM修改100次，而第二个只对DOM修改1次，这上面的性能差距是显而易见的。

可以屏蔽JQuery的动画效果

在某些情况下，如果，可以关闭JQuery动画，能对性能进行一定提升，屏蔽的方法是：

　　<script　type="text/javascript">　
　　　　jQuery.fx.off　=　true;　
　　</script>

如果参数可以是JS对象，尽量使用对象

很对JQuery插件，或者JQuery的css和attr方法都接受键/值 或 js键/值对象 对作为参数，传递键值对象可以减少JQuery对象的创建，比如:

<div></div>　
　　<script　type="text/javascript">　
　　　　$("div").css("display",　"block");　
　　　　$("div").css("background-color",　"blue")　
　　　　//slow,because　it　create　more　Jquery　object　
　
　　　　$("div").css({　"display":　"block",　"background-color":　"blue"　});　
　　　　//fast,only　create　one　object　
　　</script>

当然也可以使用连缀的方式:

<div></div>　
　　<script　type="text/javascript">　
　　　　$("div").css("display",　"block").css("background-color",　"blue");　
　　　　　
　　</script

但是这种方式的性能不如上面那种.需要使用两个方法，并且需要多生成临时对象.

编缉推荐阅读以下文章

• JQuery Tips（3）----关于$()包装集内元素的改变
• JQuery Tips(2)----关于$()包装集你不知道的
• JQuery Tips(1)----关于$.Ready()