DIV CSS 佈局教程網

jQuery性能優化
編輯:關於JavaScript     

現在jquery應用的越來越多, 有些同學在享受爽快淋漓coding時就將性能問題忽略了,  比如我.  jquery雖在諸多的js類庫中性能表現還算優秀, 但畢竟不是在用原生的javascript開發, 性能問題還是需要引起重視的. 簡單翻譯了一篇相關文章如下:

  1. 總是從ID選擇器開始繼承
  2. 在class前使用tag
  3. 將jquery對象緩存起來
  4. 掌握強大的鏈式操作
  5. 使用子查詢
  6. 對直接的DOM操作進行限制
  7. 冒泡
  8. 消除無效查詢
  9. 推遲到 $(window).load
  10. 壓縮js
  11. 全面掌握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 下一頁
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved