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. linux查看常用操作

    linux下查看文件夹以及文件的大小: df命令可以显示目前所有文件系统的可用空间及使用情形 df -h Filesystem Size Used Avail Use% Mounted on /dev ...

  2. Android Tab -- 使用Fragment、FragmentManager来实现

    原文地址:http://blog.csdn.net/crazy1235/article/details/42678877 效果: 代码:https://github.com/ldb-github/La ...

  3. C# Qrcode生成二维码支持中文,带图片，带文字 2015-01-22 15:11 616人阅读 评论(1) 收藏

    1.下载Qrcode库源码,下载地址:http://www.codeproject.com/Articles/20574/Open-Source-QRCode-Library 2.打开源码时,部分类库 ...

  4. Quartz：Cron Expressions

    原文地址:http://www.quartz-scheduler.net/documentation/quartz-2.x/tutorial/crontrigger.html 注意: 位也可能是7位, ...

  5. hdu 4281(MTSP)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4281 题意:给出N个点,第一个点是裁判,其他N-1个点需要裁判过去回答问题,每个点需要的时间不一样,而 ...

  6. ios程序播放音频文件

    1.控制器代码 #import "ViewController.h" #import <AVFoundation/AVFoundation.h> #import &qu ...

  7. 【bootstrapValidator 不验证】使用bootstrapValidator 验证效果不起作用

    虽然在页面ready的时候 就绑定了验证表单 ,但是在点击提交按钮之后 依旧没有验证的效果 . 那就在提交按钮的点击事件中 添加一句话: $(document).ready( function () ...

  8. SpringJMS解析3-监听器

    消息监听器容器是一个用于查看JMS目标等待消息到达的特殊bean,一旦消息到达它就可以获取到消息,并通过调用onMessage()方法将消息传递给一个MessageListener实现.Spring中 ...

  9. cf 106C

    题目链接:http://vjudge.net/contest/139376#problem/E 题意看注释就能懂了,求能获得的最大价值. 代码: #include<iostream> #i ...

  10. js整理1

    数组 比较时的隐式转化 var a = [1,2,3]; var b = [1,2,3]; a == b; //false a == '1,2,3'; //true; // var c = []; B ...