关于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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 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
模拟flock实现文件锁定
2007/02/14 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
Javascript----文件操作
2007/01/18 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
python 实现按对象传值
2019/12/26 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
学生就业推荐信
2013/11/13 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
促销活动总结怎么写
2014/06/25 职场文书
房屋过户委托书范本
2014/10/07 职场文书
会议开幕词
2015/01/28 职场文书
Nginx安装配置详解
2022/06/25 Servers
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS