到处都是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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
JScript的条件编译
May 29 Javascript
js window.event对象详尽解析
Feb 17 Javascript
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
7个JS基础知识总结
Mar 05 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
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实现数组筛选奇数和偶数示例
2014/04/11 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
开启PHP的伪静态模式
2015/12/31 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
django settings.py 配置文件及介绍
2019/07/15 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
如何保障Web服务器安全
2014/05/05 面试题
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
致铅球运动员广播稿精选
2014/01/12 职场文书
简历里的自我评价
2014/01/31 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
一般纳税人申请报告
2015/05/18 职场文书
英语导游欢迎词
2015/09/30 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL