jQuery简单的性能优化（二）

本文中用到的jQuery版本为v1.12.0

1. 缓存对象

 在写jQuery代码的时候，有些开发人员喜欢这么写：

$('#id').css('color', 'white');
$('#id').on('click', function(event) {...});
$('#id').find('.childNode').siblings().hide();
$('#id').fadeIn('500');

当然，开发过程中的跳跃思维会导致你有可能书写类似这样的代码，这无可厚非，但是这么书写导致的是：jQuery会在创建每一个选择器的过程中，查找DOM，创建多个jQuery对象。相对应的，比较良好的书写方式如下：

var $id = $('#id');
$id.css('color', 'white');
$id.on('click', function(event) {...});
$id.find('.childNode').siblings().hide();
$id.fadeIn('500');

当然，使用jQuery的链式操作会使代码更加简洁：

var $id = $('#id');
$id.css('color', 'white')
        .on('click', function(event) {...})
        .find('.childNode').siblings().hide()
        .fadeIn('500');

这里只是为了说明使用缓存变量的重要性，这和Java开发中不要随意的创建对象一样，可以帮助你有效地提高代码的执行效率。
如果在其他函数也用到了该jQuery对象，那么可以把它缓存到全局环境中。如：

window.$me = {
        id1 = $('#id1'),
        head = $('#title')
};
function test () {
        $me.id1.css('color', 'white')
            .on('click', function(event) {...})
            .find('.childNode').siblings().hide()
            .fadeIn('500');
        $me.head.text('I am a Head');
}

切记：永远不要让相同的选择器在你的代码中出现多次。

2. 循环时的DOM操作

使用jQuery可以很方便的对DOM节点进行增删查改，但是在一些循环中，如for()，while()，$.each()中处理节点时，如下例：

$ul = $('#ul-list');
$.each(dataArray, function(index, val) {
        $ul.append('<li>'+dataArray[index]+'</li>');
});

在上面代码中，将dataArray中的数据逐个加入到ul中，期间每一条数据都通过.append()将新节点添加到容器中。实际上jQuery操作消耗的性能也不低，所以更好的方式是尽可能的减少DOM操作。可以将整个元素字符串在插入DOM之前全部创建好。如：

var $ul = $('#ul-list');
var html = "";
$.each(dataArray, function(index, val) {
        html += '<li>'+dataArray[index]+'</li>';
});
$ul.html(html);

3. 数组方式使用jQuery对象

使用jQuery选择器获取的结果是一个jQuery对象。然而，jQuery类库会让你感觉你在使用一个定义了索引和长度的数组。在性能方面，使用for()或者while()来处理比使用$.each()要快。
同时，检查该数组的长度也是一个检查jQuery对象是否存在的方法。如：

var $content = $('#content');
if ($content) {...};//总是返回true
if ($content.length) {...};//拥有#content该元素时才返回true

4. 事件代理

每一个JavaScript事件（如：click，mouseover等）都会冒泡到父级节点。当我们需要给多个元素调用同个函数时，这点会很有用。比如，我们要唯一个表格绑定这样的行为：点击td后，把背景色设置为红色，代码如下：

$("#myTabel td").click(function(event){
      $(this).css('background-color','red');
})

假设有100个td，在使用上述方式的时候，就绑定了100个事件，这将带来很负面的性能影响。
代替这种效率较低的多元素事件监听的方法就是，只需向它们的父节点绑定一次事件，然后通过event.tartget获取点击到的当前元素，代码如下：

$("#myTabel").click(function(event){
      var $td = $(event.target);
      $td.css('background-color','red');
})

在改进方式中，只为一个元素绑定了一个事件，显然这种方式的性能要优于之前那种。同时，在jQuery 1.7版本中提供了一个新的方式：on()，来帮助你将整个事件监听封装到一个便利的方法中：

$("#myTabel").on('click', 'td', function(event){
      $(this).css('background-color','red');
})

5.尽量使用原生的JavaScript方法

下面的代码，用来判断多选框是否选中：

var $cb = $('#checkbox');
$cb.click(function(e){
        if($cb.is(':checked')){
                alert('你已选中该多选框');
        }
});

这里使用了jQuery提供的is()方法来判断多选框是否选中，但这里可以直接使用原生的JavaScript的方法：

var $cb = $('#checkbox');
$cb.click(function(event) {
    if (this.checked) {alert('checked')}
});

毋庸置疑，第二种方式效率高于第一种，因为它不需要再去调用其他函数。
还有很多：

//$(this).css('color','red');
this.style.color = 'red';//better;

//$('<p>');
$(document.createElement('p'));//better;

方法的选择很重要，有时候，也许你根本不需要jQuery。

6.压缩JavaScript

现在的web项目总是离不开大量的JavaScript，而js文件的体积越来越大，随之也影响到页面的感知新能。因此，需要对JavaScript文件进行压缩。
压缩的方法和工具在网上很多，大家可以自行搜索。

完。