关于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 sudoku 数独智力游戏生成代码
Mar 27 Javascript
jquery一般方法介绍 入门参考
Jun 21 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
php+js实现倒计时功能
Jun 02 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
详解React中的组件通信问题
Jul 31 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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 和 MySQL 基础教程(一)
2006/10/09 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
php开启openssl的方法
2014/05/15 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
python安装教程
2018/02/28 Python
python适合人工智能的理由和优势
2019/06/28 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
文案策划求职信
2014/03/18 职场文书
出国留学经济担保书
2014/04/01 职场文书
检举信的格式及范文
2014/04/04 职场文书
消防安全标语
2014/06/07 职场文书
运动会广播稿200字
2014/10/18 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
python微信智能AI机器人实现多种支付方式
2022/04/12 Python