几种提高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倍之多。
几种提高jQuery性能的代码的更多相关文章
- 怎么提高Jquery性能
很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 1. 使用最新版本的jQuery jQuery的版本更新很快,你 ...
- 如何提高jQuery的性能
缓存变量DOM遍历是昂贵的,所以尽量将会重用的元素缓存. // 糟糕 h = $('#element').height(); $('#element').css('height',h-20); // ...
- 26种提高ASP.NET网站访问性能的优化方法 .
1. 数据库访问性能优化 数据库的连接和关闭 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源. ASP.NET中提供了连接池 ...
- jquery性能
1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的j ...
- 提高jQuery执行效率需要注意几点
1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的j ...
- 提高jQuery执行效率
1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的j ...
- OneAPM大讲堂 | 提高JavaScript性能的30个技巧
文章系国内领先的 ITOM 管理平台供应商 OneAPM 编译呈现. 您是网站管理员还是网页开发人员?想创建超快速的网站吗? 今天我们来看看 JavaScript,这项神奇而又复杂的技术.它使网站内容 ...
- 简单十招提高jQuery执行效率
1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的j ...
- jquery性能优化的十种方法
jquery性能优化的十种方法 有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运 ...
随机推荐
- vim 查找时忽略大小写
:set ic 忽略大小写#ignorecase :set noic 不忽略大小写#noignorecase
- IIS网站发布若干问题
1.Win7 64位 IIS未能加载文件或程序集"System.Data.SQLite"或它的某一个依赖项 未能加载文件或程序集"System.Data.SQLite ...
- 使用JDBC的addBatch()方法提高效率
在批量更新SQL操作的时候建议使用addBatch,这样效率是高些,数据量越大越能体现出来 Statement接口里有两个方法:void addBatch(String sql)将给定的 SQ ...
- SQL Server创建随机测试数据
我们在做数据仓库开发的过程中,经常需要插入大量的测试数据来测试数据库查询性能和计算占用的存储空间等.本文主要介绍下不借用第三方的工具在数据库中直接生成大量的测试数据. 需求 每一行包含5个日期字段和一 ...
- Linux环境下使用shell编写CGI（httpd）
/var/www/cgi-bin/hello.sh #!/bin/bash echo "Content-type: text/html" echo "" ech ...
- Zero Copy 简介
转自:http://blog.csdn.net/zzz_781111/article/details/7534649 许多web应用都会向用户提供大量的静态内容,这意味着有很多data从硬盘读出之后, ...
- ListView中每个item条目在被单击选中时能够高亮显示
在布局文件中设定: android:listSelector="@android:color/holo_red_light" 在代码中实现 listView.setSelector ...
- UI中 frame 与 transform的用法与总结
在iOS中,我们是不可以直接访问控件中frame的结构体的成员的,因此我们需要分三步来改变一个UI控件的位置,大小 一.frame用法 frame的结构体类型为: struct CGRect { CG ...
- Android仿360手机卫士悬浮窗效果
请看下图: 首先是一个小的悬浮窗显示的是当前使用了百分之多少的内存,点击一下小悬浮窗,就会弹出一个大的悬浮窗,可以一键加速.好,我们现在就来模拟实现一下 ...
- json方式的面向对象
json方式只适合于一个对象. var p1 = { name:"香菇", sex :"女", dreamdu: { URL: "www.dreamd ...