首页 > 代码库 > 几种提高jQuery性能的代码
几种提高jQuery性能的代码
1、jQuery对象缓存
如果同一元素被查找多次时,就应该将该jQuery对象缓存起来,不然每次查找都要遍历整个文档。
使用下边的代码做个简单的测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script></head> <body> <div class="no"></div> <div class="yes"></div> </body><script type="text/javascript">$(function(){ console.time(‘noSaved‘); for (i = 0; i < 1000; i++) { $(‘.no‘).text(i + ‘ ‘); } console.timeEnd(‘noSaved‘); console.time(‘saved‘); var the = $(‘.yes‘); for (i = 0; i < 1000; i++) { the.text(i + ‘ ‘); } console.timeEnd(‘saved‘);});</script></html>
用Chrome浏览器按F12打开控制台查看结果:(注:console.time在Chrome和Firefox浏览器好用,IE不行)
性能还是差很多的~
2、根据一个数组快速拼一个字符串
假如我们有如下这样的一个数组
var arr=[‘CBA‘,‘WCBA‘,‘NBA‘,‘WNBA‘];
最原始的办法(我就是这么写的,以后改进)
var list = ‘<ul>‘;for (var i = 0; i < arr.length; i++) { list += ‘<li>‘ + arr[i] + ‘</li>‘;}list += ‘</ul>‘;
用jQuery的$.each来遍历
var list = ‘<ul>‘;$.each(arr, function (i, n) { list += ‘<li>‘ + arr[i] + ‘</li>‘;});list += ‘</ul>‘;
最后用join的方法
var list = ‘<ul><li>‘ + arr.join(‘</li><li>‘) + ‘</li></ul>‘;
上面三种写法输出的结果都是一样的,但最后一种写法从代码量上还是比较占优势。而且经过测试第二种写法和第三种写法,在数组中的数据非常多的情况下,第三种写法的速度要快50%以上,但数据少的情况下速度没有分区。
3、正整使用on给元素绑定事件
我要给如下代码的表格单元格绑定一个单击事件
<table id="t"> <tr> <td>单元格</td> </tr></table>
一般随手会写成下边的样子
$("td").on("click",function(){ alert("我是单元格");})
如果只有一个td这么写没问题,要是有100个td的话那这么写的性能就非常的差,比较好的写法如下
$(‘#t‘).on(‘click‘, ‘td‘, function () { alert("我是单元格");});
经测试在有100个td的情况下两者性能相差7倍之多。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。