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

📅 2026/7/6 4:13:48 👁️ 阅读次数 📝 编程学习
JQuery Tips(4)----一些关于提高JQuery性能的Tips

在选择时,最好以ID选择符作为开头

我想这个很好理解,因为JQuery内部使用document.getElementByID方法进行ID选择,这种方法比其他所有对DOM选择的方法更快,所以以$("#")开头是最好的,比如:

<div id="a"> <div class="b"> <div class="c"> <div class="d"></div> </div> </div> </div> <script type="text/javascript"> $(".b .c .d")//slow one $("#a .b .c .d")//fast one </script>
提供$()的上下文

在使用$()选择页面元素时,提供选择的范围可以减少选择的时间,换句话说,让选择器只在页面的一小片范围内筛选而不是整个页面当然会减少筛选时间,通过在$()函数内提供第二个参数作为上下文可以实现这一点

<div id="test"> <div class="inner">hi</div> </div> <script type="text/javascript"> alert($(".inner", document.getElementById("test")).text());//increase the speed by provide context alert($(".inner").text());//traverse all the element so that is slower than above </script>

当然,在jquery定义(或者js函数)事件内,可以通过this来指代上下文:

<div id="test"> <div class="inner">hi</div> </div> <script type="text/javascript"> $("#test").click(function() { var text = $(".inner", this).text(); //this means $("#test") alert(text);//alert hi }); </script>

当然,上面的例子也可以写成下面两种方式:

<div id="test"> <div class="inner">hi</div> </div> <script type="text/javascript"> alert($("#test .inner").text()); //method 1 alert($("#test").find(".inner").text());//method 2 and it was best one </script>

其中利用find方法是所有方法中效率最高的

当然,如果你是通过id选择符,也就是$("#..")来选择,不需要提供上下文参数.这对速度没有影响

将经常用的JQuery包装好的元素进行保存

如题,这点比较重要,因为使用$()对页面元素进行选择是需要耗费时间的.而保存为变量进行使用时,可以避免这种浪费,比如:

<ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> <script type="text/javascript"> for (i = 0; i < $("ul li").length; i++) {//very bad,select $("ul li") so many times,waste a lot of time alert($("ul li")[i].innerHTML);//same here,very bad } var $li = $("ul li"); for (i = 0; i < $li.length; i++) {//good one,only selct $("ul li") once alert($li[i].innerHTML); //same here,good } </script>

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

尽量少用选择符

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循环语句。