到处都是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 location几个方法小姐
Jul 09 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
javascript事件冒泡实例分析
May 13 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
Vue数据双向绑定的深入探究
Nov 27 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
php基础知识:类与对象(5) static
2006/12/13 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
Python创建系统目录的方法
2015/03/11 Python
深入理解Python中的内置常量
2017/05/20 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
django迁移文件migrations的实现
2020/03/31 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
南京某公司笔试题
2013/01/27 面试题
人事部经理岗位职责
2014/03/07 职场文书
2015年招生工作总结
2015/05/04 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
在Python中如何使用yield
2021/06/07 Python
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电