|
5.使用子查詢
jQuery 允許我們對一個已包裝的對象使用附加的選擇器操作. 因為我們已經在保存了一個父級對象在變量里, 這樣大大提高對其子元素的操作: <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>
例如, 我們可以用子查詢的方法來抓取到亮或不亮的燈, 并緩存起來以備后續(xù)操作. var $traffic_light = $(‘#traffic_light’),
$active_light = $traffic_light.find(‘input.on’),
$inactive_lights = $traffic_light.find(‘input.off’);
提示: 你可以用逗號分隔的方法一次聲明多個局部變量–節(jié)省字節(jié)數 6.對直接的DOM操作進行限制
這里的基本思想是在內存中建立你確實想要的東西，然后更新DOM 。這并不是一個jQuery最佳實踐，但必須進行有效的JavaScript操作 。直接的DOM操作速度很慢。
例如,你想動態(tài)的創(chuàng)建一組列表元素, 千萬不要這么做: var top_100_list = [...], // 假設這里是100個獨一無二的字符串
$mylist = $(‘#mylist’); // jQuery 選擇到 <ul> 元素
for (var i=0, l=top_100_list.length; i<l; i++)
{
$mylist.append(‘<li>’ + top_100_list[i] + ‘</li>’);
}
我們應該將整套元素字符串在插入進dom中之前全部創(chuàng)建好: var top_100_list = [...],
$mylist = $(‘#mylist’),
top_100_li = “”; // 這個變量將用來存儲我們的列表元素
for (var i=0, l=top_100_list.length; i<l; i++)
{
top_100_li += ‘<li>’ + top_100_list[i] + ‘</li>’;
}
$mylist.html(top_100_li);
我們在插入之前將多個元素包裹進一個單獨的父級節(jié)點會更快: var top_100_list = [...],
$mylist = $(‘#mylist’),
top_100_ul = ‘<ul id=”#mylist”>’;
for (var i=0, l=top_100_list.length; i<l; i++)
{
top_100_ul += ‘<li>’ + top_100_list[i] + ‘</li>’;
}
top_100_ul += ‘</ul>’; //關閉無序列表
$mylist.replaceWith(top_100_ul);
如果你做了以上幾條還是擔心有性能問題,那么:
- 試試jquery的 clone() 方法, 它會創(chuàng)建一個節(jié)點樹的副本, 它允許以”離線”的方式進行dom操作, 當你操作完成后再將其放回到節(jié)點樹里.
- 使用 DOM DocumentFragments. 正如jQuery作者所言, 它的性能要明顯優(yōu)于直接的dom操作.
出處：Time Machine
責任編輯：moby
上一頁 jQuery性能優(yōu)化指南 [3] 下一頁 jQuery性能優(yōu)化指南 [5]
◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 4 頁 jQuery性能優(yōu)化指南 [4]
