几种提高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的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运 ...
随机推荐
- bootstratp图标的使用
bootstratp作为一个优秀的前端框架,最近使用了其中的Glyphicon Halflings的字体图标.起初一直显示不出来,后面通过搜索相关资料直到成功显示,在此做一些总结,方便后面复习. 1. ...
- Faster-rnnlm代码分析2 - HSTree的构造
也就是构造一棵Huffman Tree,输入是按照词汇频次由高到低排序的 采用层次SoftMax的做法,是为了使得训练和预测时候的softmax输出加速,原有multinomal softmax,是和 ...
- 【JAVA集合框架之Set】
一.Set概述. Set集合的特点是元素不允许重复,而且是无序的(添加和取出的顺序不一致). Set接口中的方法和Collection接口中的方法几乎相同,略. Set接口下常用的两个类:HashSe ...
- Solr入门之（5）配置文件schema.xml
该配置文件中的标签:<fileTypes>.<fields>.<uniqueKey>.<copyField> fieldType说明 标签types中定 ...
- JavaScript高级程序设计 读书笔记
第一章 JavaScript 简介 第二章 Html中使用JavaScript 第三章 基本概念 第四章 变量,作用域,内存 第五章 引用类型 第六章 面向对象 第七章 函数表达式 第八章 BOM 第 ...
- hdu 4061 福州赛区网络赛A 数学 ***
a1/sum #include<cstdio> #include<iostream> #include<algorithm> #include<cstring ...
- 卸载已经安装的rpm包
两个关键点: 1.如果提示有xxx.rpm包已经被installed了,那么先用rpm -e --nodeps xxx来卸载 2.如果存在多个版本的话,用rpm -e --allmatches来卸载 ...
- ios二维码扫描
1.添加AVFoundation.framework框架 2,控制器中实现 //第一步添加AVFoundation.framework框架 #import "ViewController.h ...
- Java 程序 ——感想
也许大家也有过这样的经历,我这的是受够了: 我们的专业选修课java课上老师留了一个作业,说做完了这个,就不用参加考试了,侥幸于懒惰的心理带领着我,光荣地接受了这个任务,而且按着老师的要求,不断地完善 ...
- ++i与i++的区别
1. ++i 和 i++,在单独使用时,就是 i=i+1. 2. a = ++i,相当于 i=i+1; a = i; (先i = i + 1,再使用i的值).也可以写成 i++; a=i 3. a = ...