当前位置：首页 > news >正文

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

news 2026/7/6 4:13:48

在选择时，最好以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的实例所以在性能上也稍胜一筹!