如何提高JQuery性能

這篇文章將為大家詳細(xì)講解有關(guān)如何提高JQuery性能，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

如今咱祖國(guó)已經(jīng)崛起了..電腦的配置也是直線上升.可是 js 的性能問(wèn)題依然不可小覷..尤其在萬(wàn)惡的 IE 中..js 引擎速度本來(lái)就慢..如果 JS 如果再寫不好，客戶端多開(kāi)幾個(gè)窗口假死肯定是家常便飯了.廢話不說(shuō)了，下面說(shuō)說(shuō) js 性能提升的一些小 Tips.

在選擇時(shí)，最好以 ID 選擇符作為開(kāi)頭

我想這個(gè)很好理解，因?yàn)?JQuery 內(nèi)部使用 document.getElementByID 方法進(jìn)行 ID 選擇，這種方法比其他所有對(duì) DOM 選擇的方法更快，所以以 $("#") 開(kāi)頭是最好的,比如:

<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>

提供 $() 的上下文

在使用 $() 選擇頁(yè)面元素時(shí)，提供選擇的范圍可以減少選擇的時(shí)間，換句話說(shuō)，讓選擇器只在頁(yè)面的一小片范圍內(nèi)篩選而不是整個(gè)頁(yè)面當(dāng)然會(huì)減少篩選時(shí)間，通過(guò)在 $() 函數(shù)內(nèi)提供第二個(gè)參數(shù)作為上下文可以實(shí)現(xiàn)這一點(diǎn)

<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>

當(dāng)然，在 jquery 定義(或者js函數(shù))事件內(nèi),可以通過(guò) this 來(lái)指代上下文:

<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>

當(dāng)然，上面的例子也可以寫成下面兩種方式：

<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 方法是所有方法中效率最高的

當(dāng)然，如果你是通過(guò) id 選擇符，也就是 $("#..")來(lái)選擇，不需要提供上下文參數(shù).這對(duì)速度沒(méi)有影響

將經(jīng)常用的 JQuery 包裝好的元素進(jìn)行保存

如題，這點(diǎn)比較重要，因?yàn)槭褂?$() 對(duì)頁(yè)面元素進(jìn)行選擇是需要耗費(fèi)時(shí)間的.而保存為變量進(jìn)行使用時(shí)，可以避免這種浪費(fèi)，比如：

<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>

從代碼可以看到，避免多次重復(fù)選擇可以提高性能

盡量少用選擇符

JQuery 的選擇器是面向數(shù)組的，所以在條件允許的情況下盡量少用選擇器，比如：

<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>

可以看出，使用選擇器并用逗號(hào)將被選擇的元素分開(kāi)，并選擇多個(gè)元素不僅讓代碼更加簡(jiǎn)潔，并且通過(guò)減少創(chuàng)建 JQuery 的實(shí)例所以在性能上也稍勝一籌!

在循環(huán)次數(shù)很多時(shí)避免使用 $().each,而使用 for 循環(huán)

使用 $().each 方法讓在進(jìn)行循環(huán)時(shí)，會(huì)讓編程更加輕松，少量的循環(huán)在使用 $().each 時(shí)對(duì)性能的影響可以忽略不計(jì)，但是當(dāng)這個(gè)數(shù)字很大的時(shí)候，對(duì)性能的影響便開(kāi)始變得可觀了.

這個(gè)數(shù)字，我查了下資料，據(jù)說(shuō)是1000以下可以使用 $().each 方法，而這個(gè)數(shù)字如果繼續(xù)增加，則應(yīng)該使用 for 循環(huán)語(yǔ)句。

盡量減少對(duì) DOM 的操作

在頁(yè)面中對(duì) DOM 操作是比較消耗的（比如在頁(yè)面插入或刪除一段文字），把這個(gè)改動(dòng)降至最小是保持性能的最佳實(shí)踐！比如：

<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>

可以看出，第一個(gè)例子對(duì) DOM 修改100次，而第二個(gè)只對(duì) DOM 修改1次，這上面的性能差距是顯而易見(jiàn)的。

可以屏蔽 JQuery 的動(dòng)畫(huà)效果

在某些情況下，如果，可以關(guān)閉 JQuery 動(dòng)畫(huà)，能對(duì)性能進(jìn)行一定提升，屏蔽的方法是：

<script type="text/javascript">

jQuery.fx.off = true;

</script>

如果參數(shù)可以是 JS 對(duì)象，盡量使用對(duì)象

很對(duì) JQuery 插件，或者 JQuery 的 css 和 attr 方法都接受鍵/值 或 js 鍵/值對(duì)象 對(duì)作為參數(shù)，傳遞鍵值對(duì)象可以減少 JQuery 對(duì)象的創(chuàng)建，比如:

<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>

當(dāng)然也可以使用連綴的方式:

<div></div>

<script type="text/javascript">

$("div").css("display", "block").css("background-color", "blue");

</script>

但是這種方式的性能不如上面那種.需要使用兩個(gè)方法，并且需要多生成臨時(shí)對(duì)象.

關(guān)于“如何提高JQuery性能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。