JQuery for与each性能比较分析
更新时间：2013年05月14日 18:04:11 作者：
性能优化遇到很多细节问题(for与each性能比较)记录下来分享给大家，希望对你有所帮助
最近在做一个性能优化方面的工作，遇到很多细节问题，现在一一把遇到的问题记录下来分享给大家，废话就不多谢，我直接贴代码。
<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
两次结果直接说明了问题。
复制代码 代码如下:
<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
两次结果直接说明了问题。
相关文章
使用easyui从servlet传递json数据到前端页面的两种方法
这篇文章主要介绍了用easyui从servlet传递json数据到前端页面的两种方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
jQuery常用事件方法mouseenter+mouseleave+hover
这篇文章主要介绍了jQuery常用事件方法mouseenter、mouseleave和hover方法，下文内容介绍详细，需要的小伙伴可以参考一下2022-03-03
本文是对jquery中日期控件datepicker的属性进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
本篇文章主要介绍了js使用zTree插件实现可拖拽的树示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本篇文章小编将为大家介绍，在jQuery中对节点进行操作的解决办法，有需要的朋友可以参考一下2013-04-04
这篇文章主要介绍了jQuery 仿百度输入标签插件的具体实现,需要的朋友可以参考下2014-07-07
这篇文章主要为大家详细介绍了jQuery实现嵌套选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
今天与大家分享一下我写的一个滚动条滚动固定div的例子，现在很多地方都可以看到这样的效果2012-10-10
这篇文章主要介绍了jQuery操作选中select下拉框的值代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
这篇文章主要介绍了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果,可实现仿相册插件切换效果,并附代码demo源码供读者下载参考,需要的朋友可以参考下2016-02-02
最新评论