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


Posted in Javascript onMarch 30, 2012

原因是我在测试的时候:带入了错误的变量。具体可以查看图片上的 $(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
结果截图:
关于jquery性能最佳实践的讨论,与求教
修改后的测试页面:http://jsperf.com/bell-selector/2
结果截图:
关于jquery性能最佳实践的讨论,与求教

同时给我我从真实环境中取出来的一块代码段所做的测试,同样也是$('#parent > .child')这样的写法最快。
测试页面:http://jsperf.com/findchildren
结果截图:
关于jquery性能最佳实践的讨论,与求教
从以上结果截图中可以看到,我给出的两个测试结果明显是使用了大于号选择符的那个性能做好。

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

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

Javascript 相关文章推荐
JS 非图片动态loading效果实现代码
Apr 09 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
jquery实现图片轮播器
May 23 jQuery
提高Node.js性能的应用技巧分享
Aug 10 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
vue $mount 和 el的区别说明
Sep 11 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 #Javascript
jQuery 自定义函数写法分享
Mar 30 #Javascript
一个JQuery操作Table的代码分享
Mar 30 #Javascript
javascript工具库代码
Mar 29 #Javascript
Web开发之JavaScript
Mar 29 #Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 #Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 #Javascript
You might like
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
PHP实现简易blog的制作
2016/10/24 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python原始套接字编程示例分享
2014/02/21 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
python和c语言的主要区别总结
2019/07/07 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
Django视图、传参和forms验证操作
2020/07/15 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
华为慧通面试题
2012/09/11 面试题
医科大学毕业生自荐信
2014/02/03 职场文书
师德模范事迹材料
2014/06/03 职场文书
2014年变电站工作总结
2014/12/19 职场文书
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫