JQuery for与each性能比较分析


Posted in Javascript onMay 14, 2013

最近在做一个性能优化方面的工作,遇到很多细节问题,现在一一把遇到的问题记录下来分享给大家,废话就不多谢,我直接贴代码。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>for与each性能比较</title> 
<script src="../Cks/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 
function getSelectLength() { 
var time1 = new Date().getTime(); 
var len = $("#select_test").find("option").length; 
var selectObj = $("#select_test"); 
for (var i = 0; i < len; i++) { 
if (selectObj.get(0).options[i].text == "111111") { 
selectObj.get(0).options[i].selected = true; 
break; 
} 
} 
var time2 = new Date().getTime(); 
alert("for循环执行时间:" + (time2 - time1)); 
time1 = new Date().getTime(); 
$("#select_test").find("option").each(function () { 
if ($(this).text() == "111111") { 
$(this)[0].selected = true; 
} 
}); 
time2 = new Date().getTime(); 
alert("each循环执行时间:" + (time2 - time1)); 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div><select id="select_test"> 
<option value='1'>111111</option> 
<option value='2'>222222</option> 
<option value='3'>333333</option> 
<option value='4'>444444</option> 
<option value='5'>5</option> 
<option value='6'>6</option> 
<option value='7'>7</option> 
<option value='8'>8</option> 
<option value='9'>9</option> 
<option value='10'>10</option> 
<option value='11'>11</option> 
<option value='12'>12</option> 
<option value='13'>13</option> 
<option value='14'>14</option> 
<option value='15'>15</option> 
<option value='16'>16</option> 
<option value='17'>17</option> 
<option value='18'>18</option> 
<option value='19'>19</option> 
<option value='20'>20</option> 
</select><input type="button" value="开始比较" onclick="getSelectLength();" /></div> 
<div> 
</form> 
</body> 
</html>

输入出入
for循环执行时间:1
each循环执行时间:3
两次结果直接说明了问题。
Javascript 相关文章推荐
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 #Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 #Javascript
使用js检测浏览器的实现代码
May 14 #Javascript
Javascript 垃圾收集机制介绍理解
May 14 #Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 #Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 #Javascript
js 程序执行与顺序实现详解
May 13 #Javascript
You might like
php获取QQ头像并显示的方法
2014/12/23 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
jquery ajax请求实例深入解析
2012/11/26 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
python实现ip查询示例
2014/03/26 Python
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
python requests 测试代理ip是否生效
2018/07/25 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
医药专业应届毕业生求职信范文
2014/01/01 职场文书
初中物理教学反思
2014/01/14 职场文书
小学教师师德整改措施
2014/09/29 职场文书
工程部文员岗位职责
2015/02/04 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
中学校园广播稿
2015/08/18 职场文书
作文之亲情600字
2019/09/23 职场文书
python中validators库的使用方法详解
2022/09/23 Python