jquery提升性能最佳实践小结


Posted in Javascript onDecember 06, 2010

将jquery对象缓存起来在
for循环中,不要每次都要访问数组的length属性,我们应该先将对象缓存进一个变量然后再操作,如下所示:

var myLength = myArray.length; 
for (var i = 0; i < myLength; i++) { 
// 要做的事 
}

在循环外使用append 进行DOM操作是有代价的,如果需要往DOM中添加大量元素,你应该一次批量完成,而不是一次一个。
// 别这样 
$.each(reallyLongArray, function(count, item) { 
var newLI = '<li>' + item + '</li>'; 
$('#ballers').append(newLI); 
}); 
//较好的做法 
var frag = document.createDocumentFragment(); 
$.each(reallyLongArray, function(count, item) { 
var newLI = '<li>' + item + '</li>'; 
frag.appendChild(newLI[0]); 
}); 
$('#ballers')[0].appendChild(frag);不要在each()里用$('#id')的选择器,会有多次遍历查找dom元素,效率极低用document.createDocumentFragment()来减少页面的DOM结构改变的次数、刷新的次数 // 或者这样 
var myHtml = ''; 
$.each(myArray, function(i, item) { 
html += '<li>' + item + '</li>'; 
}); 
$('#ballers').html(myHtml);

保持简洁风格
// 不理想 
if ($ventfade.data('currently') != 'showing') { 
$ventfade.stop(); 
} 
if ($venthover.data('currently') != 'showing') { 
$venthover.stop(); 
} 
if ($spans.data('currently') != 'showing') { 
$spans.stop(); 
} 
// 较好的 
var elems = [$ventfade, $venthover, $spans]; 
$.each(elems, function(k, v) { 
if (v.data('currently') != 'showing') { 
v.stop(); 
} 
})

慎用匿名函数
匿名函数的约束到处都是一种痛苦。他们难以调试,维护,测试或重用。相反,我们可以使用对象封装,将那些处理和回调函数组织并通过命名管理起来。
// 不要这样 
$(document).ready(function() {... 
$('#magic').click(function(e) { 
$('#yayeffects').slideUp(function() {... 
}); 
}); 
$('#happiness').load(url + ' #unicorns', function() {... 
}) 
}); // 较好的 
var PI = { 
onReady: function() {... 
$('#magic').click(PI.candyMtn); 
$('#happiness').load(url + ' #unicorns', PI.unicornCb); 
}, 
candyMtn: function(e) { 
$('#yayeffects').slideUp(PI.slideCb); 
}, 
slideCb: function() {... 
}, 
unicornCb: function() {... 
} 
} 
$(document).ready(PI.onReady);

优化选择器
节点选择和DOM操作, 根据给定的ID匹配一个元素总是使用#id去寻找element
// 非常快 
$('#container div.robotarm'); 
// 超级快 
$('#container').find('div.robotarm');使用$.fn.find方法更快一些,因为第一个选择器是无须经过选择器引擎处理,在jquery中最快的选择器是ID选择器.因为它直接来自于Javascript的getElementById()方法,这是非常快,因为它是原产于浏览器。如果你需要选择多个元素,这必然会涉及到DOM遍历和循环,为了提高性能,建议从最近的ID开始继承。

具体指定选择器的右侧部分应该尽可能具体,左侧则不需要那么具体。
// 未优化 
$('div.data .gonzalez'); 
// 优化后 
$('.data td.gonzalez');如果可以,尽量在选择器靠右侧的部分使用tag.class,而左侧只有tag或者只有.class。

避免过度的具体
$('.data table.attendees td.gonzalez'); 
// 不写中间的会更好 
$('.data td.gonzalez');清爽的DOM结构也有助于改善选择器的性能,选择器引擎可以少跑几层去寻觅那个元素了。

避免使用无定向通配符选择器

$('.buttons > *'); // 极慢 
$('.buttons').children(); // 快很多 
$('.gender :radio'); // 无定向搜索 
$('.gender *:radio'); // 同上 
$('.gender input:radio'); // 这样 好很多

使用事件委派

事件委派允许你为一个容器元素(例如,一个无序列表)绑定一个事件处理程序,而不需给容器内每个元素(例如,列表项)都去绑定。jQuery提供$.fn.live和$.fn.delegate。如果可能的话,你应该使用$.fn.delegate而不是$.fn.live,因为它省去了不必要的选择需要,其明确的情况下(对$.fn.live的文档的上下文),减少了大约80 % 的开销。除了有性能提升的好处,事件委派也使你在往容器里添加新元素时无需重新绑定事件,因为已经有了。

通过事件委派一次绑定多种事件,以减少事件冗余

// 不好的 (如果列表里面元素很多) 
$('li.trigger').click(handlerFn); // 较好的: event delegation with $.fn.live 
$('li.trigger').live('click', handlerFn); 
// 最优的: $.fn.delegate 
$('#myList').delegate('li.trigger', 'click', handlerFn);

移除元素
DOM操作是慢的,你应该尽量避免去操作它。jQuery在1.4版引入了
$.fn.detach从DOM中去掉所有匹配的元素。
var $table = $('#myTable'); 
var $parent = table.parent(); 
$table.detach(); 
// ... 添加大量的行到表格中 
$parent.append(table);

.detach()和.remove()一样, 除了.detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素,不久又将该元素插入DOM时,这种方法很有用。

当大量元素修改CSS,应该使用样式表

如果你在用$.fn.css给多于20个元素修改CSS,考虑一下添加一个style标签,这样可以速度可以提升60 % 。

// 多于20个 明显慢 
$('a.swedberg').css('color', '#asd123'); 
$('<style type="text/css">a.swedberg { color : #asd123 }</style>').appendTo('head');

使用$.data而不是$.fn.data将$.data应用于DOM元素比直接调用jQuery选择结果的$.fn.data要快上10倍.虽然,这要先确定你是理解DOM元素与jQuery选择结果之间的区别的。
// 常用 
$(elem).data(key, value); 
// 快十倍 
$.data(elem, key, value);

别费时间在空白的选择结果上了

jQuery将不会告诉你,如果你想运行的代码在一个空选择上,它会继续运行,好像没有什么错。影响性能。

//太遭了,执行了三个方法后才意识到里面是空的 
$('#nosuchthing').slideUp(); // 较好 
var $mySelection = $('#nosuchthing'); 
if ($mySelection.length) { 
mySelection.slideUp(); 
} 
// 最佳: add a doOnce plugin 
jQuery.fn.doOnce = function(func) { 
this.length && func.apply(this); 
return this; 
} 
$('li.cartitems').doOnce(function() { 
// make it ajax! \o/ 
});这层保护是适用于jQuery UI widget,因为即使操作的元素为空其开销也不少。

定义变量
变量可以定义一个声明而不是几个

// 老套写法 
var test = 1; 
var test2 = function() {... 
}; 
var test3 = test2(test); // 新 
var test = 1, 
test2 = function() {... 
}, 
test3 = test2(test);在自动执行的函数,变量的定义可以完全省掉。 (function(foo, bar) {... 
})(1, 2);

条件判断

// 旧方法 
if (type == 'foo' || type == 'bar') {... 
} // 好方法 
if (/^(foo|bar)$/.test(type)) {... 
} 
// 查找对象 
if (({ 
foo: 1, 
bar: 1 
})[type]) {... 
}

作者:曾祥展
出处:学无止境 (http://www.cnblogs.com/zengxiangzhan/)
Javascript 相关文章推荐
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
JavaScript门道之标准库
May 26 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 #Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 #Javascript
js对象的构造和继承实现代码
Dec 05 #Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 #Javascript
script标签的 charset 属性使用说明
Dec 04 #Javascript
本地对象Array的原型扩展实现代码
Dec 04 #Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 #Javascript
You might like
PHP $_SERVER详解
2009/01/16 PHP
php 进度条实现代码
2009/03/10 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
smarty内置函数section的用法
2015/01/22 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
python和shell变量互相传递的几种方法
2013/11/20 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
flask session组件的使用示例
2018/12/25 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
python各层级目录下import方法代码实例
2020/01/20 Python
pycharm快捷键汇总
2020/02/14 Python
用 Python 制作地球仪的方法
2020/04/24 Python
python 调整图片亮度的示例
2020/12/03 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
学校安全工作制度
2014/01/19 职场文书
学徒工职责
2014/03/06 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
销售内勤岗位职责
2015/02/10 职场文书
心灵捕手观后感
2015/06/02 职场文书
MySQL添加索引特点及优化问题
2022/07/23 MySQL