首頁 web前端 js教程 JavaScript循環語句的效能問題

JavaScript循環語句的效能問題

Feb 28, 2017 pm 02:18 PM
javascript 迴圈語句 效能問題

在大部分程式語言中, 迴圈語句消耗了大部分時間
而循環語句又是十分重要的程式模式

在我們JavaScript中, 有四種循環類型

  1. for循環

  2. while迴圈

  3. do-while迴圈

  4. for-in迴圈

其中前三種循環在其他語言也很常見
for-in循環對於在學校學過C/C++的同學來說也許很新鮮
它每次迭代的同時會搜尋實例和原型屬性, 所以它每次迭代便會產生更多的開銷
for-in循環最終只有其他三種類型速度的1/7
所以, 除非我們明確需要迭代一個屬性數量未知的物件, 否則我們應盡量避免使用for-in
更不要用for-in循環去遍歷數組

我們可以這樣去迭代一個明確的物件

var props = [&#39;prop1&#39;, &#39;prop2&#39;],      i = 0;while(i < props.length){
    fn(obj[props[i++]]);
}
登入後複製

這段程式碼根據物件中的屬性, 建立一個物件屬性的陣列, 然後透過while循環來遍歷屬性列表並處理對應屬性值
這樣就可以不用查找物件的每一個屬性, 減少了循環的開銷

上面做法的前提是物件內部的屬性是已知的
如果我們不知道物件內部的實作
還要處理物件本身的屬性,只能這樣做了

for(var prop in obj){    if(obj.hasOwnProperty(prop)){
        //...
    }
}
登入後複製

代價是每次迭代都要判斷這個屬性是不是物件自己的屬性而不是繼承來的

#除了for-in以外, 其他的循環性能都差不多, 所以使用的時候應該去考慮需求從而選擇循環類型


相信剛學習程式設計的小夥伴都是介樣寫循環的

for(var i = 0; i < arr.length; i++){
    fn(arr[i]);
}
登入後複製

這個循環語句每進行一次迭代, 都要去查找arr中的length屬性,這樣很耗時
所以我們可以進行優化,

for(var i = 0, len = arr.length; i < len; i++){
    fn(arr[i]);
}
登入後複製

把數組長度值緩存到一個局部變量, 這樣問題就解決了
while, do-while也是同理
根據數組長度, 很多瀏覽器中能節省大概25%的運行時間


我們還可以透過顛倒數組順序來略微提高性能

for(var i = items.length; i--;){
    process(items[i]);
}
登入後複製
var j = items.length;while(j--){
    process(items[j]);
}
登入後複製
var k = items.length - 1;do {
    process(items[k]);
}while(k--);
登入後複製

這樣做每次迭代控制條件從兩次判斷(迭代數是否小於總數, 是否為true)
減少為一次判斷(是否為true), 進一步提高了循環速度


##最後補充幾句

我們大家可能都用過一些數組方法比如arr.forEach()或者一些框架的迭代方法比如jQuery的$().each()去遍歷數組,
這些方法對數組的每一個元素執行一個函數
儘管它們很方便, 但它們要比普通的循環要慢很多(調用了外部的方法)
在所有情況下, 基於循環的迭代比基於函數的迭代快大約8倍 
所以我們在能使用普通循環(for,while,do-while)解決問題的時候盡量用這些普通循環

 以上就是JavaScript循環語句的性能問題的內容,更多相關內容請關注PHP中文網(www.php.cn)!



#

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1662
14
CakePHP 教程
1418
52
Laravel 教程
1311
25
PHP教程
1261
29
C# 教程
1234
24
如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

Vue開發注意事項:避免常見的記憶體佔用和效能問題 Vue開發注意事項:避免常見的記憶體佔用和效能問題 Nov 22, 2023 pm 02:38 PM

隨著Vue的使用越來越廣泛,Vue的開發者也需要考慮如何優化Vue應用程式的效能和記憶體佔用。本文將討論Vue開發的一些注意事項,幫助開發者避免常見的記憶體佔用和效能問題。避免無限循環當一個元件不斷更新自己的狀態,或一個元件不斷渲染它自己的子元件時,可能會導致無限循環。這種情況下,Vue將會耗盡記憶體並且使應用程式非常緩慢。為了避免這種情況,Vue提供了一

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

javascript如何使用insertBefore javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

See all articles