尽量使用最新版本的jQuery
jQuery每一个新的版本都会较上一个版本进行Bug修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的jQuery来提高性能。不过需要注意和补充的是,已建项目不要轻易的更换版本,毕竟有时候新版本不完全是向后兼容的。
使用合适的选择器
$("#id")
使用id定位DOM元素无疑是最佳性能的方式,因为jQuery底层将直接调用原生方法document.getElementById
。其次,如果id不能直接定位到所需元素,可以考虑调用find()
方法。
$("div")
标签选择器性能也相对不错,因为jQuery会直接调用原生方法document.getElementsByTagName
来定位DOM元素,最好是配合$('#id')
和find()
方法来使用。
$(".class")
使用class
来定位元素集合相对会低效一些,因为在非现代浏览器上不支持document.getElementsByClassName()
,只能通过DOM搜索的方式来实现,所以最好也是配合$('#id')
和find()
方法来使用
另外还有两组选择器分别是属性选择器$("[attribute=value]")
和伪元素选择器$(":hidden")
,因单独使用性能不理想,所以都建议使用ID选择器定位到最近的父级元素并配合find()
方法使用。
缓存对象
永远不要让同一个选择器出现多次
循环时的DOM操作
每1次操作DOM的性能开销都很大,使用临时变量来存储,将DOM的操作次数降至最低。
var top_100_list=['a','b''c','d','e'],
listBox = $('#listBox'),
top_100_li="";
for(var i=0,l=top_100_list.length;i<l;i++){
top_100_li+="<li>"+top_100_list[i]+"</li>";
}
listBox.append(top_100_li);
数组方式使用jQuery对象
使用jQuery选择器获取结果是一个jQuery对象。然而,jQuery会让人感觉正在使用一个定义了索引和长度的数组。在性能方面,建议使用原生的for()
或者while()
比 each()
方法执行更快。
事件委托
每一个JavaScript事件都会冒泡到父级节点。当我们需要给多个元素调用同一个事件函数时候这一点会很有用。
比如我们要为一个表格绑定一个function,点击td之后,将其背景设置为红色。
第一反应一般会这样写:
$('#myTable td').click(function(){
$(this).css('background','red');
})
假如有100个td,那么就绑定了100次事件,显然这将带来很大的性能负担。
代替这种效率很差的多个元素事件监听的方法就是说,只需要向它的父节点绑定1次事件,然后通过event.target
来获取到当前点击元素。使用事件委托优化之后:
$('#maTable').on('click','td',function(){
$(this).css('background','red');
})
使用join()
来拼接长字符串
使用join
来处理长字符串(返回渲染DOM)拼接确实有助于性能优化.
创建一个数组,然后循环,使用join()把数组转为字符串
var arr = [];
for (var i=0;i<=1000;i++){
arr[i] ='<li></li>';
}
$('#list').append(arr.join(""));
合理的利用Data自定义属性
<!--Set-->
<div id="dl" data-role="page" data-last-value ="43" data-options='{"name":"jack"}'></div>
//Get
var dl = $('#dl');
dl.data("role"); //"page"
dl.data("lastValue"); //43
dl.data("options").name; //jack