jQuery使元素的选择变得异常简单,这也是它快速流行起来的一大原因,如果你看刚刚开始使用jQuery朋友写的代码时,会发现很多数人写的代码都在滥用jQuery选择器。   如果你发现同一元素被查找多次时,你就应该将该jQuery对象缓存起来,不然每次查找都要遍历整个文档。这个话题可能显得有点老生常谈,因为这几天写的东西都和调试jQuery代码有关系,所以将这个问题再次说明一下。关于在控制台中打印程序执行时间大家可以参考下使用 console.time() 计算jQuery代码执行时间,我们使用下边的代码做个简单的测试:

console.time('noSaved');
for (var i = 0; i <; i++) {
$('.no').text(i + ' ');
}
console.timeEnd('noSaved'); console.time('saved');
var the = $('.yes');
for (var i = 0; i < 1000; i++) {
the.text(i + ' ');
}
console.timeEnd('saved');

在chrome下按F12打开控制台,下图是不保存jQuery对象和保存jQuery对象时执行时间的对比,相信通过此图你会开始重视代码的性能。

当我换用较新版本的jQuery测试时发现新版本的jQuery在选择器上性能并没有提高,反而有所下降,大家可以在自己电脑上试试!

作者:jQuery学习

除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。

本文地址:http://www.jquery001.com/cache-jquery-object.html

缓存jQuery对象来提高性能的更多相关文章

  1. Memcache缓存用好了,性能有了很大的提高

    web服务器1 web服务器2 web服务器3如果每台web服务器都向mysql服务器表插入信息并且要做出相应最新编号反馈出现这样的高并发时候怎么减少服务器压力,同时用户体验还要好 可以使用Memca ...

  2. 设计一个缓存器 ReadLock提高性能

    /** * * @描述: 设计一个缓存器 ReadLock提高性能. * @作者: Wnj . * @创建时间: 2017年5月16日 . * @版本: 1.0 . */ public class C ...

  3. 动手实现 Redux(四):共享结构的对象提高性能

    接下来两节某些地方可能会稍微有一点点抽象,但是我会尽可能用简单的方式进行讲解.如果你觉得理解起来有点困难,可以把这几节多读多理解几遍,其实我们一路走来都是符合“逻辑”的,都是发现问题.思考问题.优化代 ...

  4. jQuery对象数据缓存Cache原理及jQuery.data详解

    网上有很多教你怎么使用jQuery.data(..)来实现数据缓存,但有两个用户经常使用的data([key],[value])和jQuery.data(element,[key],[value])几 ...

  5. jQuery.buildFragment源码分析以及在构造jQuery对象的作用

    这个方法在jQuery源码中比较靠后的位置出现,主要用于两处.1是构造jQuery对象的时候使用 2.是为DOM操作提供底层支持,这也就是为什么先学习它的原因.之前的随笔已经分析过jQuery的构造函 ...

  6. JQuery常用功能的性能优化

    使用最佳选择器 通常比较常用的选择器有以下几个: 1.ID选择器 $("#id") 2.标签选择器 $("td") 3.类选择器 $(".target ...

  7. ASP.NET MVC之如何看待内置配置来提高性能优化(四)

    前言 前几篇我们比较基础的讲了下MVC中的知识,这一节我们穿插点知识,讲讲MVC中我们可以提高性能的办法. Razor视图引擎优化(优化一) 我们知道默认情况下配置MVC去解析一个视图会首先约定通过查 ...

  8. Java编程提高性能时需注意的地方

    1.尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面 第一,控制资源的使用,通过线程同步来控制资 ...

  9. 读<jquery 权威指南>[7]-性能优化与最佳实践

    一.优化选择器执行速度 1. 优先使用ID选择器和标记选择器 使用选择器时应该首选ID选择器($("#id")),其次是标记选择器($("div")),最后再选 ...

随机推荐

  1. openstack首页默认跳转

    在/var/www/html新建index.html <html> <head> <meta http-equiv="Content-Language" ...

  2. Sublime Text的使用技巧

    来到腾讯之后,基本上整个团队都在使用Sublime Text这款编辑神器.虽说自己以前在写python的时候略有接触过,但只是把它当做简单的文本编辑器.来到这边后,才逐渐的体会到这款神作的牛逼之处. ...

  3. 【BZOJ 4662】 4662: Snow (线段树+并查集)

    4662: Snow Time Limit: 40 Sec  Memory Limit: 256 MBSubmit: 136  Solved: 47 Description 2333年的某一天,临冬突 ...

  4. 【BZOJ 4305】 4305: 数列的GCD (数论)

    4305: 数列的GCD Description 给出一个长度为N的数列{a[n]},1<=a[i]<=M(1<=i<=N).  现在问题是,对于1到M的每个整数d,有多少个不 ...

  5. codeforce 429D. Tricky Function (思维暴力过)

    题目描述 Iahub and Sorin are the best competitive programmers in their town. However, they can't both qu ...

  6. [COGS2427][HZOI 2016]seq

    [COGS2427][HZOI 2016]seq 题目大意: 一个长度为\(n(n\le10^6)\)的序列,\(q(q\le10^6)\)次操作,每次将所有\(a\)变成\(b\),求最后的序列. ...

  7. bzoj1715 虫洞

    Description John在他的农场中闲逛时发现了许多虫洞.虫洞可以看作一条十分奇特的有向边,并可以使你返回到过去的一个时刻(相对你进入虫洞之前).John的每个农场有M条小路(无向边)连接着N ...

  8. [转]android.support.v4.app.Fragment和android.app.Fragment区别

      1.最低支持版本不同 android.app.Fragment 兼容的最低版本是android:minSdkVersion="11" 即3.0版 android.support ...

  9. [转]在eclipse打开的android虚拟手机,打开File Explorer,下面是空的没有data、mnt、system三个文件

    在eclipse打开的android虚拟手机,打开File Explorer,下面是空的没有data.mnt.system三个文件 这是因为模拟器没有选择打开的缘故,必须首先打开一个模拟器(AVD), ...

  10. php 安装 Redis 扩展

    开发环境安装包为:wamp3.1.0,安装成功后 wamp/bin 目录下有php以下几个版本: 这里以php7.1.9为例进行redis扩展安装,其他php版本也是一样的. 进行安装 step 1: ...