本文轉(zhuǎn)載自公眾號(hào)“讀芯術(shù)”(ID：AI_Discovery)。

用戶訪問(wèn)網(wǎng)站設(shè)備的硬件規(guī)格我們沒法控制，終端用戶訪問(wèn)網(wǎng)站的設(shè)備或高端或低端，互聯(lián)網(wǎng)連接或好或差，這意味著我們必須盡可能優(yōu)化網(wǎng)站，以滿足所有用戶的需求。而與此同時(shí)，據(jù)W3Tech統(tǒng)計(jì)，全世界將近96%的網(wǎng)站都在使用JavaScript，JavaScript已成為有史以來(lái)最熱門的編程語(yǔ)言之一。

[[337965]]

以下是一些小貼士，以供你更好地優(yōu)化JavaScript代碼，展現(xiàn)更好的性能。

順便一提，請(qǐng)確保共享和重用JS組件，以達(dá)成高質(zhì)量代碼(需要時(shí)間來(lái)生成)和合理交付時(shí)間之間的恰當(dāng)平衡。可以使用Bit (Github)之類的流行工具將項(xiàng)目中的組件(vanilla JS，TS，React，Vue等)共享到Bit的組件中心，這樣不會(huì)浪費(fèi)太多時(shí)間。

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

應(yīng)用程序包含的代碼越多，需要傳輸?shù)娇蛻舳说臄?shù)據(jù)就越多。瀏覽器解析代碼所需時(shí)間也越長(zhǎng)，有時(shí)有些功能可能根本沒有用到。最好只在開發(fā)環(huán)境中保留這些額外的代碼，而不要將其用于生產(chǎn)環(huán)境，這樣就不會(huì)給客戶端的瀏覽器帶來(lái)無(wú)用代碼的負(fù)擔(dān)。

不斷詢問(wèn)自己某個(gè)功能、特性或代碼是否必要。可以手動(dòng)或使用Uglify或google’s closurecompiler等工具移除不用的代碼，甚至可以用一種名為搖樹優(yōu)化(tree shaking)的技術(shù)，從應(yīng)用程序中移除不用的代碼。

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

[[337966]]

圖源：unsplash

2. 隨時(shí)緩存

緩存通過(guò)減少延遲和網(wǎng)絡(luò)流量來(lái)提高網(wǎng)站的速度和性能，從而縮短顯示資源所需的時(shí)間。這可以通過(guò)緩存應(yīng)用程序接口(Cache API)或超文本傳輸協(xié)議緩存(HTTPcaching)來(lái)實(shí)現(xiàn)。在滿足特定條件(如發(fā)布新內(nèi)容)時(shí)，上述緩存機(jī)制能夠處理和重新生成緩存。

3. 避免內(nèi)存泄漏

高級(jí)語(yǔ)言JS負(fù)責(zé)幾個(gè)底層管理，比如內(nèi)存管理。垃圾回收機(jī)制在大多數(shù)編程語(yǔ)言中十分常見。通俗來(lái)說(shuō)，垃圾回收機(jī)制就是簡(jiǎn)單地收集和釋放已經(jīng)分配給目標(biāo)對(duì)象的內(nèi)存，而這些內(nèi)存并沒有在程序的任何部分使用。C語(yǔ)言之類的編程語(yǔ)言中，開發(fā)人員必須使用malloc()和dealloc()函數(shù)來(lái)分配和釋放內(nèi)存。

盡管JavaScript自動(dòng)執(zhí)行垃圾回收，但有時(shí)它并不完美。JavaScript ES6中，映射(Map)和集合(Set)和它們的“較弱”的同胞一起引入。這種“較弱”的同類被稱為WeakMap和WeakSet，它們對(duì)對(duì)象的引用“較弱”，允許對(duì)未引用的值進(jìn)行垃圾回收，從而防止內(nèi)存泄漏。

4. 盡早跳出循環(huán)

大周期循環(huán)必然會(huì)消耗大量寶貴時(shí)間，因此要盡早跳出循環(huán)。關(guān)鍵字break和continue可以做到這一點(diǎn)。編寫最高效的代碼是你的責(zé)任。在下面的例子中，如果沒有跳出(break)循環(huán)，代碼將運(yùn)行循環(huán)1000000000次，這顯然導(dǎo)致了重載。

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

在下面的例子中，若循環(huán)與條件不匹配時(shí)沒有使用繼續(xù)(continue)關(guān)鍵字，該函數(shù)將持續(xù)運(yùn)行1000000000次。我們僅處理處于偶數(shù)位置的數(shù)組元素，這將循環(huán)執(zhí)行減少了近一半。

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. 最小化變量計(jì)算次數(shù)

可使用閉包減少變量的計(jì)算次數(shù)。通俗來(lái)說(shuō)，JavaScript中的閉包可以從內(nèi)部函數(shù)訪問(wèn)外部函數(shù)。每次創(chuàng)建函數(shù)時(shí)都會(huì)創(chuàng)建閉包，而不是調(diào)用。即使外部函數(shù)已經(jīng)返回，內(nèi)部函數(shù)也可以訪問(wèn)外部作用域的變量。

通過(guò)以下兩個(gè)實(shí)例來(lái)解釋這一點(diǎn)：

function findCustomerCity(name) { 
  const texasCustomers = ['John','Ludwig', 'Kate']; 
  const californiaCustomers = ['Wade','Lucie','Kylie']; 
  
  return texasCustomers.includes(name) ?'Texas' : 
    californiaCustomers.includes(name) ?'California' : 'Unknown'; 
}; 

多次調(diào)用上述函數(shù)，每次都會(huì)創(chuàng)建一個(gè)新對(duì)象。每次調(diào)用中，內(nèi)存都被畫蛇添足地重新分配給變量texasCustometrs 和californiaCustomers。

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

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的內(nèi)部函數(shù)可以訪問(wèn)外部函數(shù)findCustomerCity()的常量。每當(dāng)內(nèi)部函數(shù)被調(diào)用，其名稱作為參數(shù)傳遞，不需要再次實(shí)例化常數(shù)。

6. 避免使用delete關(guān)鍵字

delete關(guān)鍵字用于從對(duì)象中移除屬性。對(duì)于delete關(guān)鍵字的性能，用戶已頗有微詞，不足之處預(yù)計(jì)在未來(lái)的更新中得到修復(fù)。你可以選擇簡(jiǎn)單地將不需要的屬性設(shè)置為undefined。

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

也可以使用地圖(Map)對(duì)象，據(jù)布雷特所說(shuō)，此種方式更為快捷。

7. 最小化DOM訪問(wèn)

與其他JavaScript語(yǔ)句相比，訪問(wèn)DOM的速度很慢。對(duì)DOM進(jìn)行更改會(huì)觸發(fā)布局的重新繪制，網(wǎng)站運(yùn)行愈加緩慢。一次性訪問(wèn)單個(gè)DOM元素并將其用作局部變量以減少訪問(wèn)次數(shù)。任務(wù)完成后，務(wù)必將變量設(shè)置為null以移除該變量的值。這將觸發(fā)垃圾回收機(jī)制以防止內(nèi)存泄漏。

8. 壓縮文件

圖源：takscan

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

9. 縮減最終代碼

有人認(rèn)為縮減和壓縮是一樣的，事實(shí)并不是這樣。壓縮使用特殊算法來(lái)改變文件的輸出大小，縮減則需刪除JavaScript文件中的注釋和多余空格。這一過(guò)程可以在許多工具和包的幫助下完成，這些工具和包都可以在網(wǎng)上找到。縮減已成為頁(yè)面優(yōu)化的標(biāo)準(zhǔn)做法，也是前端優(yōu)化的主要組成部分。

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

10. 使用節(jié)流(throtte)和去抖動(dòng)(debounce)

節(jié)流和去抖動(dòng)可嚴(yán)格控制代碼處理事件的次數(shù)。

節(jié)流指定函數(shù)可以超時(shí)的最大次數(shù)。例如，“每1000毫秒最多執(zhí)行一次onkeyup事件函數(shù)。”這意味著如果每秒輸入20個(gè)鍵，事件每秒只會(huì)觸發(fā)一次，這將減少代碼的負(fù)載。

去抖動(dòng)指定函數(shù)最小的持續(xù)時(shí)間，該時(shí)間是該函數(shù)自上一次執(zhí)行后再次運(yùn)行的時(shí)間。換句話說(shuō)，“只有在經(jīng)過(guò)600毫秒而沒有調(diào)用該函數(shù)的情況下，才會(huì)執(zhí)行這個(gè)函數(shù)。”這就意味著自最后一次執(zhí)行該函數(shù)起600毫秒內(nèi)，該函數(shù)不會(huì)被調(diào)用。

11. 使用異步和延遲

[[337967]]

圖源：unsplash

現(xiàn)代網(wǎng)站中，腳本比超文本標(biāo)記語(yǔ)言(HTML)更密集，大小更大，處理時(shí)間更長(zhǎng)。默認(rèn)情況下，瀏覽器必須等待腳本下載并執(zhí)行后，再處理頁(yè)面的其余部分。這可能會(huì)導(dǎo)致龐大的腳本阻止網(wǎng)頁(yè)加載。為避免這種情況，JavaScript提供了兩種名為異步和延遲的技術(shù)，您只需將這些屬性添加到<script>標(biāo)簽中。

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

這兩個(gè)屬性可以極大地減少頁(yè)面加載時(shí)間。

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

JavaScript默認(rèn)是同步的，也是單線程的。但有時(shí)代碼需要大量時(shí)間來(lái)計(jì)算。從本質(zhì)上講，同步意味著一段代碼會(huì)阻止其他代碼語(yǔ)句運(yùn)行，直到執(zhí)行結(jié)束。這會(huì)降低網(wǎng)站整體性能。但是我們可以通過(guò)實(shí)施異步代碼避免這種情況。異步代碼曾以回調(diào)形式編寫，但ES6引入了一種處理異步代碼的新風(fēng)格，名為promises。

但如何在單線程上運(yùn)行的同時(shí)還能運(yùn)行異步代碼?這是很多人困惑的地方。一切因運(yùn)行在瀏覽器后臺(tái)的JavaScript引擎而成為可能。JavaScript引擎是執(zhí)行JavaScript代碼的計(jì)算機(jī)程序或解釋器。JavaScript引擎可以用多種語(yǔ)言編寫。例如，支持谷歌瀏覽器的V8引擎是用C++編寫的，而支持火狐瀏覽器的蜘蛛猴引擎是用C和C++編寫的。

這些JavaScript引擎可以在后臺(tái)處理任務(wù)。據(jù)布萊恩所說(shuō)，調(diào)用棧識(shí)別網(wǎng)絡(luò)應(yīng)用程序界面(Web API)的功能，并遞交至瀏覽器處理。一旦瀏覽器完成了這些任務(wù)，它們就會(huì)返回并作為回調(diào)被壓入堆棧。

在沒有瀏覽器的情況下，Node.js如何運(yùn)行?事實(shí)上，驅(qū)動(dòng)谷歌瀏覽器的V8引擎也支持Node.js。

13. 使用代碼拆分

[[337968]]

圖源：unsplash

如果你有過(guò)谷歌燈塔(Light House)的經(jīng)驗(yàn)，必然會(huì)熟悉一個(gè)名為“初始內(nèi)容渲染(first contentful paint)”的指標(biāo)。這是燈塔報(bào)告性能部分跟蹤的六個(gè)指標(biāo)之一。

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

獲得更高FCP分?jǐn)?shù)的最佳方式之一是使用代碼拆分。代碼拆分是一種在開始時(shí)只向用戶發(fā)送必要模塊的技術(shù)。通過(guò)減小最初傳輸?shù)挠行лd荷的大小而極大影響FCP分?jǐn)?shù)。熱門的模塊管理器，如webpack，提供代碼拆分功能。也可在本機(jī)ES模塊的幫助下加載單個(gè)模塊。

14. 使用Web Workers在后臺(tái)運(yùn)行CPU密集型任務(wù)

Web Workers允許在后臺(tái)線程中運(yùn)行腳本。如果你有一些高強(qiáng)度的任務(wù)，你可以把它們分配給Web Workers，Web Workers可以在不干擾用戶界面的情況下運(yùn)行這些任務(wù)。創(chuàng)建之后，Web Workers可以向JavaScript代碼指定的事件處理程序發(fā)送消息來(lái)與該代碼進(jìn)行通信，反之亦然。

圖源：unsplash

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