到处都是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 相关文章推荐
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
JS验证字符串功能
Feb 22 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
angular异步验证器防抖实例详解
Mar 31 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
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
js获取单选按钮的数据
2006/11/27 Javascript
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
Python 第一步 hello world
2009/09/25 Python
python生成指定尺寸缩略图的示例
2014/05/07 Python
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
Python如何获取文件指定行的内容
2020/05/27 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
《小草和大树》教学反思
2014/02/16 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
质量管理标语
2014/06/12 职场文书
学生安全责任书模板
2014/07/25 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
李白故里导游词
2015/02/12 职场文书
亮剑观后感500字
2015/06/05 职场文书
金榜题名主持词
2015/07/02 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python