到处都是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 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
实战node静态文件服务器的示例代码
2018/03/08 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
vue实现购物车小案例
2019/09/27 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
python查询sqlite数据表的方法
2015/05/08 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
python自动化办公操作PPT的实现
2021/02/05 Python
学校办公室主任职责
2013/12/27 职场文书
2014年母亲节寄语
2014/05/07 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
个人融资协议书
2014/10/02 职场文书
入党积极分子个人总结
2015/03/02 职场文书
公司规章制度范本
2015/08/03 职场文书
一文搞懂Python Sklearn库使用
2021/08/23 Python
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python