`

缓存jQuery对象来提高性能

阅读更多

jQuery使元素的选择变得异常简单,这也是它快速流行起来的一大原因,如果你看刚刚开始使用jQuery朋友写的代码时,会发现很多数人写的代码都在滥用jQuery选择器。

如果你发现同一元素被查找多次时,你就应该将该jQuery对象缓存起来,不然每次查找都要遍历整个文档。这个话题可能显得有点老生常谈,因为这几天写的东西都和调试jQuery代码有关系,所以将这个问题再次说明一下。关于在控制台中打印程序执行时间大家可以参考下使用 console.time() 计算jQuery代码执行时间,我们使用下边的代码做个简单的测试:可以500%提高开发效率的前端UI框架!

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');

 在chrome下按F12打开控制台,下图是不保存jQuery对象和保存jQuery对象时执行时间的对比,相信通过此图你会开始重视代码的性能。可以500%提高开发效率的前端UI框架!

jQuery使用console.time()输出执行时间

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

分享到:
评论

相关推荐

    关于jQuery对象数据缓存Cache原理以及jQuery.data详解

    $(“”).data([key],[value])与jQuery.data(element,[key],[value])的区别这两个函数都是用来在元素上存放数据也就平时所说的数据缓存,都返回jQuery对象,当时我分别在使用它俩的时候真的吓我一跳,区别可大了,真是...

    使用jQuery在对象中缓存选择器的简单方法

    当一个选择在页面上被反复的访问时,把它缓存起来以获得更好的性能是个不错的想法。 让我们看一个例子,   jQuery(document).ready(function() { jQuery('#some-selector').on('hover', function() { jQuery...

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的...11.30 缓存jQuery对象以提升性能 11.31 使用find()函数提升子查询的性能 11.32 使用jQuery操作DOM的限制

    jquery性能优化高级技巧

    有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力。随之而来的就是在某些低端浏览器...5.缓存jQuery对象 6.定义一个可以复用的函数 7.用数组方式来遍历jQuery 对象集

    jQuery权威指南-源代码

    10.1.2 使用jQuery对象缓存/314 10.1.3 给选择器一个上下文/315 10.2 处理选择器中的不规范元素标志/317 10.2.1 选择器中含有特殊符号/317 10.2.2 选择器中含有空格符号/318 10.3 优化事件中的冒泡现象/319 ...

    JQuery性能优化的几点建议

    针对jquery性能优化这个主题,想必大家都有所了解。下面是我搜集点一点资料关于jquery性能优化,大家可以参考参考。 一、选择器性能优化建议 ... 使用子查询:将父对象缓存起来以备将来的使用;  4.

    jquery 性能优化 from 蓝色理想

    总是从ID选择器开始继承 在class前使用tag 将jquery对象缓存起来 掌握强大的链式操作 使用子查询 对直接的DOM操作进行限制 冒泡 消除无效查询 推迟到 $(window).load 压缩js 全面掌握jquery库

    Jquery性能优化详解

    寻寻觅觅,觅觅寻寻终于找到了一些关于jquery性能优化的文章,小编果断收藏当然不能忘了加上自己的一些总结及理解。 首先,之前文章中的jquery链式...利用缓存,当要多次使用某个jquery对象时,可以将jquery对象缓存

    jQuery权威指南366页完整版pdf和源码打包

    9.5.2 效果界面 9.5.3 功能实现 9.5.4 代码分析 9.6 本章小结 第10章 jquery性能优化与最佳实践 10.1 优化选择器执行的速度 10.1.1 优先使用id与标记选择器 10.1.2 使用jquery对象缓存 10.1.3 给...

    jQuery 性能优化手册 推荐

    在twitter上发现了&lt;jQuery&gt;这篇文章, 简单的摘译了一下:总是从ID选择器开始继承 在class前使用tag 将jquery对象缓存起来 掌握强大的链式操作 使用子查询 对直接的DOM操作进行限制 冒泡 消除无效查询 推迟到 $(window...

    jquery提升性能最佳实践小结

    将jquery对象缓存起来在 for循环中,不要每次都要访问数组的length属性,我们应该先将对象缓存进一个变量然后再操作,如下所示: 代码如下: var myLength = myArray.length; for (var i = 0; i ’ + i

    连接野狗实时服务Ember.js适配器 .rar

    对于简单的应用来说,可以通过jQuery来从服务器加载JSON数据,并将这些JSON数据对象作为模型。 但是,使用一个模型库来管理查询、更改和将更改保存回服务器,将会大大的简化代码,同时也能提升应用的健壮性和性能。...

    ASP.NET.4揭秘 卷2

    n322 使用Session对象 n323 处理Session事件 n324 会话失效控制 n325 使用无Cookie的Session状态 n326 配置Session状态存储 n327 配置SQL Server Session状态 n33 使用用户配置文件 n331 创建用户配置文件组 n332 ...

    yiiframework官方最新版,包括源程序、api、文档

    Yii是一个基于组件、用于开发大型 Web 应用的高性能 PHP 框架。Yii提供了今日Web 2.0应用开发所需要的几乎一切功能。Yii是最有效率的PHP框架之一。 Yii几乎拥有了当今Web 2.0应用发展的全部特性。下面是这些特性的...

    JAVA毕业设计之医疗挂号管理系统(springboot+mysql)完整源码.zip

    Redis:一款高性能的键值对缓存数据库,用于缓存系统中的热点数据,提高系统性能。 Bootstrap:一款前端UI框架,用于构建响应式的用户界面,提高用户体验。 jQuery:一款轻量级的JavaScript库,用于简化前端开发,...

    [整站程序]足球彩票网全站程序_zucai.zip

    我们使用了缓存技术来减少数据库查询和网络请求的次数,以提高系统的响应速度。我们还使用了队列系统来处理并发请求和长时间运行的任务,以保证系统的并发能力和稳定性。此外,我们还采用了安全性的最佳实践,如输入...

    整站程序清风千年整站系统V5.0(附PSD源文件)-qfkzweb-free5-php5-gbk.zip

    我们使用了缓存技术来减少数据库查询和网络请求的次数,以提高系统的响应速度。我们还使用了队列系统来处理并发请求和长时间运行的任务,以保证系统的并发能力和稳定性。此外,我们还采用了安全性的最佳实践,如输入...

    整站程序三雷11种语言建站系统(网络版)v6.0-30tnetwork.zip

    我们使用了缓存技术来减少数据库查询和网络请求的次数,以提高系统的响应速度。我们还使用了队列系统来处理并发请求和长时间运行的任务,以保证系统的并发能力和稳定性。此外,我们还采用了安全性的最佳实践,如输入...

    PHP基于Linux的远程管理系统服务器端的实现(源代码+lw).zip

    我们使用了缓存技术来减少数据库查询和网络请求的次数,以提高系统的响应速度。我们还使用了队列系统来处理并发请求和长时间运行的任务,以保证系统的并发能力和稳定性。此外,我们还采用了安全性的最佳实践,如输入...

    PHP基于Linux的远程管理系统客户端的实现(源代码+lw).zip

    我们使用了缓存技术来减少数据库查询和网络请求的次数,以提高系统的响应速度。我们还使用了队列系统来处理并发请求和长时间运行的任务,以保证系统的并发能力和稳定性。此外,我们还采用了安全性的最佳实践,如输入...

Global site tag (gtag.js) - Google Analytics