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 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
js获取class的所有元素
Mar 28 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
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 加密解密内部算法
2010/04/22 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
Python print不能立即打印的解决方式
2020/02/19 Python
Python通过len函数返回对象长度
2020/10/22 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
精神病医院见习报告
2014/11/03 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
消夏晚会主持词
2015/06/30 职场文书
欢迎新生标语2015
2015/07/16 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python