关于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.jb51.net/article/28056.htm

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

赞 (0)

相关推荐

  • 十个迅速提升JQuery性能让你的JQuery跑得更快

    十个迅速提升JQuery性能让你的JQuery跑得更快

    本文提供即刻提升你的脚本性能的十个步骤.不用担心,这并不是什么高深的技巧.人人皆可运用!这些技巧包括: 使用最新版本 合并.最小化脚本 用for替代each 用ID替代class选择器 给选择器指定前后文 建立缓存 避免DOM操作 避免使用concat(),利用join()处理长字串 返回false值 利用小抄和参考文档 使用最新版本 jQuery一直处于不断的开发和改进过程中. John 和他的团队不断研究着提升程序性能的新方法. 一点题外话,几个月前他还发布了Sizzle,一个据说能在Fir

  • jQuery性能优化28条建议你值得借鉴

    jQuery性能优化28条建议 一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可以打印出来或者设为桌面背景. 一.选择器性能优化建议 1. 总是从#id选择器来继承 这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了. 复制代码 代码如下: $('#content').hide(); 或者从ID选择器继承来选

  • 提高jQuery性能的十个诀窍

    提高jQuery性能的十个诀窍

    1. 使用最新版本的jQuery jQuery的版本更新很快,你应该总是使用最新的版本.因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.这里是三条最常见的jQuery选择语句: $('.elem') $('.elem', context) context.find('.elem') 我们用1.4.2.1.4.4.1.6.2三个版本的jQuery测试,看看浏览器在1秒内能够执行多少次.结果如下: 可以看到,1.6.2版本的运行次数,远远超过两个老版本.尤

  • jquery提升性能最佳实践小结

    将jquery对象缓存起来在 for循环中,不要每次都要访问数组的length属性,我们应该先将对象缓存进一个变量然后再操作,如下所示: 复制代码 代码如下: var myLength = myArray.length; for (var i = 0; i < myLength; i++) { // 要做的事 } 在循环外使用append 进行DOM操作是有代价的,如果需要往DOM中添加大量元素,你应该一次批量完成,而不是一次一个. 复制代码 代码如下: // 别这样 $.each(really

  • Jquery优化效率 提升性能解决方案

    例如有一段HTML代码: 1.总是从ID选择器开始继承 以下是引用片段:<div id="content">  <form method="post" action="#">  <h2>交通信号灯</h2>  <ul id="traffic_light">  <li><input type="radio" class="

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

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

    原因是我在测试的时候:带入了错误的变量.具体可以查看图片上的 $(parentID > childClass) 我直接比较两个字符换大小了! 感谢 html5中文网 QQ群中的 "不见丘比特". 其中第三点提到父元素与子元素的关系中提到了 从父元素选择子元素的用例: 复制代码 代码如下: $('.child', $parent) $parent.find('.child') $parent.children('.child') $('#parent > .child') $

  • jQuery最佳实践完整篇

    jQuery最佳实践完整篇

    上周,我整理了<jQuery设计思想>. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery".今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osmani的PPT<提高jQuery性能的诀窍>(jQuery Proven Performance Tips And Tricks).他是jQuery开发团队的成员,具有一定的权威性,提出的结论都有测试数据支持,非常有价值. ============

  • 7个jQuery最佳实践

    7个jQuery最佳实践

    随着富网络应用(rich web applications)数量的增长,以及用户对快速交互响应的高期望,开发者开始使用JavaScript库来快速高效的完成一些重复性的工作.这其中最流行的JavaScript库就是jQuery.但是jQuery的大量应用却带来了另外一个问题:在使用JavaScript库的时候,有哪些最佳实践,又有哪些不好的实践呢? 背景 在这篇文章中,我会给大家介绍在编写.调试和审查JavaScript代码的时候一些好的实践(至少我是这么认为的).事实上,我选择了其中7个最常见

  • JQuery最佳实践之精妙的自定义事件

    恰好偶最近负责的一个可视化编辑器的开发,其中有些地方便应用了JQuery的自定义事件,而且达到了很好的效果-精简代码的同时充分利用了OO的原则. 本文以我实际应用开发过程中遇到的一个例子进一步说明"什么时候用JQuery的自定义事件以及怎么用",希望可以抛砖引玉,同时权且当是回复同学们的邮件了. Demo-Ingenious JQuery custom event JQuery最佳实践-精妙的自定义事件 问题:一个复选框X,你如何便捷地触发它的click事件的处理逻辑,但是又不改变它当

  • React 组件性能最佳优化实践分享

    React 组件性能最佳优化实践分享

    目录 React 组件性能优化最佳实践 组件卸载前进行清理操作 类组件使用纯组件PureComponent 什么是纯组件 什么是浅层比较 shouldComponentUpdate 纯函数组件使用React.memo优化性能 memo 基本使用 memo 传递比较逻辑 使用组件懒加载 路由组件懒加载 根据条件进行组件懒加载(适用于组件不会随条件频繁切换) 使用Fragment 避免额外标记 不要使用内联函数定义 在构造函数中进行函数this绑定 类组件中的箭头函数 优化条件渲染 避免使用内联样式

  • JQuery Tips(4) 一些关于提高JQuery性能的Tips

    在选择时,最好以ID选择符作为开头 我想这个很好理解,因为JQuery内部使用document.getElementByID方法进行ID选择,这种方法比其他所有对DOM选择的方法更快,所以以$("#")开头是最好的,比如: 复制代码 代码如下: <div id="a"> <div class="b"> <div class="c"> <div class="d"&g

  • 22点关于jquery性能优化的建议

    首先,在脑子里牢牢记住 jQuery 就是 javascript.这意味着我们应该采取相同的编码惯例,风格指南和最佳实践. 首先,如果你是一个 javascript 新手,我建议您阅读 <24 JavaScript Best Practices for Beginners>, 这是一篇高质量的 javascript 教程,接触 jQuery 之前最好先阅读. 当你准备使用 jQuery,我强烈建议你遵循下面这些指南: 1. 缓存变量 DOM 遍历是昂贵的,所以尽量将会重用的元素缓存. 复制代码

  • JS trim去空格的最佳实践

    JS trim去空格的最佳实践

    刚好上次有同学提出疑问.刚好可以自测一下.先来看看老道在<JavaScript 精粹>P33 写的吧.他对 String 对象扩展了一个 trim() 方法: 复制代码 代码如下: Function.prototype.method = function(name, func) { this.prototype[name] = func; return this; }; String.method('trim', function() { return this.replace(/^\s+|\

  • JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)

    JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)

    1.防止滥用JavaScript"不管你想通过JavaScript改变哪个网页的行为,都必须三思而后行.首先要确认:为这个网页增加这种额外的行为是否确有必要?" 个人认为,作者的这句话放在当前几乎无处不用JavaScript来增强Web页面交互体验的时代,可以理解为应该适当的使用JavaScript,而不要因为使用了实现酷炫效果的脚本导致网页加载缓慢或者兼容性极差而舍本求末,导致用户无法浏览和使用网站. 2.平稳退化平稳退化是指当用户禁用浏览器JavaScript或浏览器不支持Java

随机推荐