枰培教育
您的当前位置:首页关于jquery性能最佳实践的讨论,与求教_jquery

关于jquery性能最佳实践的讨论,与求教_jquery

来源:枰培教育


原因是我在测试的时候:带入了错误的变量。具体可以查看图片上的 $(parentID > childClass) 我直接比较两个字符换大小了!
感谢 html5中文网 QQ群中的 “不见丘比特”。

其中第三点提到父元素与子元素的关系中提到了 从父元素选择子元素的用例:
代码如下:
 $('.child', $parent)
  $parent.find('.child')
  $parent.children('.child')
  $('#parent > .child')
  $('#parent .child')
  $('.child', $('#parent'))

在其所给的测试用例中 确实是使用jquery的find方法最快,但是稍作修改却得到了另外的一个结果$('#parent > .child')完胜。

在作者的用例中只是直接缓存了对象 $('#parent');但是当我们把dom的id和class属性作为常量定义并传入测试用例中的时候就出现我说的另外一个结果。
作者原生测试页面:http://jsperf.com/bell-selector
结果截图:

修改后的测试页面:http://jsperf.com/bell-selector/2
结果截图:

同时给我我从真实环境中取出来的一块代码段所做的测试,同样也是$('#parent > .child')这样的写法最快。
测试页面:http://jsperf.com/findchildren
结果截图:

从以上结果截图中可以看到,我给出的两个测试结果明显是使用了大于号选择符的那个性能做好。

请各位看到此文或者了解详情的能给一个说明。关于文章中的其它内容都是比较好的观点。
文章:http://www.gxlcms.com/article/28056.htm

园子中那位有时间和条件的可以对以上各个操作做一次调试,给出详细的流程说明。我要等到手中的项目做完才有时间来调试这个过程。

枰培教育还为您提供以下相关内容希望对您有帮助:

【整理总结】优化jQuery性能的多种方法

选择器性能优化优先使用ID选择器:ID选择器是jQuery中最快的,因其直接映射原生getElementById()方法。用标签修饰类选择器:如$('div.example'),避免单独使用类选择器(尤其在IE中会遍历全DOM)。子查询与缓存父对象:通过缓存父对象减少重复查询,例如var $parent = $('#container'); $parent.find('.c

jquery有哪些优缺点

高性能与轻量化jQuery核心库精简至18KB(未压缩版),且版本迭代持续优化性能。配合现代浏览器(如Chrome、Firefox)的快速JavaScript引擎,可高效构建富交互应用。其性能优势在大型框架中尤为突出。广泛行业支持与标准化趋势尽管非官方标准,但被谷歌、微软、戴尔等巨头采用,并集成至Visual Studio等开发工具。

为什么要使用jquery

使用jQuery的主要原因如下:1. 简化DOM操作,提升开发效率jQuery的核心优势在于通过封装原生JavaScript的DOM操作,显著减少代码量。例如,使用CSS选择器(如$("div")、$("#box2"))可直接获取元素,无需像原生JS那样通过getElementsByTagName、getElementById等冗长方法逐层遍历。这种...

jQuery功能浅析

jQuery 的核心思想是选取元素,然后对其进行操作。通过 jQuery,可以使用简洁的选择器语法来获取页面中的元素。CSS 选择器:jQuery 支持大多数 CSS 选择器,如 ID 选择器($('#myId'))、类选择器($('div.myClass'))、属性选择器($('input[name=first]'))等。jQuery 特有的表达式:除了 CSS ...

jquery如何学好

如3.x对Promise的支持)。拓展技术视野:学习现代框架(如Vue/React)的同时,理解jQuery的适用场景(如快速原型开发或旧项目维护)。参与社区:通过Stack Overflow、GitHub等平台交流问题,学习最佳实践。总结:jQuery的学习需结合理论、实践与优化,通过项目积累经验,同时保持对前端技术演进的敏感度。

jquery.load 方法详解和一些思考

则可能导致页面崩溃。因此,深入理解如何将 jQuery.load 融入 webpack 体系是十分必要的。本文旨在提供对 jQuery.load 方法的深入理解,并探讨其在实际应用中的注意事项和潜在挑战。在实际项目中,合理使用该方法,结合规范和最佳实践,能够有效提升开发效率和应用性能。

jquery.load 方法详解和一些思考

jQuery.load 方法的实现基于 jQuery.ajax、self.html、jQuery.append 和 jQuery.parseHTML 函数。其中,self.html 函数用于获取或操作 HTML,而 jQuery.append 和 jQuery.parseHTML 则用于插入和解析 HTML 字符串,通过将字符串转化为 DocumentFragment 对象,进而使用 appendChild 方法添加到目标元素中。在...

怎么样才能把jquery学好?

9. 实战练: 多做项目实战:通过参与实际项目或自己动手做练习,将所学知识应用到实践中,不断巩固和提升jQuery技能。10. 持续学习与交流**: 关注最新动态:关注jQuery的官方文档、社区论坛和博客等,了解jQuery的最新更新和最佳实践。 参与交流讨论:加入jQuery相关的社区或论坛,与其他开发者交流...

jQuery的功能

jQuery是一个功能强大的JavaScript库,主要用于简化HTML文档遍历、事件处理、动画和Ajax交互等操作。以下是jQuery的主要功能:选择网页元素:jQuery的基本设计思想和主要用法,就是“选择某个网页元素,然后对其进行某种操作”。这是它区别于其他JavaScript库的根本特点。使用jQuery的第一步,往往就是将一个选择...

jquery有哪些优点,为什么要采用这种模式

1,轻量级.JQuery非常小,压缩包只有18KB左右.2,强大的选择器.JQuery不仅支持CSS里的所有选择器,还有JQuery独有的选择器.3,出色的DOM操作封装.JQuery封装了大量常用的DOM操作.4,兼容性好.JQuery能够在不同浏览器中兼容,同时还修复了一些浏览器之间的差异.5,链式编程 即对发生在同一个JQuery对象上的一组...

显示全文

猜你还关注