到处都是jQuery选择器的年代 不了解它们的性能,行吗


Posted in Javascript onJune 18, 2012

最近,我就对jQuery的选择器使用做了一些个小小的实验,用来说明jQuery的不同选择器在不同的情况下,哪个效率更高,更值得使用。

先在每个测试页面的head中引入google提供的jquery文件和用于测试的小插件firejspt。

<!-- 引入FireJSPT的库文件 --> 
<script type="text/javascript" src="firejspt.js"></script> 
<!-- 引入google提供的1.44版的jQuery的库文件,其实哪个版本都无所谓了,呵呵 --> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

1. 最常用的id选择器和class选择器
将以下代码复制200次,置于body标签内。
<div id="ilian">比较id选择器和class选择器</div> 
<div class="ilian">比较id选择器和class选择器</div>

用于本次测试的JS代码如下:
function ilianTest01(){ 
$('#ilian').click(function() { alert('Hello World'); }); 
} function ilianTest02(){ 
$('.ilian').click(function() { alert('Hello World'); }); 
} 
/*调用2个函数进行测试*/ 
$(function(){ 
jspt.test(function(){ ilianTest01(); }); 
jspt.test(function(){ ilianTest02(); }); 
});

测试结果如下:

到处都是jQuery选择器的年代 不了解它们的性能,行吗

由图可以id选择器相比于class选择器的效率优势是非常地。。。。。

2. 在选择标签时,层级选择器用得也非常频繁,这次对比测试直接子标签符号“>”和children。

将以下代码放入body标签内,并将其中的li标签复制500次。

<ul id="ilian"> 
<li>比较直接子标签符号“>”和children</li> 
<li>比较直接子标签符号“>”和children</li> 
<li>比较直接子标签符号“>”和children</li> 
<!-- 省略497次 --> 
</ul>

用于本次测试的JS代码如下:
function ilianTest01(){ 
$('#ilian > li').click(function() { alert('Hello World'); }); 
} function ilianTest02(){ 
$('#ilian').children('li').click(function() { alert('Hello World'); }); 
} 
/*调用2个函数进行测试*/ 
$(function(){ 
jspt.test(function(){ ilianTest01(); }); 
jspt.test(function(){ ilianTest02(); }); 
});

测试结果:

到处都是jQuery选择器的年代 不了解它们的性能,行吗

由此可见children选择器要优于直接子标签符号选择器。
限于文章长度,本文只展示了最基本的测试,且以上测试,均是在简单环境中测试的,测试效果并不代表绝对的结论。

Javascript 相关文章推荐
js日期对象兼容性的处理方法
Jan 28 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
微信小程序删除处理详解
Aug 16 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
jquery图片延迟加载 前端开发技能必备系列
Jun 18 #Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 #Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 #Javascript
uploadify 3.0 详细使用说明
Jun 18 #Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 #Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 #Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 #Javascript
You might like
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
php跨服务器访问方法小结
2015/05/12 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
phpwind放自动注册方法
2006/12/02 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
Python中对列表排序实例
2015/01/04 Python
wxPython之解决闪烁的问题
2018/01/15 Python
Random 在 Python 中的使用方法
2018/08/09 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Python中关于浮点数的冷知识
2019/09/22 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
Python运算符+与+=的方法实例
2021/02/18 Python
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
后勤副校长自我鉴定
2013/10/13 职场文书
个人优缺点自我评价
2014/01/27 职场文书
实习生岗位职责
2014/04/12 职场文书
软件售后服务方案
2014/05/29 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis