title: 《锋利的jQuery》十一、jQuery性能优化
date: 2017-08-16 22:18:00
tags: 锋利的jQuery
使用合适的选择器
以下选择器是按照性能由高到低排序的
$('#id')
使用id来定位DOM元素无疑是最佳提高性能的方式，因为jQuery将直接调用document.getElementById()方法，如果用id无法直接获取元素那么可以用$('#id').find()方法。为了提高性能，最好从最近的id开始找。
$('div')
标签选择器性能也是不错的，是第二选择。jQuery将直接调用document.getElementsByTagName()。
$('.class')
这个方法如果是ie9以上或标准浏览器会调用document.getElementsByClassName()，对于旧的浏览器将使用DOM搜索的方式，所以相比前两个比较耗费性能。
$('[attribute=value]')
对于利用属性来定位DOM元素，没有js方法直接实现。基本是通过querySelectorAll()方法实现，如果是旧浏览器会使用DOM搜索的方法。总体来说性能并不理想，尽量避免使用。
$(':hidden')
和上面用属性定位DOM元素类似，这种伪类选择器也没有js方法直接实现，并且jQuery需要搜索每一个元素来定位这个选择器，同样性能不理想，如果必须要用可以在前面加一个id选择器缩小搜索范围。
如果要查看性能区别，可以使用一个在线工具jsPerf。
缓存对象
在书写jQuery代码时经常看到如下代码：
$('#traffic_light input.on').on('click',function(){...});
$('#traffic_light input.on').css('border','1px solid yellow');
$('#traffic_light input.on').css('background-color','orange');
$('#traffic_light input.on').fadeIn('show');
这种思维是无可厚非的，但这样导致的结果是jQuery会在创建每一个选择器的过程中，查找DOM，创建多个jQuery对象。比较好的书写方式如下：
var $active = $('#traffic_light input.on'); // 缓存对象
$active.on('click',function(){...});
$active.css('border','1px solid yellow');
$active.css('background-color','orange');
$active.fadeIn('show');
当然如果采用链式操作将更加简洁，但这里只是强调缓存对象。总之不要让同样的选择器多次出现在代码中。
循环时的DOM操作
使用jQuery可以很方便的添加、删除或修改DOM节点，但是在一些循环，比如for()、while()、或者$.each()中处理节点时，下面有个实例指的注意：
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>');
}
上面的代码中将每个遍历生成的新元素都作为节点添加到容器$('#myList')中，这样操作也是非常耗性能的，更好的方法是尽可能的减少DOM操作，这里应该将整个遍历生成的元素都拼接成字符串，最后统一添加到$('#myList')中：
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);
这里如果不使用缓存对象，对性能的损耗将更加严重，将会产生100个jQuery对象。
数组方式使用jQuery对象
jQuery对象会感觉像是一个定义了索引和长度的数组，在性能方面，建议使用for或while循环来处理，而不是使用$.each()，这样能使代码更快。
另外，检查长度也是检查jQuery对象是否有效的的方式：
var $content = $('#content');
if($content.length){
// do something
}
事件代理
假设有一张表格，要为每个<td>增加一个事件，点击变色：
$('#myTable td').click(function(){
$(this).css('background','red');
})
假设有100个<td>元素，在使用方式上将绑定100个事件，这将带来很负面的性能影响。更好的方式是利用事件冒泡。向它们的父级绑定一次一次事件：
$('#myTable').click(function(e){
var $clicked = $(e.target);
$clicked.css('background','red');
})
也可以使用on方法来绑定：
$('myTable').on('click','td',function(){
$(this).css('background','red');
})
使用join()来拼接字符串
可以用join()的方式来代替+的方式来拼接字符串，更有助于性能优化，尤其是长字符串处理的时候。
var arr = [];
for(var i = 0; i <= 1000; i++){
arr[i] = '<li>' + i + '</li>'
}
$('#list').html(arr.join(''));
尽量使用原声的js方法
下面的代码是用来判断多选框是否被选中：
var $cr = $('#cr');
$cr.click(function(){
if($(this).is(':checked')){
console.log('被选中')
}
})
这里用了is()方法来判断多选框是否被选中，但其实可以直接使用原声的js方法：
var $cr = $('#cr');
$cr.click(function(){
if(this.checked){
console.log('被选中')
}
})
第二种方法不需要拐外抹角的去调用许多函数。还有更多类似的操作：
$(this).css('color','red');优化成this.style.color = 'red';。
$('<p></p>')优化成$(document.createElement('p'))。
