|
現(xiàn)在jquery應(yīng)用的越來越多, 有些同學在享受爽快淋漓coding時就將性能問題忽略了, 比如我. jquery雖在諸多的js類庫中性能表現(xiàn)還算優(yōu)秀, 但畢竟不是在用原生的javascript開發(fā), 性能問題還是需要引起重視的. 在twitter上發(fā)現(xiàn)了<jQuery Performance Rules>這篇文章, 簡單的摘譯了一下:
- 總是從ID選擇器開始繼承
- 在class前使用tag
- 將jquery對象緩存起來
- 掌握強大的鏈式操作
- 使用子查詢
- 對直接的DOM操作進行限制
- 冒泡
- 消除無效查詢
- 推遲到 $(window).load
- 壓縮js
- 全面掌握jquery庫
1. 總是從ID選擇器開始繼承
在jquery中最快的選擇器是ID選擇器. 因為它直接來自于Javascript的getElementById()方法. <div id=“content”>
<form method=“post” action=“/”>
<h2>Traffic Light</h2>
<ul id=“traffic_light”>
<li><input type=“radio” class=“on” name=“l(fā)ight” value=“red” /> Red</li>
<li><input type=“radio” class=“off” name=“l(fā)ight” value=“yellow” /> Yellow</li>
<li><input type=“radio” class=“off” name=“l(fā)ight” value=“green” /> Green</li>
</ul>
<input class=“button” id=“traffic_button” type=“submit” value=“Go” />
</form>
</div>
像這樣選擇按鈕是低效的: var traffic_button = $(‘#content .button’);
用ID直接選擇按鈕效率更高:
var traffic_button = $(‘#traffic_button’);
選擇多個元素
提到多元素選擇其實是在說DOM遍歷和循環(huán), 這些都是比較慢的東西.為了提高性能, 最好從就近的ID開始繼承.
var traffic_lights = $(‘#traffic_light input’);
出處：Time Machine
責任編輯：moby
上一頁 下一頁 jQuery性能優(yōu)化指南 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 jQuery性能優(yōu)化指南 [1]
第 2 頁 
