提高JavaScript執行效率的23個實用技巧!

編程語言 JavaScript HTML Chrome JSON 前端學習指南 2018-12-15
提高JavaScript執行效率的23個實用技巧!

JavaScript

JavaScript是一門非常流行的編程語言,許多開發者都會把JavaScript選為入門語言,本文向大家分享JavaScript提高執行效率的小技巧、最佳實踐等非常實用的內容

本文向大家分享23種JavaScript提高執行效率的小技巧、最佳實踐等非常實用的內容。當然JavaScript的實用技巧不止這些,還有很多即好玩又能提高程序運行效率的技巧,以後我們會繼續分享給大家!

文中所提供的代碼片段都已經過最新版的Chrome測試

1.使用邏輯符號&&或者||進行條件判斷

提高JavaScript執行效率的23個實用技巧!

使用邏輯符號&&或者||進行條件判斷

“||”也可以用來設置函數參數的默認值

提高JavaScript執行效率的23個實用技巧!

“||”也可以用來設置函數參數的默認值

2.使用map()方法來遍歷數組

提高JavaScript執行效率的23個實用技巧!

使用map()方法來遍歷數組

3.舍入小數位數

提高JavaScript執行效率的23個實用技巧!

4.浮點數問題

提高JavaScript執行效率的23個實用技巧!

浮點數問題

0.1+0.2等於0.30000000000000004,為什麼會發生這種情況?

根據IEEE754標準,你需要知道的是所有JavaScript數字在64位二進制內的都表示浮點數。開發者可以使用toFixed()toPrecision()方法來解決這個問題。

5.使用for-in loop檢查遍歷對象屬性

下面這段代碼主要是為了避免遍歷對象屬性。

提高JavaScript執行效率的23個實用技巧!

使用for-in loop檢查遍歷對象屬性

6.逗號操作符

提高JavaScript執行效率的23個實用技巧!

逗號操作符

7.計算或查詢緩存變量

在使用jQuery選擇器的情況下,開發者可以緩存DOM元素

提高JavaScript執行效率的23個實用技巧!

計算或查詢緩存變量

8.在將參數傳遞到isFinite()之前進行驗證

提高JavaScript執行效率的23個實用技巧!

在將參數傳遞到isFinite()之前進行驗證

9.在數組中避免負向索引

提高JavaScript執行效率的23個實用技巧!

確保參數傳遞到indexOf()方法裡是非負向的。

10.(使用JSON)序列化和反序列化

提高JavaScript執行效率的23個實用技巧!

(使用JSON)序列化和反序列化

11.避免使用eval()或Function構造函數

eval()和Function構造函數被稱為腳本引擎,每次執行它們的時候都必須把源碼轉換成可執行的代碼,這是非常昂貴的操作。

提高JavaScript執行效率的23個實用技巧!

避免使用eval()或Function構造函數

12.避免使用with()方法

如果在全局區域裡使用with()插入變量,那麼,萬一有一個變量名字和它名字一樣,就很容易混淆和重寫。

13.避免在數組裡使用for-in loop

而不是這樣用:

提高JavaScript執行效率的23個實用技巧!

避免在數組裡使用for-in loop

這樣會更好:

提高JavaScript執行效率的23個實用技巧!

正確使用方法

因為i和len是循環中的第一個語句,所以每次實例化都會執行一次,這樣執行起來就會比下面這個更快:

提高JavaScript執行效率的23個實用技巧!

優化

為什麼?數組長度arraynNumbers在每次loop迭代時都會被重新計算。

14.不要向setTimeout()和setInterval()方法裡傳遞字符串

如果在這兩個方法裡傳遞字符串,那麼字符串會像eval那樣重新計算,這樣速度就會變慢,而不是這樣使用:

提高JavaScript執行效率的23個實用技巧!

錯誤使用方法

相反,應該這樣用:

提高JavaScript執行效率的23個實用技巧!

正確使用方法

15.使用switch/case語句代替較長的if/else語句

如果有超過2個以上的case,那麼使用switch/case速度會快很多,而且代碼看起來更加優雅。

16.遇到數值範圍時,可以選用switch/casne

提高JavaScript執行效率的23個實用技巧!

用switch/casne

17.創建一個對象,該對象的屬性是一個給定的對象

可以編寫一個這樣的函數,創建一個對象,該對象屬性是一個給定的對象,好比這樣:

提高JavaScript執行效率的23個實用技巧!

創建一個對象,該對象的屬性是一個給定的對象

18.一個HTML escaper函數

提高JavaScript執行效率的23個實用技巧!

HTML escaper函數

19.在一個loop裡避免使用try-catch-finally

try-catch-finally在當前範圍裡運行時會創建一個新的變量,在執行catch時,捕獲異常對象會賦值給變量。

不要這樣使用:

提高JavaScript執行效率的23個實用技巧!

try-catch-finally錯誤使用方法

應該這樣使用:

提高JavaScript執行效率的23個實用技巧!

try-catch-finally正確使用方法

20.給XMLHttpRequests設置timeouts

如果一個XHR需要花費太長時間,你可以終止鏈接(例如網絡問題),通過給XHR使用setTimeout()解決。

提高JavaScript執行效率的23個實用技巧!

給XMLHttpRequests設置timeouts

此外,通常你應該完全避免同步Ajax調用。

21.處理WebSocket超時

一般來說,當創建一個WebSocket鏈接時,服務器可能在閒置30秒後鏈接超時,在閒置一段時間後,防火牆也可能會鏈接超時。

為了解決這種超時問題,你可以定期地向服務器發送空信息,在代碼裡添加兩個函數:一個函數用來保持鏈接一直是活的,另一個用來取消鏈接是活的,使用這種方法,你將控制超時問題。

添加一個timeID……

提高JavaScript執行效率的23個實用技巧!

處理WebSocket超時

keepAlive()方法應該添加在WebSocket鏈接方法onOpen()的末端,cancelKeepAlive()方法放在onClose()方法下面。

22.記住,最原始的操作要比函數調用快

對於簡單的任務,最好使用基本操作方式來實現,而不是使用函數調用實現。

例如

提高JavaScript執行效率的23個實用技巧!

基本操作方式:

提高JavaScript執行效率的23個實用技巧!

基本操作方式

23.編碼時注意代碼的美觀、可讀

JavaScript是一門非常好的語言,尤其對於前端工程師來說,JavaScript執行效率也非常重要。

我們在編寫JavaScript程序時注意一些小細節,掌握一些常用的實用小技巧往往會使程序更簡捷,程序執行效率更高!

相關推薦

推薦中...