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性能的代码的更多相关文章

  1. 怎么提高Jquery性能

    很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 1. 使用最新版本的jQuery jQuery的版本更新很快,你 ...

  2. 如何提高jQuery的性能

    缓存变量DOM遍历是昂贵的,所以尽量将会重用的元素缓存. // 糟糕 h = $('#element').height(); $('#element').css('height',h-20); // ...

  3. 26种提高ASP.NET网站访问性能的优化方法 .

    1. 数据库访问性能优化 数据库的连接和关闭 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源. ASP.NET中提供了连接池 ...

  4. jquery性能

    1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的j ...

  5. 提高jQuery执行效率需要注意几点

    1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的j ...

  6. 提高jQuery执行效率

    1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的j ...

  7. OneAPM大讲堂 | 提高JavaScript性能的30个技巧

    文章系国内领先的 ITOM 管理平台供应商 OneAPM 编译呈现. 您是网站管理员还是网页开发人员?想创建超快速的网站吗? 今天我们来看看 JavaScript,这项神奇而又复杂的技术.它使网站内容 ...

  8. 简单十招提高jQuery执行效率

    1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的j ...

  9. jquery性能优化的十种方法

    jquery性能优化的十种方法 有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运 ...

随机推荐

  1. 【JAVA与DOM4J实现对XML文档的CRUD操作】

    一.简介 1.网上下载DOM4J 1.6.1压缩包,解压开之后,发现几个目录和一个jar文件,jar文件是必须的文件其它目录: docs目录:帮助文档的目录,单击index.html: Quick s ...

  2. 使用python递归子目录处理日志文件

    重要说明: (1)python使用4个空格进行层次缩进的(不是tab),在eclipse里面可以直接使用tab缩进,是因为eclipse会实时地将tab转成4个空格 (2)在eclipse中安装pyD ...

  3. 分享一个最近研究的手机QQ3.0的协议(版本1.4)

    最近闲来有事, 分析了一个非常低端(非常低端的意思是说你不应该对她是否能取代你现有的QQ客户端作任何可能的奢望,她只是一个实验性的东西)的手机QQ的协议, 是手机QQ3.0,      所用到的TCP ...

  4. js this的使用举例

    js this的使用举例 <script type="text/javascript"> function test(obj){ obj.style.width= ob ...

  5. PHP json数据格式化方法

    php 的json_encode能把数组转换为json格式的字符串.字符串没有缩进,中文会转为unicode编码,例如\u975a\u4ed4.人阅读比较困难.现在这个方法在json_encode的基 ...

  6. uC/OS II原理分析及源码阅读（一）

    uC/OS II(Micro Control Operation System Two)是一个可以基于ROM运行的.可裁减的.抢占式.实时多任务内核,具有高度可移植性,特别适合于微处理器和控制器,是和 ...

  7. Codeforces Round #369 (Div. 2) C. Coloring Trees DP

    C. Coloring Trees   ZS the Coder and Chris the Baboon has arrived at Udayland! They walked in the pa ...

  8. Win 10 开发中Adaptive磁贴模板的XML文档结构，Win10 应用开发中自适应Toast通知的XML文档结构

    分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...

  9. r0遍历系统进程方法总结

    方法1: ZwQuerySystemInformation 这个方法网上一搜一大堆,不举例了 方法2:暴力枚举PID枚举进程,代码: NTSTATUS DriverEntry(PDRIVER_OBJE ...

  10. sublime text 2中Emmet8个常用的技巧

    原文链接:http://blog.csdn.net/lmmilove/article/details/9181323 因为开始做web项目,所以最近在用sublime编辑器,知道了一个传说中的emme ...