JavaScript循環語句的效能問題
在大部分程式語言中, 迴圈語句消耗了大部分時間
而循環語句又是十分重要的程式模式
在我們JavaScript中, 有四種循環類型
for循環
while迴圈
do-while迴圈
for-in迴圈
其中前三種循環在其他語言也很常見
for-in循環對於在學校學過C/C++的同學來說也許很新鮮
它每次迭代的同時會搜尋實例和原型屬性, 所以它每次迭代便會產生更多的開銷
for-in循環最終只有其他三種類型速度的1/7
所以, 除非我們明確需要迭代一個屬性數量未知的物件, 否則我們應盡量避免使用for-in
更不要用for-in循環去遍歷數組
我們可以這樣去迭代一個明確的物件
var props = ['prop1', 'prop2'], 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)解決問題的時候盡量用這些普通循環
#

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

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

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

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

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

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

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

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

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