网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jQuery的Each比JS原生for循环性能慢很多的原因
内容
    这篇文章主要介绍了jQuery的Each比JS原生for循环性能慢很多的原因的相关资料,需要的朋友可以参考下
    其实查看jQuery的源代码，发现each的代码很简单，但为什么性能和原生的for循环相差几十倍呢？
    jQuery的each的核心代码
    for (; i < length; i++) {
    value = callback.call(obj[i], i, obj[i]);
    if (value === false) {
    break;
    }
    }
    看着很简单，但为什么会慢很多呢？
    编写测试代码如下：
    var length=300000;
    function GetArr() {
    var t = [];
    for (var i = 0; i < length; i++) {
    t[i] = i;
    }
    return t;
    }
    function each1(obj, callback) {
    var i = 0;
    var length = obj.length
    for (; i < length; i++) {
    value = callback(i, obj[i]);
    /* if ( value === false ) {去掉了判断
    break;
    }*/
    }
    }
    function each2(obj, callback) {
    var i = 0;
    var length = obj.length
    for (; i < length; i++) {
    value = callback(i, obj[i]);/*去掉了call*/
    if (value === false) {
    break;
    }
    }
    }
    function each3(obj, callback) {
    var i = 0;
    var length = obj.length
    for (; i < length; i++) {
    value = callback.call(obj[i], i, obj[i]);/*自己写的call*/
    if (value === false) {
    break;
    }
    }
    }
    function Test1() {
    var t = GetArr();
    var date1 = new Date().getTime();
    var lengtharr = t.length;
    var total = 0;
    each1(t, function (i, n) {
    total += n;
    });
    var date12 = new Date().getTime();
    console.log("1Test" + ((date12 - date1)));
    }
    function Test2() {
    var t = GetArr();
    var date1 = new Date().getTime();
    var total = 0;
    each2(t, function (i, n) {
    total += n;
    });
    var date12 = new Date().getTime();
    console.log("2Test" + ((date12 - date1)));
    }
    function Test3() {
    var t = GetArr();
    var date1 = new Date().getTime();
    var total = 0;
    each3(t, function (i, n) {
    total += n;
    });
    var date12 = new Date().getTime();
    console.log("3Test" + ((date12 - date1)));
    }
    function Test4() {
    var t = GetArr();
    var date1 = new Date().getTime();
    var total = 0;
    $.each(t, function (i, n) {
    total += n;
    });
    var date12 = new Date().getTime();
    console.log("4Test" + ((date12 - date1)));
    }
    运行测试，发现，第一个和第二个相差不是很大，这说明由于break这个判断导致的性能差异很少，但第二个和第三个，第四个偏差就就不止一倍了，而第二个和第三个唯一的区别就是调用了call，看来call会导致性能损失，因为call会切换上下文，当然jQuery的each慢还有其他原因，它还在循环中调用了其他的方法，call只是一个原因罢了。
    因此可以说call，和apply都是js中比较消耗性能的方法，在性能要求严格时，建议少用。
    下面在通过一段代码看下jquery的each和js原生for循环性能对比
    <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
    两次结果直接说明了问题。
    以上所述是小编给大家介绍的jQuery的Each比JS原生for循环性能慢很多的原因，希望对大家有所帮助
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/15 3:12:33