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 相关文章推荐
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
Jul 20 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
JavaScript实现前端倒计时效果
Feb 09 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实现上传图片生成缩略图示例
2014/04/13 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
web前端开发也需要日志
2010/12/09 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
20行python代码实现人脸识别
2019/05/05 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
手把手教你用Django执行原生SQL的方法
2021/02/18 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
土木工程毕业生自荐信
2013/11/12 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
两只小狮子教学反思
2014/02/05 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
党支部承诺书
2015/01/20 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫