在現(xiàn)代網(wǎng)站開發(fā)中，javascript一直是不可或缺的工具之一。不管是響應(yīng)式設(shè)計(jì)、表單驗(yàn)證還是動(dòng)態(tài)刷新，javascript都有其重要的作用，但也經(jīng)常被人詬病其頁面性能問題。為了解決這一問題，現(xiàn)在許多理論和實(shí)踐已經(jīng)形成了一系列的優(yōu)化方案來提高javascript性能，并且讓我們在避免典型陷阱的同時(shí)使所寫的代碼可維護(hù)和簡潔。
Code Splitting
在 Javascript 中合理地使用Code Splitting（代碼拆分）可以是 Javascript 更快且更高效。所謂 Code Splitting，就是將大型代碼庫分成多個(gè)小塊，以注重單一職責(zé)原則。通過這種方法，可以幫助減少首次裝載時(shí)的大小，并依據(jù)用戶和系統(tǒng)流、按需加載。
下面是一個(gè)簡單的例子，將所有 React 庫單獨(dú)打包，而不是在您的主要應(yīng)用中一起打包：

js
import React, { useState } from 'react'; //耗費(fèi)性能
...

將其修改為：

js
import { useState } from 'react/lib/React'; //優(yōu)化后
...

前者加載了整個(gè) React 庫，而后者僅加載我們當(dāng)前腳本中需要使用的部分。通過巧妙地使用代碼分離，我們可以在加載 javascript 文件時(shí)將下載最小化，從而改善應(yīng)用程序的性能。如果您使用 ReactJS 進(jìn)行開發(fā)，請確保使用 React.lazy 和 React.Suspense 來使您的組件按需加載。
使用 async 和 noopener 標(biāo)記
如果您的網(wǎng)站鏈接需要新的瀏覽器標(biāo)簽頁來打開，您應(yīng)該使用 rel="noopener" 標(biāo)記鏈接 。這將防止鏈接的打開頁訪問原始文檔對象模型(DOM)，從而提高性能。相同的技巧適用于該鏈接的 javascript。如果您使用 javascript 打開一個(gè)新標(biāo)簽頁，請使用 async 和 defer 屬性。
如下所示：

HTML
<a href=”#" 
rel=”noopener” 
onclick=”window.open(‘http://www.example.com’,'_blank','noopener’); 
return false;”> Open in new Tab</a>

使用事件委托
當(dāng)您需要處理大量元素時(shí)，事件委托是優(yōu)化的關(guān)鍵。事件委托的本質(zhì)是對多個(gè)元素應(yīng)該執(zhí)行的相同操作進(jìn)行處理。下面是一個(gè)例子：

js
const anchors = document.querySelectorAll('a');
for (let i = 0; i < anchors.length; i++) {
anchors[i].addEventListener('click', (event) => {
event.preventDefault();
console.log(event.target.href);
});
}

當(dāng)您單擊頁面上的鏈接時(shí)，該代碼遍歷所有鏈接，并將單擊事件附加到它們上。而事件委托的實(shí)現(xiàn)則是將事件處理程序綁定到父元素上。

js
const fatherElement = document.getElementById('main');
fatherElement.addEventListener('click', (event) => {
if(event.target.nodeName === 'A'){
event.preventDefault();
console.log(event.target.href);
}
});

由父元素監(jiān)聽所有子元素的事件，這樣便可以避免對所有鏈接的處理，顯著提高性能。
在循環(huán)內(nèi)定義變量
在 for 循環(huán)語句中定義變量，可以避免多次查找到該變量，從而減少執(zhí)行代碼的時(shí)間。為此，請定義一個(gè)變量，使其在循環(huán)中多次使用而不會(huì)被覆蓋。
如下所示：

js
for (let i = 0, len = array.length; i < len; i++) {
//Some code…
}

這里定義了 len 變量，而不是在 for 循環(huán)語句中調(diào)用 array.length。因此，每次循環(huán)時(shí)不需要每次查找數(shù)組長度，從而改善性能。
盡量減少使用全局變量
全局變量與性能問題有關(guān)。當(dāng)JavaScript引擎進(jìn)行解析和執(zhí)行時(shí)，必須考慮所有定義的全局變量。由于許多庫和框架定義許多函數(shù)和變量，為了防止與這些庫和框架的沖突，全局變量定義的數(shù)量應(yīng)盡可能少。

js
const uselessGlobalVars = ['handlerA', 'handlerB', 'handlerC',
'myVar','myVar1', 'string', 'stringVal'];
for (let i = 0; i < uselessGlobalVars.length; i++) {
window[uselessGlobalVars[i]] = null;
}

在這個(gè)例子中，我們將數(shù)組中的變量名稱與瀏覽器中的全局變量匹配。接著，使用 null 值來覆蓋應(yīng)用程序之外的變量，從而將全局變量的數(shù)量減小到最小。
結(jié)論
javascript優(yōu)化方案是一個(gè)長期而漫長的過程，僅使用一兩個(gè)技巧是沒有用的。您需要確保遵循一些最佳實(shí)踐，嘗試新技術(shù)和優(yōu)化技巧。如果您遵循最佳實(shí)踐，您的應(yīng)用程序?qū)⒏有阅軆?yōu)化。為了確保您對javascript中的優(yōu)化的深入學(xué)習(xí)，不斷地去閱讀相關(guān)資料，深入學(xué)習(xí)javascript中的知識(shí)和技巧。