現在jquery應用的越來越多, 有些同學在享受爽快淋漓coding時就將性能問題忽略了, 比如我. jquery雖在諸多的js類庫中性能表現還算優秀, 但畢竟不是在用原生的javascript開發, 性能問題還是需要引起重視的. 簡單翻譯了一篇相關文章如下:
- 總是從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=“light” value=“red” /> Red</li>
<li><input type=“radio” class=“off” name=“light” value=“yellow” /> Yellow</li>
<li><input type=“radio” class=“off” name=“light” 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遍歷和循環, 這些都是比較慢的東西.為了提高性能, 最好從就近的ID開始繼承.
var traffic_lights = $(‘#traffic_light input’);
上一頁
12 3 4 5 6 下一頁