jQuery提升性能的代码规范

jQuery提升性能的代码规范

1. 总是从#id继承
2. Class前加tag名
3. 缓存jQuery对象
4. 善于使用jQuery连缀的写法
5. 使用子查询
6. 尽量减少直接 操作(Manipulation)DOM
7. 使用时间委托(别名.冒泡)
8. 消除无用的查询
9. 延迟加载到 $(window).load

1. 总是从#id继承

jQuery最快的选择器是ID ($('#someid')). 因为直接对应JavaScript方法,?getElementById().

看看class是怎么选的 ($('sometag.someclass')).

function getElementsByClassName(n) {    var el = [],        _el = document.getElementsByTagName('*');    for (var i=0; i<_el.length; i++ ) {        if (_el[i].className == n ) {            el[el.length] = _el[i];        }    }    return el;}
?

选择单个元素

<div id="content"><form method="post" action="/"><h2>Traffic Light</h2><ul id="traffic_light"><li><input type="radio" name="light" value="red" /> Red</li><li><input type="radio" name="light" value="yellow" /> Yellow</li><li><input type="radio" name="light" value="green" /> Green</li></ul><input id="traffic_button" type="submit" value="Go" /></form></div>
?

慢的写法:

var traffic_button = $('#content .button');
?

直接选中按钮更快:

var traffic_button = $('#traffic_button');
?

选择多个元素

多个元素的选择，就是DOM的遍历和循环，这种实现方式比较慢。为了优化性能，应该总是从最近的带ID的父元素继承:

var traffic_lights = $('#traffic_light input');
?

2. Class前加tag名

jQuery中第二快的是tag选择器 ($('head')).同样，也是对应一个纯粹的JS方法，?getElementsByTagName()

<div id="content"><form method="post" action="/"><h2>Traffic Light</h2><ul id="traffic_light"><li><input type="radio" name="light" value="red" /> Red</li><li><input type="radio" name="light" value="yellow" /> Yellow</li><li><input type="radio" name="light" value="green" /> Green</li></ul><input id="traffic_button" type="submit" value="Go" /></form></div>
?

应该在class前都加上tag(最好继承自一个ID):

var active_light = $('#traffic_light input.on');
?

Note: class选择器是jQuery中效率最低的选择器；在IE下他遍历整个DOM. 尽各种可能避免这么写.?绝不能在ID前加tag名。

如下，因为它会先遍历所有的<div>?元素，匹配id为‘content’ :

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');
?

应该是, 先用局部变量保存对象，再进行其他操作:

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');
?

Tip: 既然我们使用的是jQuery库，通常使用$作为标志，变量以$开头。?记住,?绝不使用同样的jQuery选择器?超过一次

Bonus Tip 为以后的使用保存jQuery结果

如果你想再程序的其他地方使用jQuery的结果，或者函数不止一次执行，缓存到一个全局范围的对象中 .

通过定义一个全局变量，可以在其他函数中调用它:

//定义一个全局变量 (比如 window 对象)window.$my ={// 初始化多次使用的条件head : $('head'),traffic_light : $('#traffic_light'),traffic_button : $('#traffic_button')};function do_something(){// 在这里引用保存的变量var script = document.createElement('script');$my.head.append(script);// 函数中，可以继续添加全局的jQuery变量$my.cool_results = $('#some_ul li');$my.other_results = $('#some_table td');// 仍然可以使用jQuery连缀$my.other_results.css('border-color', 'red');$my.traffic_light.css('border-color', 'green');}
?

4. 善于使用jQuery连缀的写法

上面的代码也可以写成这样:

var $active_light = $('#traffic_light input.on');$active_light.bind('click', function(){...}).css('border', '3px dashed yellow').css('background-color', 'orange').fadeIn('slow');
?

这样做的好处是更少更简洁的代码.

5. 使用子查询

jQuery能在一个集合中继续使用选择器.这样减少了性能开销，因为已经将父元素保存在变量中。

<div id="content"><form method="post" action="/"><h2>Traffic Light</h2><ul id="traffic_light"><li><input type="radio" name="light" value="red" /> Red</li><li><input type="radio" name="light" value="yellow" /> Yellow</li><li><input type="radio" name="light" value="green" /> Green</li></ul><input id="traffic_button" type="submit" value="Go" /></form></div>
?

例如，我们可以先查询和缓存父元素，真正使用的是它的两个子元素.

var $traffic_light = $('#traffic_light'),$active_light = $traffic_light.find('input.on'),$inactive_lights = $traffic_light.find('input.off');
?

Tip: 你可以同时声明多个局部变量，用逗号分隔，节约敲键盘的次数!

6. 尽量减少直接?操作DOM

基于的思想是，需要保存在内存中的到底是什么，?再?更新 DOM. 这不是一个jQuery的最佳实践，但却是最有效的js代码.?

直接操作DOM元素十分缓慢. 例如，你需要动态创建列表元素，别这么做:

var top_100_list = [...], // assume this has 100 unique strings$mylist = $('#mylist'); // jQuery selects our <ul> elementfor (var i=0, l=top_100_list.length; i<l; i++){$mylist.append('<li>' + top_100_list[i] + '</li>');}
?

而应该是，在操作DOM之前，先创建列表元素的字符串:

var top_100_list = [...], //假设有100个元素$mylist = $('#mylist'), //先选择 <ul> top_100_li = ""; // 用来存储list元素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);
?

更快的做法， 在插入前把这些元素封装到单独的父节点中:

var top_100_list = [...], // assume this has 100 unique strings$mylist = $('#mylist'), // jQuery selects our <ul> elementtop_100_ul = '<ul id="#mylist">'; // This will store our entire unordered listfor (var i=0, l=top_100_list.length; i<l; i++){top_100_ul += '<li>' + top_100_list[i] + '</li>';}top_100_ul += '</ul>'; // Close our unordered list$mylist.replaceWith(top_100_ul);
?

如果你按照上面的方法，仍然担心性能问题:

• 试试jQuery的?clone()?方法. 它创建了节点数的拷贝.
• 使用?DOM DocumentFragments（一个轻量文档对象，文档树的一部分，或者是将要被插入到文档树的文档对象。
• 非常适合“剪切粘贴”的操作）.?creator of jQuery points out,性能比直接操作DOM更好

  7. 使用时间委托(别名.冒泡)

  除非特别指出，每一个事件（如点击鼠标，悬停等），JavaScript都会沿着DOM树“冒泡“到父元素。

  这是很有用的一个特性，当许多元素（或节点）都要调用同一个函数。

  不应该将一个事件监听功能绑定到多个节点，这是非常低效的，你可以把它绑定到它们的父元素，这样只要绑定一次，辨别出触发事件的节点就可以啦。

  例如，假设我们正在开发一个有许多输入框的表单，并在选中时添加/删除一个class。像这样的绑定是低效的:

  $('#myList li).bind('click', function(){$(this).addClass('clicked');// do stuff});
  ?

  应该在父级监听点击事件:

  $('#myList).bind('click', function(e){var target = e.target, // e.target grabs the node that triggered the event.$target = $(target);  // wraps the node in a jQuery objectif (target.nodeName === 'LI') {$target.addClass('clicked');// do stuff}});
  ?

  当你发现自己绑定同一个事件监听器的到许多相同的节点，你正在降低代码的性能.

  8. 消除无用的查询

  如果没有找到任何匹配的元素，虽然jQuery将失败的查询处理地很好，它仍然需要花费时间来寻找他们。

  如果整个网站需要一个全局的JavaScript，大部分人会用$(document).ready(function(){ // all my glorious code })实现。

  最有效的办法是使用内联的初始化功能，让模板页面能完全控制JavaScript的执行时间和地点。

  例如，在您的“文章“的模板页面，在</body>前写入下面的代码：

  <script type="text/javascript>mylib.article.init();</script></body>

  如果您的模板中包含了很多模块，虽然单个页面可能用也可能不用，但是由于某些原因，可以模块后立即初始化函数。

  <ul id="traffic_light"><li><input type="radio" name="light" value="red" /> Red</li><li><input type="radio" name="light" value="yellow" /> Yellow</li><li><input type="radio" name="light" value="green" /> Green</li></ul>
  ?<script type="text/javascript>
  mylib.traffic_light.init();
  ?</script>

  全局的js库格式如下:

  var mylib ={article_page :{init : function(){// Article page specific jQuery functions.}},traffic_light :{init : function(){// Traffic light specific jQuery functions.}}}
  ?

  9. 延迟加载到$(window).load

  大多数页面都可以看到?$(document).ready?, 在对象仍然在下载的时候它。

  如果你发现网页载入时停滞， 可能问题就在$(document).ready上. 通过 将函数绑定到$(window).load中，减少CPU使用率。

  二者的差别在于： $(document).ready(fn)发生在"网页本身的HTML"载入后就触发，

  $(window).load(fn)则会等到"网页HTML标签中引用的图档、内嵌物件(如Flash)、IFrame"等拉哩拉杂的东西都载入后才会触发。

  $(window).load(function(){// jQuery functions to initialize after the page has loaded.});
  ?

  适用场景：像拖拽 (drag and drop)这些功能,结合了视觉效果(effects)和动画(animation)效果,预先获取隐藏的图像等等.