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. AJAX XML返回类型

    例题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  2. 电脑没有关机可能出现发博文dns异常（write）

    现在是把装系统的技巧基本掌握,其实弄了这么多次还是有一个突破点,就是安装系统win7选择cd的iso是要ide模式.

  3. 【翻译三】java-并发之线程对象和实现

    Thread Objects Each thread is associated with an instance of the class Thread. There are two basic s ...

  4. hdu 5294 最短路+最大流 ***

    处理处最短路径图,这个比较巧妙 链接:点我

  5. Spring之ResourceLoader加载资源

    Resource与ResourceLoader对比 1.Resource接口定义了应用访问底层资源的能力. 通过FileSystemResource以文件系统绝对路径的方式进行访问: 通过ClassP ...

  6. Effective C++ 之 Item 1： 视C++为一个语言联邦

    Effective C++ Chapter 1. 让自己习惯C++(Accustoming Yourself to C++) Item 1. 视C++为一个语言联邦(View C++ as a fed ...

  7. 如何在Ubuntu中让mongo远程可连接

    最近团队的一个成员由于项目原因需要在vps上建立mongo数据库服务器并允许远端访问,这里整理下设置的思路 首先需要安装mongo apt-get updateapt-get install mong ...

  8. python web编程-概念预热篇

    互联网正在引发一场革命??不喜欢看概念的跳过,注意这里仅仅是一些从python核心编程一书的摘抄 这正是最激动人心的一部分了,web编程 Web 客户端和服务器端交互使用的“语言”,Web 交互的标准 ...

  9. Spring官网改版后下载

    Spring官网改版后找了好久都没有找到直接下载Jar包的链接,下面汇总些网上提供的方法,亲测可用. 1.直接输入地址,改相应版本即可:http://repo.springsource.org/lib ...

  10. How Kafka’s Storage Internals Work

    In this post I'm going to help you understand how Kafka stores its data. I've found understanding th ...