到处都是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
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
基于JSON数据格式详解
Aug 31 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
js的新生代垃圾回收知识点总结
Aug 22 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
QueryPath PHP 中的jQuery
2010/04/11 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
python私有属性和方法实例分析
2015/01/15 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
几个人围成一圈的问题
2013/09/26 面试题
Java如何读取CLOB字段
2013/10/10 面试题
写给学生的新学期寄语
2014/01/18 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
医疗纠纷协议书
2014/04/16 职场文书
搞笑婚前保证书
2015/02/28 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
小学运动会入场口号
2015/12/24 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
sass 常用备忘案例详解
2021/09/15 HTML / CSS
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python