jQuery的Each比JS原生for迴圈效能慢很多的原因，jqueryeachjs

最後更新：2016-07-23 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

其實查看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迴圈效能慢很多的原因，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More