資訊專欄INFORMATION COLUMN
摘要：有兩個主要因素有助于改善循環性能每次迭代完成的工作和迭代次數。第一個是標準的循環，它與其他類語言的語法相同循環體這可能是最常用的循環結構。解析循環由四部分組成初始化，預測試條件，循環體和后執行。它將會不斷執行，直到返回所有屬性為止。
翻譯：瘋狂的技術宅
https://medium.freecodecamp.o...
本文首發微信公眾號：前端先鋒
歡迎關注，每天都給你推送新鮮的前端技術文章
對于提高 JavaScript 程序的性能這個問題，最簡單同時也是很容易被忽視的方法就是學習如何正確編寫高性能循環語句。本文將會幫你解決這個問題。
我們將看到 JavaScript 中主要的循環類型，以及如何針對它們進行高效編碼。
現在開始！
循環性能談到循環性能，爭論的焦點始終會集中到關于應該使用哪種循環，哪個是速度最快、性能最好的？事實上，在 JavaScript 提供的四種循環類型中，只有一種比其他循環慢得多 —— ?for-in 循環。 對循環類型的選擇應基于你的需求而不是性能問題。
有兩個主要因素有助于改善循環性能 —— 每次迭代完成的工作和迭代次數。
在下面的內容中，我們將會看到通過對這兩點的優化，可以對循環的整體性能產生積極的影響。
For 循環在 ECMA-262（定義JavaScript的基本語法和行為的規范）第三版中，定義了四種循環類型。第一個是標準的 for 循環，它與其他類 C 語言的語法相同：
for (var i = 0; i < 10; i++){
//循環體
}
這可能是最常用的 JavaScript 循環結構。要了解應該怎樣對其進行優化，需要先進行一些分析。
解析for 循環由四部分組成：初始化，預測試條件，循環體和后執行。它的工作方式如下：首先，執行初始化代碼（var i = 0;）。然后是預測試條件（i <10;）。如果預測試條件的計算結果為 true，則執行循環體。之后運行后執行代碼（i ++）。
優化要優化循環中的工作量，第一步是最小化對象成員和數組項查找的數量。
還可以通過反轉順序來提高循環的性能。在 JavaScript 中，反轉循環對循環的性能提升不大，除非你消除了額外的操作。
// 原始循環
for (var i = 0; i < items.length; i++){
process(items[i]);
}
// 最小化屬性查找
for (var i = 0, len = items.length; i < len; i++){
process(items[i]);
}
// 最小化屬性查找并反序
for (var i = items.length; i--; ){
process(items[i]);
}
While 循環
第二種是 while 循環。下面是一個簡單的預測試循環，由預測試條件和循環體組成。
var i = 0;
while(i < 10){
//循環體
i++;
}
解析
如果預測試條件的計算結果為 true，則執行循環體。如果不是 —— 它就會被跳過。每個 while 循環都可以用 for 替換，反之亦然。
優化// 原始循環
var j = 0;
while (j < items.length){
process(items[j++]);
}
// 最小化屬性查找
var j = 0,
count = items.length;
while (j < count){
process(items[j++]);
}
// 最小化屬性查找和反序
var j = items.length;
while (j--){
process(items[j]);
}
Do-While 循環
do-while 是第三種循環，它是 JavaScript 中唯一的后測試循環。由循環體和后測試條件組成：
var i = 0;
do {
//循環體
} while (i++ < 10);
解析
在這種類型的循環中，循環體總是至少執行一次。然后評估測試后的條件，如果它是true，則執行另一個循環周期。
優化// 原始循環
var k = 0;
do {
process(items[k++]);
} while (k < items.length);
// 最小化屬性查找
var k = 0,
num = items.length;
do {
process(items[k++]);
} while (k < num);
// 最小化屬性查找和反序
var k = items.length - 1;
do {
process(items[k]);
} while (k--);
For-In 循環
最后一種是 for-in 循環。它有一個非常特殊的用途 —— 枚舉 JavaScript 對象的命名屬性。 它的語法如下：
for (var prop in object){
//loop body
}
解析
它的名稱與 for 循環類似。但是工作方式完全不同。而這種差異使它比另外三種循環慢得多，后者具有相同的性能特征，所以爭論哪個循環最快是沒有用的。
每次循環執行時，變量 prop 會得到 object 的一個屬性。它將會不斷執行，直到返回所有屬性為止。這些是對象自身的以及通過其原型鏈繼承的屬性。
注意事項永遠不要用“ for-in ”來迭代數組成員。
這種循環的每次迭代都會在實例或原型上進行屬性查找，這使得 for-in 循環比其它循環要慢得多。對于相同次數的迭代，可能會比其它循環慢七倍。
結論for ， while 和 do-while 循環都有類似的性能特征，因此沒有哪種類型比其他的更快或更慢。
避免使用 for-in 循環，除非你需要對大量未知對象屬性進行迭代。
提高循環性能的最佳方法是減少每次迭代完成的工作量并減少循環迭代次數。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103573.html
摘要：的目標是對高級程序中間表示的適當低級抽象，即代碼旨在由編譯器生成而不是由人來寫。表示把源代碼變成解釋器可以運行的代碼所花的時間表示基線編譯器和優化編 WebAssembly 那些事兒 什么是 WebAssembly？ WebAssembly 是除 JavaScript 以外，另一種可以在網頁中運行的編程語言，并且相比之下在某些功能和性能問題上更具優勢，過去我們想在瀏覽器中運行代碼來對網...
摘要：解釋器的利弊解釋器啟動和執行的更快。正是因為這個原因，解釋器看起來更加適合。這就是為什么最開始的瀏覽器都是用解釋器的原因?？墒钱斈氵\行同樣的代碼一次以上的時候，解釋器的弊處就顯現出來了。起初，監視器監視著所有通過解釋器的代碼。 作者：Lin Clark 編譯：胡子大哈 翻譯原文：http://huziketang.com/blog/posts/detail?postId=58c12f...
摘要：接下來該填表了生成行和單元格為了填充表格可以遵循同樣的方法，但這次我們需要迭代數組中的每個對象。對于每個對象，我們可以使用生成單元格。 翻譯：瘋狂的技術宅原文：https://www.valentinog.com/bl... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮的前端技術文章 怎樣用原生 JavaScript 生成表格需？本文告訴你答案！...
摘要：解釋器的利弊解釋器啟動和執行的更快。正是因為這個原因，解釋器看起來更加適合。這就是為什么最開始的瀏覽器都是用解釋器的原因?？墒钱斈氵\行同樣的代碼一次以上的時候，解釋器的弊處就顯現出來了。起初，監視器監視著所有通過解釋器的代碼。 作者：Lin Clark 編譯：胡子大哈 翻譯原文：http://huziketang.com/blog/posts/detail?postId=58c12f...
摘要：解釋器的利弊解釋器啟動和執行的更快。正是因為這個原因，解釋器看起來更加適合。這就是為什么最開始的瀏覽器都是用解釋器的原因?？墒钱斈氵\行同樣的代碼一次以上的時候，解釋器的弊處就顯現出來了。起初，監視器監視著所有通過解釋器的代碼。 作者：Lin Clark 編譯：胡子大哈 翻譯原文：http://huziketang.com/blog/posts/detail?postId=58c12f...
閱讀 1689·2019-08-30 15:54
閱讀 3343·2019-08-26 17:15
閱讀 3532·2019-08-26 13:49
閱讀 2588·2019-08-26 13:38
閱讀 2299·2019-08-26 12:08
閱讀 3060·2019-08-26 10:41
閱讀 1376·2019-08-26 10:24
閱讀 3386·2019-08-23 18:35
