免費AI編程助手
如今咱祖國已經(jīng)崛起了..電腦的配置也是直線上升.可是 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>
提供 $() 的上下文
在使用 $() 選擇頁面元素時，提供選擇的范圍可以減少選擇的時間，換句話說，讓選擇器只在頁面的一小片范圍內篩選而不是整個頁面當然會減少篩選時間，通過在 $() 函數(shù)內提供第二個參數(shù)作為上下文可以實現(xià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>
當然，在 jquery 定義(或者js函數(shù))事件內,可以通過 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 選擇符，也就是 $("#..")來選擇，不需要提供上下文參數(shù).這對速度沒有影響
將經(jīng)常用的 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 的選擇器是面向數(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>
可以看出，使用選擇器并用逗號將被選擇的元素分開，并選擇多個元素不僅讓代碼更加簡潔，并且通過減少創(chuàng)建 JQuery 的實例所以在性能上也稍勝一籌!
在循環(huán)次數(shù)很多時避免使用 $().each,而使用 for 循環(huán)
使用 $().each 方法讓在進行循環(huán)時，會讓編程更加輕松，少量的循環(huán)在使用 $().each 時對性能的影響可以忽略不計，但是當這個數(shù)字很大的時候，對性能的影響便開始變得可觀了.
這個數(shù)字，我查了下資料，據(jù)說是1000以下可以使用 $().each 方法，而這個數(shù)字如果繼續(xù)增加，則應該使用 for 循環(huán)語句。
盡量減少對 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>
如果參數(shù)可以是 JS 對象，盡量使用對象
很對 JQuery 插件，或者 JQuery 的 css 和 attr 方法都接受鍵/值 或 js 鍵/值對象 對作為參數(shù)，傳遞鍵值對象可以減少 JQuery 對象的創(chuàng)建，比如:
<div></div>
<script type="text/javascript">
$("div").css("display", "block");
$("div").css("background-color", "blue")
//slow,because it create more Jquery object
//fast,only create one object
</script>
當然也可以使用連綴的方式:
<div></div>
<script type="text/javascript">
$("div").css("display", "block").css("background-color", "blue");
</script>
但是這種方式的性能不如上面那種.需要使用兩個方法，并且需要多生成臨時對象.
以上都是一些對 JQuery 性能提升的小 Tips
推薦好課：jQuery微課、jQuery從入門到精通
