首页
学习
活动
专区
圈层
工具
发布

如果多次使用它,我应该在jQuery中缓存$(this)吗?

当多次使用 $(this) 时,为了提高代码性能,建议在 jQuery 中缓存它。这是因为在每次使用 $(this) 时,都会重新查询 DOM 元素,这可能会导致性能下降。为了避免这种情况,可以将 $(this) 缓存到一个变量中,然后在需要的地方使用这个变量。

例如:

代码语言:javascript
复制
$('.my-element').on('click', function() {
  var $this = $(this);
  // 使用 $this 代替多次使用 $(this)
  $this.addClass('active');
  $this.find('.child').hide();
});

在上面的代码中,我们将 $(this) 缓存到了变量 $this 中,然后在后续的操作中使用 $this 代替多次使用 $(this)。这样可以提高代码性能,避免重复查询 DOM 元素。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

2021大厂(阿里、百度、字体跳动、腾讯)前端面试题库

HTTP2 && HTTP缓存 1.http/2项目设定目标 2.http/2特性 3.什么是缓存?又有什么用? 4.你知道有哪些缓存方式吗? 5.缓存位置 6.http缓存怎样生效的?...2.提交时发生冲突,你能解释冲突是如何产生的吗?你是如何解决的? 3.如果本次提交误操作,如何撤销? 4.如果我想修改提交的历史信息,应该用什么命令? 5.你使用过git stash命令吗?...8.使用过git merge和git rebase吗?它们之间有什么区别? 9.能说一下git系统中HEAD、工作树和索引之间的区别吗? 10.之前项目中是使用的GitFlow工作流程吗?...5.jQuery中的方法链是什么?使用方法链有什么好处? 6.如何将一个HTML元素添加到DOM树中的? 7.说出jQuery中常见的几种函数以及他们的含义是什么? 8.jQuery 能做什么?...9.jquery中的选择器和CSS中的选择器有区别吗? 10.jQuery的特点都有什么? React 1.什么是React? 2.React有什么特点? 3.列出React的一些主要优点。

2.2K21

架构 | 到底该不该使用JavaScript框架

它是健壮的吗?这仅仅是为了我们当前的需要。它的意义不在于它是或者是什么,而更多需要思考的是我为什么要使用其他的框架。 如果我不想编写自己的HTTP请求引擎,也会有很多选择。不过它们都是有代价的。...我该怎样在自己的代码中包含它们,以及它是如何影响我的工作流程的?他们还做了哪些不必要的事情消耗了时间?...如果我花了一个小时(这是我们花在代码和测试上的时间)来实现这个功能以满足我所有的需求,那么与集成一个库来来实现同样的功能相比,会节省很多时间吗?对此我们每个人都会有不同的答案。...如果只有要一两天的时间来编写自己的解决方案,我就会倾向于这样做。如果有一周或更长的时间,我也许会改变自己的主意。...但是如果你正在修建摩天大楼,那么就必须做更多的规划。我们应该在哪里画一条线?框架的作用与你正在使用建筑材料和建筑风格的作用是一样的。它是否适合环境,以后可以在需要时替换材料吗?

52310
  • jquery面试题目_高并发面试题

    大家好,又见面了,我是你们的朋友全栈君。 1. jQuery 库中的 $() 是什么?(答案如下) () 函数是 jQuery() 函数的别称,乍一看这很怪异,还使 jQuery 代码晦涩难懂。...使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它,浏览器会按它们在 HTML 页面里出现的顺序执行它们,相反对于 onload 技术而言,只能在单一函数里使用...8. jQuery 里的 each() 是什么函数?你是如何使用它的?(答案如下) each() 函数就像是 Java 里的一个 Iterator,它允许你遍历一个元素集合。...你能用 jQuery 代码选择所有在段落内部的超链接吗?(答案略) 这是另一个关于选择器的 jQuery 面试题。就像其他问题那样,只需一行 jQuery 代码就能搞定。...因此今时今日,许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库,网站就能有非常好的展示机会。 17.

    9.9K10

    前端面试那些坑

    清除浮动的方式 移动端的布局用过媒体查询吗? 使用 CSS 预处理器吗?喜欢那个? CSS优化、提高性能的方法有哪些? 浏览器是怎样解析CSS选择器的? 在网页中的应该使用奇数还是偶数的字体?...什么是闭包(closure),为什么要用它? javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么? 如何判断一个对象是否属于某个类?...如何避免多次加载的?如何 缓存的?) 让你自己设计实现一个requireJS,你会怎么做? 谈一谈你对ECMAScript6的了解?...怎么实例化这个类 JavaScript中的作用域与变量声明提升? 如何编写高性能的Javascript? 那些操作会造成内存泄漏? JQuery的源码看过吗?能不能简单概况一下它的实现原理?...(jQuery.fn.find()进入Sizzle) 针对 jQuery性能的优化方法? Jquery与jQuery UI有啥区别? JQuery的源码看过吗?能不能简单说一下它的实现原理?

    2.6K60

    最常见的 20 个 jQuery 面试问题及答案

    如果你是  jQuery 新手,那么它也能够帮助你更加好的理解基础知识,并激励你去发现更多东西。   1. jQuery 库中的 $() 是什么?...(答案如下) () 函数是 jQuery() 函数的别称,乍一看这很怪异,还使 jQuery 代码晦涩难懂。一旦你适应了,你会爱上它的简洁。...使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它,浏览器会按它们在 HTML 页面里出现的顺序执行它们,相反对于 onload 技术而言,只能在单一函数里使用...如果你是  jQuery 新手,那么它也能够帮助你更加好的理解基础知识,并激励你去发现更多东西。   1. jQuery 库中的 $() 是什么?...使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它,浏览器会按它们在 HTML 页面里出现的顺序执行它们,相反对于 onload 技术而言,只能在单一函数里使用

    14.7K30

    缓存Python函数的运行结果:Memoization

    在本教程中,您将看到如何以及何时用Python来运用这个简单而强大的概念,所以您可以使用它来优化自己的程序,并在某些情况下使其运行速度更快。...在Python中,使用键可以快速查找字典中的值。这使dict成为函数结果缓存的数据结构的一个很好的选择。 每当装饰函数被调用,我们检查参数是否已经在缓存中。如果是,则返回缓存的结果。...所以,我们不是重新计算结果,而是从缓存中快速返回。 如果结果不在缓存中,我们必须更新缓存,以便将来可以节省一些时间。因此,我们首先计算缺失的结果,将其存储在缓存中,然后将其返回给调用者。...这确实使它成为一个相当昂贵的函数。 接下来,我将做一些基准测试,以便了解这个函数在计算上是多么的昂贵。Python的内置timeit模块让我可以以秒为单位测量任意Python语句的执行时间。...让我们再次运行我们的基准测试: 注意到了e-06那个浮点数的末尾的后缀吗?第二次运行memoized_fibonacci只需要约2微秒即可完成。

    2.4K50

    25个常规方法优化你的jquery代码

    更重要的是,如果用户访问那些发布在Google Code上的站点后它会被缓存下来。 这样做很有意义。...通过缓存最小化选择操作 jQuery的选择器棒极了。...由于jQuery提供的animate()方法十分易用和强大,我们很容易深入使用它。事实上,在jQuery源代码中不少方法就是通过animate()函数来实现效果的。...如果你向DOM中添加了新的元素,尽管这些新元素被选择器所匹配,但是这些新元素并不会绑定上事件处理(你同意我的观点吗?),因此不会有事件发生。 ...如何检查元素是否存在你不必检查元素是否在页面上存在就可以使用它,因为如果没有在DOM中找到合适的元素,jQuery什么也不会做。

    2K10

    前端工程师面试题汇总

    清除浮动的方式 移动端的布局用过媒体查询吗? 使用 CSS 预处理器吗?喜欢那个? CSS优化、提高性能的方法有哪些? 浏览器是怎样解析CSS选择器的? 在网页中的应该使用奇数还是偶数的字体?...什么是闭包(closure),为什么要用它? javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么? 如何判断一个对象是否属于某个类?...如何避免多次加载的?如何 缓存的?) 让你自己设计实现一个requireJS,你会怎么做? 谈一谈你对ECMAScript6的了解?...怎么实例化这个类 JavaScript中的作用域与变量声明提升? 如何编写高性能的Javascript? 那些操作会造成内存泄漏? JQuery的源码看过吗?能不能简单概况一下它的实现原理?...(jQuery.fn.find()进入Sizzle) 针对 jQuery性能的优化方法? Jquery与jQuery UI有啥区别? JQuery的源码看过吗?能不能简单说一下它的实现原理?

    2.4K80

    走进webpack(2)–第三方框架(类库)的引入及抽离

    正文之前,由于这是一个系列的文章,可能第一次看到的看官老爷们会觉得突兀,如果你是webpack新手,我建议你先从前几篇文章看起,如果你对webpack有一些了解,也希望可以在github上下载代码,对照着看会更有效果...而且每一个需要jQuery的页面都需要引入的话好麻烦,那么我们可以使用ProvidePlugin来实现一次引入全局使用,而且通过插件的方式来引入第三方类库,如果你不使用它的话,webpack就不会打包它...,使全局都可以使用jQuery new webpack.ProvidePlugin({ $:"jquery" })   这样就可以了,但是别忘了把main.js中通过import引入的jQuery...通过将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存到缓存中供后续使用。...这个带来速度上的提升,因为浏览器会迅速将公共的代码从缓存中取出来,而不是每次访问一个新页面时,再去加载一个更大的文件。   简单来说,就是将公共模块拆分出来以便使浏览器加载速度更快。

    99210

    WordPress开发人员犯的12个最严重的错误

    我看到WordPress主题和插件,他们的资产目录中已经有WordPress核心文件(例如,jQuery或Color Picker))中的文件。...如果您的客户端安装了缓存页面的插件(例如,W3 Total Cache或WP Rocket),而不会触发主题或插件中的条件,则您的PHP代码将无效。...例如,可能有两个插件使用一个通用的jQuery库,这个库可能会加载两次,并可能导致问题。实际上,这是最好的例子,因为jQuery经常在多次站点上加载。这可能是由于编写的插件或主题很差。...您确定您想要这样做吗?...在PHP脚本中,只有三分之一的代码被实际使用时,我已经多次看到这种做法。 这可能有一些缺点,包括: 1.代码不使用与现有项目代码相同的样式。

    3.4K10

    走进webpack(2)--第三方框架(类库)的引入及抽离

    正文之前,由于这是一个系列的文章,可能第一次看到的看官老爷们会觉得突兀,如果你是webpack新手,我建议你先从前几篇文章看起,如果你对webpack有一些了解,也希望可以在github上下载代码,...而且每一个需要jQuery的页面都需要引入的话好麻烦,那么我们可以使用ProvidePlugin来实现一次引入全局使用,而且通过插件的方式来引入第三方类库,如果你不使用它的话,webpack就不会打包它...,使全局都可以使用jQuery new webpack.ProvidePlugin({ $:"jquery" })   这样就可以了,但是别忘了把main.js中通过import引入的jQuery...通过将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存到缓存中供后续使用。...这个带来速度上的提升,因为浏览器会迅速将公共的代码从缓存中取出来,而不是每次访问一个新页面时,再去加载一个更大的文件。   简单来说,就是将公共模块拆分出来以便使浏览器加载速度更快。

    1.8K110

    前端开发面试题

    使用它区别是什么?...5、如果是使用jQuery,直接这样就可以了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。 同步和异步的区别?...如何避免多次加载的?如何 缓存的?) 参考:http://annn.me/how-to-realize-cmd-loader/ JS模块加载器的轮子怎么造,也就是如何实现一个模块加载器?...怎么实例化这个类 JavaScript中的作用域与变量声明提升? 如何编写高性能的Javascript? 那些操作会造成内存泄漏? JQuery的源码看过吗?能不能简单概况一下它的实现原理?...提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等 JQuery的源码看过吗?能不能简单说一下它的实现原理? jquery 中如何将数组转化为json字符串,然后再转化回来?

    5.4K52

    JavaScript -1- 基础教程与部分功能示例

    ("demo").innerHTML = "我的第一段 JavaScript"; 旧的 JavaScript 例子也许会使用 type 属性:<...外部脚本的优势 在外部文件中放置脚本有如下优势: 分离了 HTML 和代码 使 HTML 和 JavaScript 更易于阅读和维护 已缓存的 JavaScript 文件可加速页面加载 如需向一张页面添加多个脚本文件...true 使用 else 来规定要执行的代码块,如果相同的条件为 false 使用 else if 来规定要测试的新条件,如果第一个条件为 false 使用 switch 来规定多个被执行的备选代码块...这个返回值会返回给调用者: 优势 能够对代码进行复用:只要定义一次代码,就可以多次使用它。 能够多次向同一函数传递不同的参数,以产生不同的结果。...myFunction(a, b) { return a * b; // 函数返回 a 和 b 的乘积 } x 的结果将是: 56 功能示例 读取 json 文件 加载 jquery.js

    82320

    jQuery的回调模块 -- 为什么放弃使用Cache

    这个主要用在jQuery内部的调用:Deferred, Ajax。相关内容可以查看艾伦的慕课网或博客园教程。 我在这里和大家讨论的是另一个话题:关于参数传递的处理。...代码中每次去调用该方法时,都会将字符串列转为JSON对象,如果传递参数相同,需要再次去转吗? 4. 针对第三个问题,jQuery的解决方法是使用一个缓存,可以看下1.7.2中的实现。...createOptions( options ) : jQuery.extend( {}, options ); 我的疑问 使用缓存是一个非常好的方法,例如: 第一次调用时 $.Callbacks...第二次调用时 如果使用缓存,只需要在flagCache中取到JSON对象就可以了 -- flagCache['once memory'] 如果不适用缓存,还需要转成JSON对象。...而且在jQuery3.1中也是第三种实现。为什么呢?使用缓存和不适用缓存有什么另外的比较吗? 大家可以积极留言,互相讨论。

    80610

    Vue:知道什么时候使用计算属性并不能提高性能吗?

    计算属性有什么特别之处 关于计算属性,有两件事使它们变得特别,并且它们与本文的要点相关: 它们的结果会被缓存,并且只需要在其反应性依赖项之一发生变化时重新计算。 它们在访问时被惰性计算。...缓存 计算属性的结果被缓存。在我们上面的例子中,这意味着只要todos数组没有改变,openTodos.value多次调用将返回相同的值,而无需重新运行 filter 方法。...当惰性求值会_降低_性能时 这有一个缺点:如果计算属性返回的结果只能在您的代码在某处使用它之后才能知道,这也意味着 Vue 的 Reactivity 系统无法事先知道这个返回值。...这是一个问题吗? 我该如何摆脱它? 所以首先:冷静。通常,这不是什么大问题。Vue 的反应系统通常非常高效,重新渲染也是如此,尤其是现在在 Vue 3 中。...想象一下,一个组件使用了几个这种计算属性,_并且_在一个大列表中被多次渲染——在这里,使用函数而不是计算属性肯定可以节省一些内存。 我想说,在几乎所有情况下,单独使用计算属性仍然可以。

    1.6K20

    编写更好的jQuery代码

    现在已经有很多文章讨论jQuery和JavaScript的性能问题,然而,在这篇文章中我计划总结一些提升速度的技巧和一些我自己的建议来改善你的jQuery和JavaScript代码。...另外,如果你是一个javascript的初学者,那么我建议你在开始jQuery之前看一下JavaScript best practices for beginners 和 writing high quality...如果你已经开始使用jQuery了,那么我强烈建议遵守下面的建议: 缓存变量 DOM的遍历是非常昂贵的,所以尽量缓存一些可能会被重新用到的变量。...中的方法缺少经验,一定要查看的文档,可能会有一个更好或更快的方法来使用它。...最后忠告 最后,写这篇文章的目的是提高jQuery的性能和给出一些好的建议。如果你想深入的研究对这个话题你会发现很多乐趣。记住,jQuery并非不可或缺,仅是一种选择。思考为什么要使用它。DOM操作?

    1.9K20
    领券