国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

回到基礎(chǔ)：用循環(huán)優(yōu)化 JavaScript 程序

harriszh / 1660人閱讀

摘要：有兩個(gè)主要因素有助于改善循環(huán)性能每次迭代完成的工作和迭代次數(shù)。第一個(gè)是標(biāo)準(zhǔn)的循環(huán)，它與其他類語言的語法相同循環(huán)體這可能是最常用的循環(huán)結(jié)構(gòu)。解析循環(huán)由四部分組成初始化，預(yù)測試條件，循環(huán)體和后執(zhí)行。它將會(huì)不斷執(zhí)行，直到返回所有屬性為止。

翻譯：瘋狂的技術(shù)宅
https://medium.freecodecamp.o...

本文首發(fā)微信公眾號(hào)：前端先鋒
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

對于提高 JavaScript 程序的性能這個(gè)問題，最簡單同時(shí)也是很容易被忽視的方法就是學(xué)習(xí)如何正確編寫高性能循環(huán)語句。本文將會(huì)幫你解決這個(gè)問題。

我們將看到 JavaScript 中主要的循環(huán)類型，以及如何針對它們進(jìn)行高效編碼。

現(xiàn)在開始！

循環(huán)性能

談到循環(huán)性能，爭論的焦點(diǎn)始終會(huì)集中到關(guān)于應(yīng)該使用哪種循環(huán)，哪個(gè)是速度最快、性能最好的？事實(shí)上，在 JavaScript 提供的四種循環(huán)類型中，只有一種比其他循環(huán)慢得多 —— ?for-in 循環(huán)。 對循環(huán)類型的選擇應(yīng)基于你的需求而不是性能問題。

有兩個(gè)主要因素有助于改善循環(huán)性能 —— 每次迭代完成的工作和迭代次數(shù)。

在下面的內(nèi)容中，我們將會(huì)看到通過對這兩點(diǎn)的優(yōu)化，可以對循環(huán)的整體性能產(chǎn)生積極的影響。

For 循環(huán)

在 ECMA-262（定義JavaScript的基本語法和行為的規(guī)范）第三版中，定義了四種循環(huán)類型。第一個(gè)是標(biāo)準(zhǔn)的 for 循環(huán)，它與其他類 C 語言的語法相同：

for (var i = 0; i < 10; i++){
    //循環(huán)體
}

這可能是最常用的 JavaScript 循環(huán)結(jié)構(gòu)。要了解應(yīng)該怎樣對其進(jìn)行優(yōu)化，需要先進(jìn)行一些分析。

解析

for 循環(huán)由四部分組成：初始化，預(yù)測試條件，循環(huán)體和后執(zhí)行。它的工作方式如下：首先，執(zhí)行初始化代碼（var i = 0;）。然后是預(yù)測試條件（i <10;）。如果預(yù)測試條件的計(jì)算結(jié)果為 true，則執(zhí)行循環(huán)體。之后運(yùn)行后執(zhí)行代碼（i ++）。

優(yōu)化

要優(yōu)化循環(huán)中的工作量，第一步是最小化對象成員和數(shù)組項(xiàng)查找的數(shù)量。

還可以通過反轉(zhuǎn)順序來提高循環(huán)的性能。在 JavaScript 中，反轉(zhuǎn)循環(huán)對循環(huán)的性能提升不大，除非你消除了額外的操作。

// 原始循環(huán)
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 循環(huán)

第二種是 while 循環(huán)。下面是一個(gè)簡單的預(yù)測試循環(huán)，由預(yù)測試條件和循環(huán)體組成。

var i = 0;
while(i < 10){
    //循環(huán)體
    i++;
}
解析

如果預(yù)測試條件的計(jì)算結(jié)果為 true，則執(zhí)行循環(huán)體。如果不是 —— 它就會(huì)被跳過。每個(gè) while 循環(huán)都可以用 for 替換，反之亦然。

優(yōu)化 
// 原始循環(huán)
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 循環(huán)

do-while 是第三種循環(huán)，它是 JavaScript 中唯一的后測試循環(huán)。由循環(huán)體和后測試條件組成：

var i = 0;
do {
    //循環(huán)體
} while (i++ < 10);
解析

在這種類型的循環(huán)中，循環(huán)體總是至少執(zhí)行一次。然后評(píng)估測試后的條件，如果它是true，則執(zhí)行另一個(gè)循環(huán)周期。

優(yōu)化 
// 原始循環(huán)
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 循環(huán)

最后一種是 for-in 循環(huán)。它有一個(gè)非常特殊的用途 —— 枚舉 JavaScript 對象的命名屬性。 它的語法如下：

for (var prop in object){
    //loop body
}
解析

它的名稱與 for 循環(huán)類似。但是工作方式完全不同。而這種差異使它比另外三種循環(huán)慢得多，后者具有相同的性能特征，所以爭論哪個(gè)循環(huán)最快是沒有用的。

每次循環(huán)執(zhí)行時(shí)，變量 prop 會(huì)得到 object 的一個(gè)屬性。它將會(huì)不斷執(zhí)行，直到返回所有屬性為止。這些是對象自身的以及通過其原型鏈繼承的屬性。

注意事項(xiàng)

永遠(yuǎn)不要用“ for-in ”來迭代數(shù)組成員。

這種循環(huán)的每次迭代都會(huì)在實(shí)例或原型上進(jìn)行屬性查找，這使得 for-in 循環(huán)比其它循環(huán)要慢得多。對于相同次數(shù)的迭代，可能會(huì)比其它循環(huán)慢七倍。

結(jié)論

for ， while 和 do-while 循環(huán)都有類似的性能特征，因此沒有哪種類型比其他的更快或更慢。

避免使用 for-in 循環(huán)，除非你需要對大量未知對象屬性進(jìn)行迭代。

提高循環(huán)性能的最佳方法是減少每次迭代完成的工作量并減少循環(huán)迭代次數(shù)。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/103573.html

相關(guān)文章

  • WebAssembly 那些事兒

    摘要：的目標(biāo)是對高級(jí)程序中間表示的適當(dāng)?shù)图?jí)抽象，即代碼旨在由編譯器生成而不是由人來寫。表示把源代碼變成解釋器可以運(yùn)行的代碼所花的時(shí)間表示基線編譯器和優(yōu)化編 WebAssembly 那些事兒 什么是 WebAssembly？ WebAssembly 是除 JavaScript 以外，另一種可以在網(wǎng)頁中運(yùn)行的編程語言，并且相比之下在某些功能和性能問題上更具優(yōu)勢，過去我們想在瀏覽器中運(yùn)行代碼來對網(wǎng)...

    邱勇 評(píng)論0 收藏0

  • WebAssembly 系列（二）JavaScript Just-in-time (JIT) 工作原

    摘要：解釋器的利弊解釋器啟動(dòng)和執(zhí)行的更快。正是因?yàn)檫@個(gè)原因，解釋器看起來更加適合。這就是為什么最開始的瀏覽器都是用解釋器的原因。可是當(dāng)你運(yùn)行同樣的代碼一次以上的時(shí)候，解釋器的弊處就顯現(xiàn)出來了。起初，監(jiān)視器監(jiān)視著所有通過解釋器的代碼。 作者：Lin Clark 編譯：胡子大哈 翻譯原文：http://huziketang.com/blog/posts/detail?postId=58c12f...

    Lin_R 評(píng)論0 收藏0

  • 回到基礎(chǔ)：如何用原生 DOM API 生成表格

    摘要：接下來該填表了生成行和單元格為了填充表格可以遵循同樣的方法，但這次我們需要迭代數(shù)組中的每個(gè)對象。對于每個(gè)對象，我們可以使用生成單元格。 翻譯：瘋狂的技術(shù)宅原文：https://www.valentinog.com/bl... 本文首發(fā)微信公眾號(hào)：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 怎樣用原生 JavaScript 生成表格需？本文告訴你答案！...

    Sunxb 評(píng)論0 收藏0

  • 通過動(dòng)圖形象地為你介紹 Flexbox 是如何工作的（二）

    摘要：解釋器的利弊解釋器啟動(dòng)和執(zhí)行的更快。正是因?yàn)檫@個(gè)原因，解釋器看起來更加適合。這就是為什么最開始的瀏覽器都是用解釋器的原因。可是當(dāng)你運(yùn)行同樣的代碼一次以上的時(shí)候，解釋器的弊處就顯現(xiàn)出來了。起初，監(jiān)視器監(jiān)視著所有通過解釋器的代碼。 作者：Lin Clark 編譯：胡子大哈 翻譯原文：http://huziketang.com/blog/posts/detail?postId=58c12f...

    alanoddsoff 評(píng)論0 收藏0

  • 通過動(dòng)圖形象地為你介紹 Flexbox 是如何工作的（二）

    摘要：解釋器的利弊解釋器啟動(dòng)和執(zhí)行的更快。正是因?yàn)檫@個(gè)原因，解釋器看起來更加適合。這就是為什么最開始的瀏覽器都是用解釋器的原因。可是當(dāng)你運(yùn)行同樣的代碼一次以上的時(shí)候，解釋器的弊處就顯現(xiàn)出來了。起初，監(jiān)視器監(jiān)視著所有通過解釋器的代碼。 作者：Lin Clark 編譯：胡子大哈 翻譯原文：http://huziketang.com/blog/posts/detail?postId=58c12f...

    Shonim 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<