性能up!面向前端開發人員的14個JavaScript代碼優化技巧

全文共4872字，預計學習時長13分鐘

圖源：unsplash

用戶訪問網站設備的硬體規格我們沒法控制，終端用戶訪問網站的設備或高端或低端，網際網路連接或好或差，這意味著我們必須儘可能優化網站，以滿足所有用戶的需求。而與此同時，據W3Tech統計，全世界將近96%的網站都在使用JavaScript，JavaScript已成為有史以來最熱門的程式語言之一。

以下是一些小貼士，以供你更好地優化JavaScript代碼，展現更好的性能。

順便一提，請確保共享和重用JS組件，以達成高質量代碼(需要時間來生成)和合理交付時間之間的恰當平衡。可以使用Bit (Github)之類的流行工具將項目中的組件（vanilla JS，TS，React，Vue等）共享到Bit的組件中心，這樣不會浪費太多時間。

1.刪除不用的代碼和功能

應用程式包含的代碼越多，需要傳輸到客戶端的數據就越多。瀏覽器解析代碼所需時間也越長，有時有些功能可能根本沒有用到。最好只在開發環境中保留這些額外的代碼，而不要將其用於生產環境，這樣就不會給客戶端的瀏覽器帶來無用代碼的負擔。

不斷詢問自己某個功能、特性或代碼是否必要。可以手動或使用Uglify或google’s closurecompiler等工具移除不用的代碼，甚至可以用一種名為搖樹優化（tree shaking）的技術，從應用程式中移除不用的代碼。

Webpack之類的打包器便提供這種技術，如果想刪除不用的npm包，可以使用npm prune命令。

圖源：unsplash

2.隨時緩存

緩存通過減少延遲和網絡流量來提高網站的速度和性能，從而縮短顯示資源所需的時間。這可以通過緩存應用程式接口（Cache API）或超文本傳輸協議緩存（HTTPcaching）來實現。在滿足特定條件(如發布新內容)時，上述緩存機制能夠處理和重新生成緩存。

3.避免內存洩漏

高級語言JS負責幾個底層管理，比如內存管理。垃圾回收機制在大多數程式語言中十分常見。通俗來說，垃圾回收機制就是簡單地收集和釋放已經分配給目標對象的內存，而這些內存並沒有在程序的任何部分使用。C語言之類的程式語言中，開發人員必須使用malloc()和dealloc()函數來分配和釋放內存。

儘管JavaScript自動執行垃圾回收，但有時它並不完美。JavaScript ES6中，映射（Map）和集合（Set）和它們的「較弱」的同胞一起引入。這種「較弱」的同類被稱為WeakMap和WeakSet，它們對對象的引用「較弱」，允許對未引用的值進行垃圾回收，從而防止內存洩漏。

4.儘早跳出循環

大周期循環必然會消耗大量寶貴時間，因此要儘早跳出循環。關鍵字break和continue可以做到這一點。編寫最高效的代碼是你的責任。在下面的例子中，如果沒有跳出（break）循環，代碼將運行循環1000000000次，這顯然導致了重載。

let arr = new Array(1000000000).fill('----');

arr[970] = 'found';

for (let i = 0; i < arr.length; i++) {

if (arr[i] === 'found') {

console.log("Found");

break;

}

}

在下面的例子中，若循環與條件不匹配時沒有使用繼續（continue）關鍵字，該函數將持續運行1000000000次。我們僅處理處於偶數位置的數組元素，這將循環執行減少了近一半。

let arr = new Array(1000000000).fill('----');

arr[970] = 'found';

for (let i = 0; i < arr.length; i++) {

if(i%2!=0){

continue;

};

process(arr[i]);

}

圖源：unsplash

5.最小化變量計算次數

可使用閉包減少變量的計算次數。通俗來說，JavaScript中的閉包可以從內部函數訪問外部函數。每次創建函數時都會創建閉包，而不是調用。即使外部函數已經返回，內部函數也可以訪問外部作用域的變量。

通過以下兩個實例來解釋這一點：

function findCustomerCity(name) {

const texasCustomers = ['John','Ludwig', 'Kate'];

const californiaCustomers = ['Wade','Lucie','Kylie'];

return texasCustomers.includes(name) ?'Texas' :

californiaCustomers.includes(name) ?'California' : 'Unknown';

};

多次調用上述函數，每次都會創建一個新對象。每次調用中，內存都被畫蛇添足地重新分配給變量texasCustometrs 和californiaCustomers。

使用帶有閉包的解決方案可僅實例化變量一次。看看下面的例子：

function findCustomerCity() {

const texasCustomers = ['John','Ludwig', 'Kate'];

const californiaCustomers = ['Wade','Lucie','Kylie'];

return name =>texasCustomers.includes(name) ? 'Texas' :

californiaCustomers.includes(name) ?'California' : 'Unknown';

};let cityOfCustomer = findCustomerCity();cityOfCustomer('John');//Texas

cityOfCustomer('Wade');//California

cityOfCustomer('Max');//Unknown

上例中，在閉包的輔助下，返回到變量cityOfCustomer的內部函數可以訪問外部函數findCustomerCity()的常量。每當內部函數被調用，其名稱作為參數傳遞，不需要再次實例化常數。

6.避免使用delete關鍵字

delete關鍵字用於從對象中移除屬性。對於delete關鍵字的性能，用戶已頗有微詞，不足之處預計在未來的更新中得到修復。你可以選擇簡單地將不需要的屬性設置為undefined。

const object = {name:"Jane Doe", age:43};

object.age = undefined;

也可以使用地圖（Map）對象，據布雷特所說，此種方式更為快捷。

7.最小化DOM訪問

與其他JavaScript語句相比，訪問DOM的速度很慢。對DOM進行更改會觸發布局的重新繪製，網站運行愈加緩慢。一次性訪問單個DOM元素並將其用作局部變量以減少訪問次數。任務完成後，務必將變量設置為null以移除該變量的值。這將觸發垃圾回收機制以防止內存洩漏。

8.壓縮文件

圖源：takscan

使用諸如Gzip之類的壓縮方法可縮小JavaScript文件的大小。鑑於瀏覽器所需下載資料縮小，網站性能也隨之提高。壓縮可將文件大小減少80%。

9.縮減最終代碼

有人認為縮減和壓縮是一樣的，事實並不是這樣。壓縮使用特殊算法來改變文件的輸出大小，縮減則需刪除JavaScript文件中的注釋和多餘空格。這一過程可以在許多工具和包的幫助下完成，這些工具和包都可以在網上找到。縮減已成為頁面優化的標準做法，也是前端優化的主要組成部分。

縮減可將文件大小減少60%。

10.使用節流（throtte）和去抖動（debounce）

節流和去抖動可嚴格控制代碼處理事件的次數。

節流指定函數可以超時的最大次數。例如，「每1000毫秒最多執行一次onkeyup事件函數。」這意味著如果每秒輸入20個鍵，事件每秒只會觸發一次，這將減少代碼的負載。

去抖動指定函數最小的持續時間，該時間是該函數自上一次執行後再次運行的時間。換句話說，「只有在經過600毫秒而沒有調用該函數的情況下，才會執行這個函數。」這就意味著自最後一次執行該函數起600毫秒內，該函數不會被調用。

11.使用異步和延遲

圖源：unsplash

現代網站中，腳本比超文本標記語言（HTML）更密集，大小更大，處理時間更長。默認情況下，瀏覽器必須等待腳本下載並執行後，再處理頁面的其餘部分。這可能會導致龐大的腳本阻止網頁加載。為避免這種情況，JavaScript提供了兩種名為異步和延遲的技術，您只需將這些屬性添加到<script >標籤中。

異步是告訴瀏覽器在不影響渲染的情況下加載腳本。換句話說，頁面不等待異步腳本，而是處理和顯示內容。延遲是在渲染完成後告訴瀏覽器加載腳本。如果兩者都有指定，異步在現代瀏覽器上處於優先地位，而支持延遲但不支持異步的舊瀏覽器將回退到延遲。

這兩個屬性可以極大地減少頁面加載時間。

12.使用異步代碼防止線程阻塞

JavaScript默認是同步的，也是單線程的。但有時代碼需要大量時間來計算。從本質上講，同步意味著一段代碼會阻止其他代碼語句運行，直到執行結束。這會降低網站整體性能。但是我們可以通過實施異步代碼避免這種情況。異步代碼曾以回調形式編寫，但ES6引入了一種處理異步代碼的新風格，名為promises。

但如何在單線程上運行的同時還能運行異步代碼？這是很多人困惑的地方。一切因運行在瀏覽器後臺的JavaScript引擎而成為可能。JavaScript引擎是執行JavaScript代碼的電腦程式或解釋器。JavaScript引擎可以用多種語言編寫。例如，支持谷歌瀏覽器的V8引擎是用C++編寫的，而支持火狐瀏覽器的蜘蛛猴引擎是用C和C++編寫的。

這些JavaScript引擎可以在後臺處理任務。據布萊恩所說，調用棧識別網絡應用程式界面（Web API）的功能，並遞交至瀏覽器處理。一旦瀏覽器完成了這些任務，它們就會返回並作為回調被壓入堆棧。

在沒有瀏覽器的情況下，Node.js如何運行？事實上，驅動谷歌瀏覽器的V8引擎也支持Node.js。

13.使用代碼拆分

圖源：unsplash

如果你有過谷歌燈塔（Light House）的經驗，必然會熟悉一個名為「初始內容渲染（first contentful paint）」的指標。這是燈塔報告性能部分跟蹤的六個指標之一。

初始內容渲染(FCP)測量的是用戶導航到頁面後，瀏覽器渲染第一個DOM內容所需的時間。頁面上的圖像、非白色<畫布>元素和可縮放矢量圖形（SVG）被視為DOM內容，iframe中的任何內容都不含在內。

獲得更高FCP分數的最佳方式之一是使用代碼拆分。代碼拆分是一種在開始時只向用戶發送必要模塊的技術。通過減小最初傳輸的有效載荷的大小而極大影響FCP分數。熱門的模塊管理器，如webpack，提供代碼拆分功能。也可在本機ES模塊的幫助下加載單個模塊。

14.使用Web Workers在後臺運行CPU密集型任務

Web Workers允許在後臺線程中運行腳本。如果你有一些高強度的任務，你可以把它們分配給Web Workers，Web Workers可以在不幹擾用戶界面的情況下運行這些任務。創建之後，Web Workers可以向JavaScript代碼指定的事件處理程序發送消息來與該代碼進行通信，反之亦然。

圖源：unsplash

掌握小技巧，快樂編碼吧！

留言點讚關注

我們一起分享AI學習與發展的乾貨

如轉載，請後臺留言，遵守轉載規範