|
英原文：jquery-performance-rules
翻译：Skyline.xin
之前，我们必要担忧镌汰字节数和哀求次数以及加载次序以使页面加载的更快。现在，我们越来越多的留意到一个影响机能的重要构成部门--CPU操作率。行使 jQuery和其他JavaScript框架，使节点选择和DOM操纵变得越来越轻易，但假如你不警惕行使了一些镌汰赏识器自己要做的事变的一些做法也许 会带来欠好的功效。
1.老是行使#id去探求element.
在jQuery中最快的选择器是ID选择器 ($('#someid')). 这是由于它直接映射为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>
选择button的机能欠好的一种方法：
var traffic_button = $('#content .button');
取而代之的是直接选择button:
var traffic_button = $('#traffic_button');
选择多个元素
在我们接头选择多个元素的时辰，我们真正必要知道的是DOM的遍历和轮回才是机能低下的缘故起因。为了只管镌汰机能丧失， 老是行使最近的父ID去探求。
var traffic_lights = $('#traffic_light input');
2.在Classes前面行使Tags
在jQuery中第二快的选择器就是Tag选择器 ($('head')). 而这是由于它直接映射到JavaScript的getElementsByTagName()要领。
代码
<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>
老是在一个Class前面加上一个tag名字（记得从一个ID传下来）
var active_light = $('#traffic_light input.on');
留意：在jQuery里Class选择器是最慢的一个选择器;在IE中它轮回整个DOM。也许的话只管停止行使它。不要在ID前面加Tags。譬喻，它会由于去轮回全部的<div>元素去探求ID为content的<div>，而导致很慢。
var content = $('div#content');
凭证同样的思绪，从多个ID传下来是冗余的。
var traffic_light = $('#content #traffic_light');
3.缓存jQuery工具
养成生涯jQuery工具到一个变量上（就像上面的例子）的风俗。譬喻，不要这样做：
代码
$('#traffic_light input.on).bind('click', function(){...});
$('#traffic_light input.on).css('border', '3px dashed yellow');
$('#traffic_light input.on).css('background-color', 'orange');
$('#traffic_light input.on).fadeIn('slow');
取而代之，首现生涯jQuery变量到一个当地变量后，再继承你的操纵。
代码
var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');
提醒：行使$前辍暗示我们的当地变量是一个jQuery包集。记着，不要在你的应该措施里呈现一次以上的jQuery一再的选择操纵。
特殊提醒：耽误存储jQuery工具功效。
假如你想在你的措施的其余处所行使jQuery功效工具（result object(s)），可能你的函数要执行多次，要把它缓存在一个全局范畴的工具里。通过界说一个全局容器生涯jQuery功效工具，就可以在其余的函数里引用它。
代码
// Define an object in the global scope (i.e. the window object)
window.$my =
{
// Initialize all the queries you want to use more than once
head : $('head'),
traffic_light : $('#traffic_light'),
traffic_button : $('#traffic_button')
};
function do_something()
{
// Now you can reference the stored results and manipulate them
var script = document.createElement('script');
$my.head.append(script);
// When working inside functions, continue to save jQuery results
// to your global container.
$my.cool_results = $('#some_ul li');
$my.other_results = $('#some_table td');
// Use the global functions as you would a normal jQuery result
$my.other_results.css('border-color', 'red');
$my.traffic_light.css('border-color', 'green');
}
4.更好的操作链
前面的例子也可以这样写：
var $active_light = $('#traffic_light input.on');$active_light.bind('click', function(){...})
.css('border', '3px dashed yellow')
.css('background-color', 'orange')
.fadeIn('slow');
这样可以让我们写更少的代码，使JavaScript更轻量。
5.行使子查询
jQuery应承我们在一个包集上附加其余的选择器。由于我们已经在当地变量里生涯了父工具这样会镌汰往后在选择器上的机能开销。
代码
<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>
譬喻，我们可以操作子查询缓存active和inactive lights以便后头的操纵。
var $traffic_light = $('#traffic_light'),
$active_light = $traffic_light.find('input.on'),
$inactive_lights = $traffic_light.find('input.off');
提醒：可以用逗号离隔一次界说多个当地变量，这样可以节减一些字节。 （编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
