jQuery 性能優(yōu)化指南（1）

2024-05-06 14:15:24

字體：大中小

供稿：網(wǎng)友

1，總是從ID選擇器開始繼承

在jQuery中最快的選擇器是ID選擇器，因?yàn)樗苯觼碜杂贘avaScript的getElementById()方法。
例如有一段HTML代碼：

代碼如下:
<div id="content">
<form method="post" action="#">
<h2>交通信號燈</h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> 紅色</li>
<li><input type="radio" class="off" name="light" value="yellow" /> 黃色</li>
<li><input type="radio" class="off" name="light" value="green" /> 綠色</li>
</ul>
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>

如果采用下面的選擇器，那么效率是低效的。
var traffic_button = $("#content .button");

因?yàn)閎utton已經(jīng)有ID了，我們可以直接使用ID選擇器。如下所示：
var traffic_button = $("#traffic_button");

當(dāng)然這只是對于單一的元素來講。如果你需要選擇多個(gè)元素，這必然會(huì)涉及到 DOM遍歷和循環(huán)，
為了提高性能，建議從最近的ID開始繼承。
如下所示：
var traffic_lights = $("#traffic_light input");

2，在class前使用tag(標(biāo)簽名)

在jQuery中第二快的選擇器是tag(標(biāo)簽)選擇器( 比如：$("head") )。
跟ID選擇器累時(shí)，因?yàn)樗鼇碜栽膅etElementsByTagName() 方法。

繼續(xù)看剛才那段HTML代碼：

代碼如下:
<div id="content">
<form method="post" action="#">
<h2>交通信號燈</h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> 紅色</li>
<li><input type="radio" class="off" name="light" value="yellow" /> 黃色</li>
<li><input type="radio" class="off" name="light" value="green" /> 綠色</li>
</ul>
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>

比如需要選擇紅綠單選框，
那么可以使用一個(gè)tag name來限制(修飾)class ，如下所示：
var active_light = $("input.on");
當(dāng)然也可以結(jié)合就近的ID，如下所示：
var active_light = $("#traffic_light input.on");

在使用tag來修飾class的時(shí)候，我們需要注意以下幾點(diǎn)：
（1）不要使用tag來修飾ID，如下所示：
var content = $("div#content");
這樣一來，選擇器會(huì)先遍歷所有的div元素，然后匹配#content。
（好像jQuery從1.3.1開始改變了選擇器核心后，不存在這個(gè)問題了。暫時(shí)無法考證。）

（2）不要畫蛇添足的使用ID來修飾ID，如下所示：
var traffic_light = $("#content #traffic_light");

注：如果使用屬性選擇器，也請盡量使用tag來修飾，如下所示：
$('p[row="c3221"]').html();而不是這樣：$('[row="c3221"]').html();

上一篇：jQuery 性能優(yōu)化指南（2）

下一篇：javascript 貪吃蛇(詳細(xì)注釋版)