JQuery Tips(4)一些关于进步JQuery机能的Tips

现在咱故国已经崛起了..电脑的设置也是直线上升.然则js的机能题目依然不行小觑..尤其在万恶的IE中..js引擎速率原来就慢..假如JS假如再写欠好，客户端多开几个窗口假死必定是司空见惯了.空话不说了，下面说说js机能晋升的一些小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轮回语句。

只管镌汰对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

文章导读：

JQuery Tips（3）-关于$()包装集内元素的改变

转自：http://www.cnblogs.com/CareySon/

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!