关于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 相关文章推荐
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
使用javascript插入样式
Mar 14 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
从面试题学习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 文件上传全攻略
2010/04/28 PHP
PHP无敌近乎加密方式!
2010/07/17 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
python制作最美应用的爬虫
2015/10/28 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
python八皇后问题的解决方法
2018/09/27 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
国贸专业的职业规划范文
2014/01/23 职场文书
计划生育标语
2014/06/23 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
创业计划书之家政服务
2019/09/18 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
Golang ort 中的sortInts 方法
2022/04/24 Golang
java实现面板之间切换功能
2022/06/10 Java/Android