JavaScript 代碼優化技巧

當使用者通路你的網站時，使用的可能是高端裝置也可能是低端裝置，網絡連接配接條件也有好有差。這意味着你必須盡可能優化自己的網站，以滿足任何使用者的需求。

1. 删除未使用的代碼和功能

你的應用程式包含的代碼越多，就需要将更多的資料傳輸到用戶端。浏覽器也需要更多時間來分析和解釋代碼。有時，你可能打包了很多根本用不到的功能。最好隻在開發環境中保留這些額外的代碼，而不要将其推送到生産環境中，以免給用戶端的浏覽器增加負擔。

2. 盡可能的緩存

緩存可以減少延遲和網絡流量，進而減少了顯示資源表示所需的時間，以提高網站的速度和性能。緩存可以借助應用裡的緩存http緩存來實作。

3. 避免記憶體洩漏

作為一種進階語言，JS 會負責一些底層管理工作，例如記憶體管理。垃圾回收是大多數程式設計語言共有的過程。用外行術語來說，垃圾收集就是收集并釋放已配置設定給對象，但目前尚未在程式的任何部分中使用的記憶體。

雖然在 JavaScript 中垃圾回收是自動執行的，但在某些情況下它也不是完美的。在 JavaScript ES6 中，引入了 Map 和 Set 及其“weaker”的同級對象。被稱為 WeakMap 和 WeakSet 的“較弱”對應項持有對對象的“弱”引用。它們使未引用的值能夠被垃圾回收，進而防止記憶體洩漏。

4. 盡早打破循環

超大循環肯定會耗費很多的時間，是以你應該盡早打破這些超大循環。你可以用 break 關鍵字和 continue 關鍵字來做這件事，進而編寫更高效的代碼。

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';
};
           

如果你多次調用上面的函數，那麼每次都會建立一個新對象。每次調用時，變量 texasCustomers 和 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. 盡量減少 DOM 通路

與其他 JavaScript 語句相比，通路 DOM 的速度很慢。如果你對 DOM 進行更改，觸發了布局的重新繪制，那麼就得等好一陣子了。為了減少通路 DOM 元素的次數，請先通路一次，然後将其用作局部變量。完成需求後，請一定将其設定為 null 來移除該變量的值。這将防止記憶體洩漏，因為這會觸發垃圾回收過程。

7. 壓縮檔案

通過壓縮方法（例如 Gzip）可以減小 JavaScript 檔案的大小。較小的檔案會提升你的網站性能，因為浏覽器隻需下載下傳較小的資産即可。

8. 縮小最終代碼

有人認為縮小和壓縮是相同的，其實不然。在壓縮中，我們使用特殊算法來改變檔案的輸出大小；在縮小時，我們需要删除 JavaScript 檔案中的注釋和多餘的空格。可以在網上找到許多工具和軟體包來幫助完成這一過程。縮小已成為頁面優化的标準做法，也是前端優化的主要步驟之一，縮小可以讓檔案大小最多減少 60％。

9. 使用 Throttle 和 Debounce

我們可以使用 Throttle（節流）和 Debounce（防抖）這兩種技術來嚴格控制代碼需要處理事件的次數。你可以實作自己的防抖和節流函數，也可以從 Lodash 和 Underscore 之類的庫中導入它們。

10. 避免使用 Delete 關鍵字

delete 關鍵字用于從對象中删除屬性。這個關鍵字的性能表現不怎麼好，預計它将在未來的更新中修複。或者，你可以簡單地将不需要的屬性設定為 undefined。

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

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

你應該知道 JavaScript 預設情況下是同步的和單線程的。但是在某些情況下，你的代碼需要很大的計算量。代碼本質上是同步的，意味着一段代碼運作時将阻止其他代碼語句運作，直到前者完成執行為止。這會降低整體性能。

但是我們可以通過異步代碼來避免這種情況。異步代碼以前以回調的形式編寫，但是 ES6 引入了一種處理異步代碼的新樣式。這種新樣式被稱為 Promise。你可以在 MDN 的官方文檔中了解有關回調和 Promise 的更多資訊。

12. 使用代碼拆分

代碼拆分是一種在傳輸開始時僅将必要的子產品發送給使用者的技術。通過減小最初發送的載荷大小，這将極大地影響 FCP 分數。流行的子產品打包器（例如 webpack）可為你提供代碼拆分功能。你還可以利用原生 ES 子產品來單獨加載各個子產品。你可以在此處詳細了解有關原生 ES 子產品的資訊。

13. 使用 async 和 defer

在現代網站中，腳本比 HTML 更為密集，其大小更大且消耗更多的處理時間。預設情況下，浏覽器必須等待腳本下載下傳和執行完畢後，再處理頁面的其餘部分。于是笨重的腳本可能會阻止網頁的加載。為了避免這種情況，JavaScript 為我們提供了兩種分别稱為 async 和 defer 的技術。你隻需将這些屬性添加到<script>标記中即可。

14. 在背景運作 CPU 密集型任務

可以使用 Web Worker 在背景線程中運作腳本。如果你有一些高強度的任務，可以将它們配置設定給 Web Worker，這些 WebWorker 可以在不幹擾使用者界面的情況下運作它們。建立後，Web Worker 可以将消息釋出到該代碼指定的事件處理程式來與 JavaScript 代碼通信，反之亦然。

完結撒花，有疑問留言探讨哈~~~