聊聊十四個 JavaScript 的優化代碼建議
JavaScript 已經成為當下最流行的編程語言之一。根據 W3Tech，全世界幾乎 96% 的網站都在使用它。關于網站，你需要知道的最關鍵的一點是，你無法控制訪問你網站的用戶的硬件設備規格。訪問你的網站的終端用戶也許使用了高端或低端的設備，用著好的或差的網絡連接。這意味著你必須確保你的網站是盡可能優化的，你能夠滿足任何用戶的要求。
這里有一些技巧，可以幫助你更好地優化 JavaScript 代碼，從而提高性能。
1. 刪除不使用的代碼和功能
程序包含越多的代碼，給客戶端傳遞的數據就越多。瀏覽器也需要更多的時間去解析和編譯代碼。
有時，代碼里也許會包含完全未使用到的功能，最好只將這些額外的代碼保留在開發環境中，并且不要把它們留到生產環境中，因為無用的代碼可能會增加客戶端瀏覽器的負擔。
經常問自己那個函數、特性或代碼是否是必需的。
你可以手動的刪掉無用的代碼，也可以用工具 Uglify 或 谷歌開發的 Closure Compiler 幫你刪。你甚至可以使用一種叫做 tree shaking 的技術來刪除程序中未使用的代碼。例如打包工具 Webpack 就提供了它。你可以在 這里 了解更多關于 tree shaking 信息。還有，如果你想刪掉未使用的 npm 包，你可以輸入命令 npm prune 。
2. 盡可能緩存
緩存通過減少等待時間和網絡請求提高了網站的速度和性能，因此減少了展示資源的時間。可以借助于 緩存 API 或 HTTP 緩存 實現它。你也許好奇當內容改變時發生了什么。上述緩存機制能夠在滿足某些條件(如發布新內容)時處理和重新生成緩存。
3. 避免內存泄漏
作為一種高級語言，JS 負責幾個低級別的管理，比如內存管理。對于大多數編程語言來說，垃圾回收是一個常見的過程。通俗地說，垃圾回收就是簡單地收集和釋放，那些已經分配給對象，但目前又不被程序任一部分使用的內存。在像 C 這樣的編程語言中，開發者必須使用 malloc() 和 dealloc() 函數來處理內存分配和回收。
盡管垃圾回收是 JavaScript 自動執行的，但在某些情況下，它可能并不完美。在 JavaScript ES6 中，Map 和 Set 與它們的“weaker”兄弟元素一起被引入。“weaker”對應著 WeakMap 和 WeakSet，持有的是每個鍵對象的“弱引用”。它們允許對未引用的值進行垃圾收集，從而防止內存泄漏。了解更多關于 WeakMaps 的信息。
4. 盡早跳出循環 Try to Break Out of Loops Early
執行循環在代碼量大的循環中肯定會消耗大量寶貴的時間，這就是為什么要盡早打破循環的原因。你可以使用 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]);
- }
5. 最小化變量的計算次數
要減少計算變量的次數，可以使用閉包。JavaScript 中的閉包允許你從內部函數訪問外部函數作用域。每次創建一個函數時都會創建閉包——但不調用。內部函數可以訪問外部作用域的變量，即使外部函數已經調用結束。
讓我們看兩個例子，看看這是怎么回事。這些例子的靈感來自 Bret 的博客。
- 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() 的常量。并且當調用內部函數并傳參 name 時，不需要再次實例化這些常量。
6. 最小化 DOM 的訪問
與其他 JavaScript 語句相比，訪問 DOM 要慢一些。如果你要操作 DOM，從而觸發重繪布局，那么操作會變得相當緩慢。
要減少訪問 DOM 元素的次數，請訪問它一次，并將其作為局部變量使用。當需求完成時，確保通過將變量設置為 null 來刪除該變量的值。這將防止內存泄漏，因為它允許垃圾回收。
7. 壓縮文件
通過使用諸如 Gzip 之類的壓縮方法，可以減小 JavaScript 文件的大小。這些較小的文件將提升網站性能，因為瀏覽器只需要下載較小的資源。
這些壓縮可以減少多達 80% 的文件大小。在這里了解更多關于 壓縮：https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text_compression_with_gzip。
8. 縮小你的最終代碼
有些人認為縮小和壓縮是一樣的。但卻相反，它們是不同的。在壓縮中，使用特殊的算法來改變輸出文件的大小。但在縮小中，需要刪除 JavaScript 文件中的注釋和額外的空格。這個過程可以在網上找到的許多工具和軟件包的幫助下完成。縮小已經成為頁面優化的標準實踐和前端優化的主要組成部分。
縮小可以減少你的文件大小高達 60%。
9. 使用節流 throttle 和防抖 debounce
通過使用這兩種技術，我們可以嚴格執行代碼需要處理事件的次數。
節流是指函數在指定時間內被調用的最大次數。例如，“最多每 1000 毫秒執行一次 onkeyup 事件函數”。這意味著如果你每秒輸入 20 個鍵，該事件將每秒只觸發一次。這將減少代碼的加載。
另一方面，防抖是指函數在上次觸發后再次觸發要間隔的最短時間。換句話說，“僅當經過 600 毫秒而沒有調用該函數時才執行該函數”。這將意味著，你的函數將不會被調用，直到 600 毫秒后，最后一次執行相同的函數。要了解更多關于節流和防抖的知識，這里有一個快速閱讀。
你可以實現自己的防抖和節流函數，也可以從 Lodash 和 Underscore 等庫導入它們。
10. 避免使用 delete 關鍵字
delete 關鍵字用于從對象中刪除屬性。關于這個 delete 關鍵字的性能，已經有一些爭議。你可以在 此處 和 [此處](https://stackoverflow.com/questions/43594092/slow-delete-of-object- propertieses-in-js-in-v8/44008788) 中查看它們。這個問題有望在未來的更新中得到解決。
As an alternative, you can simply to set the unwanted property as undefined. 另一種選擇是，你可以直接將將不想要的屬性設置為 undefined。
- const object = {name:"Jane Doe", age:43};
- object.age = undefined;
你還可以使用 Map 對象，因為根據 Bret，Map 的 delete 方法被認為更快。
11. 使用異步代碼防止線程阻塞
你應該知道 JavaScript 是同步的，也是單線程的。但是在某些情況下，可能會花費大量的時間來執行一段代碼。在本質上同步意味著，這段代碼將阻止其他代碼語句的運行，直到它完成執行，這會降低代碼的整體性能。
但其實，我們可以通過實現異步代碼來避免這種情況。異步代碼以前是以回調的形式編寫的，但是在 ES6 中引入了一種處理異步代碼的新風格。這種新風格被稱為 promises。
等等…
- JavaScript默認是同步的，也是單線程的。
為什么在單一線程上運行，還能運行異步代碼?這是很多人感到困惑的地方。這要歸功于瀏覽器外殼下運行的 JavaScript 引擎。JavaScript 引擎是執行 JavaScript 代碼的計算機程序或解釋器。JavaScript 引擎可以用多種語言編寫。例如，支持 Chrome 瀏覽器的 V8 引擎是用 c++ 編寫的，而支持 Firefox 瀏覽器的 SpiderMonkey 引擎是用 C 和 C++ 編寫的。
這些 JavaScript 引擎可以在后臺處理任務。根據 Brian，調用棧識別 Web API 的函數，并將它們交給瀏覽器處理。一旦瀏覽器處理完成這些任務，它們將返回并作為回調推到堆棧上。
你有時可能想知道，Node.js 在沒有瀏覽器幫助的情況下是如何運行的。事實上，為 Chrome 提供動力的 V8 引擎同樣也為 Node.js 提供動力。
12. 使用代碼分割
如果你有使用 Google Light House 的經驗，你就會熟悉一個叫做“first contentful paint”的度量。它是 Lighthouse 報告的性能部分跟蹤的六個指標之一。
First Contentful Paint(FCP)測量用戶導航到頁面后瀏覽器渲染 DOM 第一個內容所花費的時間。頁面上的圖像、非白色獲得更高 FCP 分數的最好方法之一是使用代碼分割。代碼分割是一種在開始時只向用戶發送必要模塊的技術。減少最初傳輸的有效內容的大小，會顯著地影響 FCP 得分。
流行的模塊打包工具(如 webpack)提供了代碼分割功能。你可以在原生 ES 模塊的幫助下，加載各個模塊。
13. 使用異步 async 和延遲 defer
在現代網站中，腳本比 HTML 更密集，它們的尺寸更大，消耗更多的處理時間。默認情況下，瀏覽器必須等待腳本下載、執行，然后處理頁面的其余部分。
龐大的腳本可能會阻塞網頁的加載。為了避免這種情況，JavaScript 提供了兩種技術，即異步和延遲。你只需將這些屬性添加到 < script > 標簽。
異步是告訴瀏覽器在不影響頁面渲染的情況下加載腳本。換句話說，頁面不需要等待異步腳本，內容就會被處理和顯示。
延遲是在呈現完成后告訴瀏覽器加載腳本的地方。如果你同時指定了兩者，async 在現代瀏覽器中優先執行，而只支持 defer 但不支持 async 的舊瀏覽器將退回到 defer。
這兩個屬性可以極大地幫助你減少頁面加載時間。
14. 使用 Web Workers 在后臺運行 CPU 密集型任務
Web Workers 允許在后臺線程中運行腳本。如果你有一些高度密集的任務，你可以將任務分配給 web workers, web workers 將運行它們而不干擾用戶界面。創建之后，web worker 可以通過向 JavaScript 代碼指定的事件處理程序發送消息來與 JavaScript 代碼通信。反之亦然。
