几种提高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的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运 ...
随机推荐
- C#学习笔记--详解委托，事件与回调函数
.Net编程中最经常用的元素,事件必然是其中之一.无论在ASP.NET还是WINFrom开发中,窗体加载(Load),绘制(Paint),初始化(Init)等等.“protected void Pag ...
- SVM 最大间隔目标优化函数(NG课件2)
目标是优化几何边距, 通过函数边距来表示需要限制||w|| = 1 还是优化几何边距,St去掉||w||=1限制转为普通函数边距 更进一步的,可以固定函数边距为1,调节||w| ...
- win10总是自动重启的解决办法
win10总是自动重启的解决办法_百度经验http://jingyan.baidu.com/article/7908e85c983523af481ad214.html
- Delphi集合的用法
参考:http://www.cnblogs.com/doit8791/archive/2012/08/17/2644859.html 集合是Pascal特有的数据类型,在Visual Basic.C/ ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- BI 项目管理之生命周期跟踪和任务区域
DW/BI 系统是复杂的实体,构建这种系统的方法必须有助于简化复杂性.13 个方框显示了构建成功的数据仓库的主要任务区域,以及这些任务之间的主要依赖关系. 在生命周期这一级可以进行多方观察 ...
- hdu 4041 2011北京赛区网络赛B 搜索 ***
直接在字符串上搜索,注意逗号的处理 #include<cstdio> #include<iostream> #include<algorithm> #include ...
- Debian 的 preinst, postinst, prerm, 和 postrm 脚本
转自:http://jianjian.blog.51cto.com/35031/395468 这些是软件包安装前后自动运行的可执行脚本. 统称为控制文件, 是 Deian 软件包的"控制&q ...
- bbed的使用--查看数据文件信息 & sid信息
1.得到文件的块大小和数据块个数 在Linux和Unix上,oracle提供了一个小工具dbfsize用于查看文件块大小 (可以参看[ID:360032.1]How to detect and fix ...
- 用PowerShell脚本删除SharePoint 的 Page中的WebPart
编写PowerShell脚本可以删除page中所有的webpart,也可以根据webpart的属性信息去删除特定的webpart. 下面的PowerShell脚本便是删除对应page中所有的webpa ...