作者 | Mahdhi Rezvi ? 譯者 | 王強(qiáng) ? ? 策劃 | 李俊辰
這篇文章列舉了一些技巧，可幫助你寫出更好的 JavaScript 代碼，從而提高性能。JavaScript 已經(jīng)成為有史以來最受歡迎的編程語言之一。從 W3Tech 的數(shù)據(jù)來看，全世界將近 96％的網(wǎng)站都在使用它。關(guān)于 Web 有一個(gè)關(guān)鍵的事實(shí)是，你無法控制訪問網(wǎng)站的用戶所用設(shè)備。當(dāng)用戶訪問你的網(wǎng)站時(shí)，使用的可能是高端設(shè)備也可能是低端設(shè)備，網(wǎng)絡(luò)連接條件也有好有差。這意味著你必須盡可能優(yōu)化自己的網(wǎng)站，以滿足任何用戶的需求。附帶提一下，請(qǐng)共享和重用你的 JS 組件，以在高質(zhì)量代碼（寫起來需要花費(fèi)時(shí)間）和合理的交付時(shí)間之間保持適當(dāng)?shù)钠胶狻?/span>你可以使用 Bit 等流行工具將任何項(xiàng)目中的組件（普通 JS、TS、React、Vue 等）共享到 Bit 的組件中心，用不了多大功夫。你的應(yīng)用程序包含的代碼越多，就需要將更多的數(shù)據(jù)傳輸?shù)娇蛻舳恕g覽器也需要更多時(shí)間來分析和解釋代碼。有時(shí)，你可能打包了很多根本用不到的功能。最好只在開發(fā)環(huán)境中保留這些額外的代碼，而不要將其推送到生產(chǎn)環(huán)境中，以免給客戶端的瀏覽器增加負(fù)擔(dān)。要不斷問自己，某個(gè)功能或代碼段是否是必要的。你可以手動(dòng)移除未使用的代碼，也可以使用 Uglify 或谷歌的 Closure Compiler 之類的工具刪除它們。你還可以使用一種被稱為搖樹優(yōu)化的技術(shù)從應(yīng)用程序中刪除未使用的代碼。Webpack 這類打包軟件提供了這種技術(shù)，詳情可以參考這里：https://www.infoq.cn/article/dcKcJiT8aeEBNZbdotFF如果要?jiǎng)h除未使用的 npm 軟件包，可以使用命令 npm prune，詳細(xì)信息參考 NPM 文檔。https://docs.npmjs.com/cli-commands/prune.html緩存可以減少延遲和網(wǎng)絡(luò)流量，從而減少了顯示資源表示所需的時(shí)間，以提高網(wǎng)站的速度和性能。緩存可以借助 Cache API 或 HTTP caching 來實(shí)現(xiàn)。你可能想知道內(nèi)容更改時(shí)會(huì)發(fā)生什么。當(dāng)滿足某些條件（例如發(fā)布新內(nèi)容）時(shí)，上述緩存機(jī)制能夠處理和重新生成緩存。作為一種高級(jí)語言，JS 會(huì)負(fù)責(zé)一些底層管理工作，例如內(nèi)存管理。垃圾回收是大多數(shù)編程語言共有的過程。用外行術(shù)語來說，垃圾收集就是收集并釋放已分配給對(duì)象，但目前尚未在程序的任何部分中使用的內(nèi)存。在 C 這樣的編程語言中，開發(fā)人員必須使用 malloc() 和 dealloc() 函數(shù)來處理內(nèi)存分配和釋放操作。雖然在 JavaScript 中垃圾回收是自動(dòng)執(zhí)行的，但在某些情況下它也不是完美的。在 JavaScript ES6 中，引入了 Map 和 Set 及其“weaker”的同級(jí)對(duì)象。被稱為 WeakMap 和 WeakSet 的“較弱”對(duì)應(yīng)項(xiàng)持有對(duì)對(duì)象的“弱”引用。它們使未引用的值能夠被垃圾回收，從而防止內(nèi)存泄漏。你可以在此處了解有關(guān) WeakMaps 的更多信息：https://blog.bitsrc.io/understanding-weakmaps-in-javascript-6e323d9eec81超大循環(huán)肯定會(huì)耗費(fèi)很多的時(shí)間，所以你應(yīng)該盡早打破這些超大循環(huán)。你可以用 break 關(guān)鍵字和 continue 關(guān)鍵字來做這件事，從而編寫更高效的代碼。在下面的示例中，如果你沒有從循環(huán)中 break，則你的代碼將循環(huán)運(yùn)行 1000000000 （10億）次，顯然會(huì)過載的。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í)沒有 continue，則你仍將運(yùn)行該函數(shù) 1000000000 次。我們僅在數(shù)組元素處于偶數(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]);}
你可以在此處詳細(xì)了解循環(huán)和性能的關(guān)系：https://www.oreilly.com/library/view/high-performance-javascript/9781449382308/ch04.html為了減少計(jì)算變量的次數(shù)，可以使用閉包。通俗來說，JavaScript 中的閉包使你可以從內(nèi)部函數(shù)訪問外部函數(shù)作用域。每次創(chuàng)建函數(shù)（不調(diào)用）時(shí)都會(huì)創(chuàng)建閉包。內(nèi)部函數(shù)將有權(quán)訪問外部作用域的變量，即使在返回外部函數(shù)之后也是如此。我們來看兩個(gè)例子。這些示例均來自 Bret 的博客。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)用時(shí)，變量 texasCustomers 和 californiaCustomers 都會(huì)導(dǎo)致不必要的內(nèi)存重分配。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');//TexascityOfCustomer('Wade');//CaliforniacityOfCustomer('Max');//Unknown
在上面的示例中，借助于閉包，返回到變量 cityOfCustomer 的內(nèi)部函數(shù)可以訪問外部函數(shù) findCustomerCity() 的常量。而且，每當(dāng)以傳遞的名稱作為參數(shù)調(diào)用內(nèi)部函數(shù)時(shí)，都無需再次實(shí)例化常量。要了解關(guān)于閉包的更多信息，建議你閱讀 Prashant 的博客文章：https://medium.com/@prashantramnyc/javascript-closures-simplified-d0d23fa06ba4與其他 JavaScript 語句相比，訪問 DOM 的速度很慢。如果你對(duì) DOM 進(jìn)行更改，觸發(fā)了布局的重新繪制，那么就得等好一陣子了。為了減少訪問 DOM 元素的次數(shù)，請(qǐng)先訪問一次，然后將其用作局部變量。完成需求后，請(qǐng)一定將其設(shè)置為 null 來移除該變量的值。這將防止內(nèi)存泄漏，因?yàn)檫@會(huì)觸發(fā)垃圾回收過程。通過壓縮方法（例如 Gzip）可以減小 JavaScript 文件的大小。較小的文件會(huì)提升你的網(wǎng)站性能，因?yàn)闉g覽器只需下載較小的資產(chǎn)即可。這類壓縮手段最多可以減少 80％的文件大小。在此處閱讀有關(guān)壓縮的更多信息：https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#text_compression_with_gzip有人認(rèn)為縮小和壓縮是相同的，其實(shí)不然。在壓縮中，我們使用特殊算法來改變文件的輸出大小；在縮小時(shí)，我們需要?jiǎng)h除 JavaScript 文件中的注釋和多余的空格。可以在網(wǎng)上找到許多工具和軟件包來幫助完成這一過程。縮小已成為頁(yè)面優(yōu)化的標(biāo)準(zhǔn)做法，也是前端優(yōu)化的主要步驟之一。縮小可以讓文件大小最多減少 60％。你可以在此處閱讀有關(guān)縮小的更多信息：https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/optimize-encoding-and-transfer#minification_preprocessing_context-specific_optimizations我們可以使用 Throttle（節(jié)流）和 Debounce（防抖）這兩種技術(shù)來嚴(yán)格控制代碼需要處理事件的次數(shù)。節(jié)流是指定函數(shù)可以超時(shí)的最大次數(shù)。例如，“每 1000 毫秒最多執(zhí)行一次 onkeyup 事件函數(shù)”。也就是說哪怕你每秒敲 20 個(gè)鍵，該事件每秒也只會(huì)觸發(fā)一次。這將減少代碼的負(fù)擔(dān)。另一方面，防抖是指定自上次執(zhí)行相同函數(shù)以來再次運(yùn)行該函數(shù)的最短持續(xù)時(shí)間。換句話說，“上次調(diào)用函數(shù)后過最少 600 毫秒才執(zhí)行此函數(shù)”。要了解有關(guān)節(jié)流和防抖的更多信息，這里有一篇快速入門：https://css-tricks.com/the-difference-between-throttling-and-debouncing/你可以實(shí)現(xiàn)自己的防抖和節(jié)流函數(shù)，也可以從 Lodash 和 Underscore 之類的庫(kù)中導(dǎo)入它們。delete 關(guān)鍵字用于從對(duì)象中刪除屬性。這個(gè)關(guān)鍵字的性能表現(xiàn)不怎么好，預(yù)計(jì)它將在未來的更新中修復(fù)。或者，你可以簡(jiǎn)單地將不需要的屬性設(shè)置為 undefined。const object = {name:"Jane Doe", age:43};object.age = undefined;
你還可以使用 Map 對(duì)象，Bret 認(rèn)為它的 delete 方法會(huì)更快。你應(yīng)該知道 JavaScript 默認(rèn)情況下是同步的和單線程的。但是在某些情況下，你的代碼需要很大的計(jì)算量。代碼本質(zhì)上是同步的，意味著一段代碼運(yùn)行時(shí)將阻止其他代碼語句運(yùn)行，直到前者完成執(zhí)行為止。這會(huì)降低整體性能。但是我們可以通過異步代碼來避免這種情況。異步代碼以前以回調(diào)的形式編寫，但是 ES6 引入了一種處理異步代碼的新樣式。這種新樣式被稱為 Promise。你可以在 MDN 的官方文檔中了解有關(guān)回調(diào)和 Promise 的更多信息。https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/IntroducingJavaScript 默認(rèn)情況下是同步的，并且也是單線程的。如何在單個(gè)線程上運(yùn)行異步代碼呢？這是很多人感到困惑的地方。做到這一點(diǎn)，主要依賴運(yùn)行在瀏覽器后臺(tái)的 JavaScript 引擎。JavaScript 引擎是執(zhí)行 JavaScript 代碼的計(jì)算機(jī)程序或解釋器。JavaScript 引擎可以用多種語言編寫。例如，支持 Chrome 瀏覽器的 V8 引擎是用 C++ 編寫的，而支持 Firefox 瀏覽器的 SpiderMonkey 引擎是用 C 和 C++ 編寫的。這些 JavaScript 引擎可以在后臺(tái)處理任務(wù)。根據(jù) Brian 的說法，調(diào)用棧可以識(shí)別 Web API 的函數(shù)，并將其交給瀏覽器處理。瀏覽器完成這些任務(wù)后，它們將返回并作為回調(diào)被推上堆棧。你可能想知道 Node.js 是怎么做這些工作的，畢竟它沒有瀏覽器的幫助。實(shí)際上，支持 Chrome 的那個(gè) V8 引擎也是 Node.js 背后的支撐。這里有 Salil 的一篇很棒的博客文章，解釋了 Node 生態(tài)系統(tǒng)中的這一過程。https://medium.com/better-programming/is-node-js-really-single-threaded-7ea59bcc8d64如果你有使用 Google Light House 的經(jīng)驗(yàn)，肯定會(huì)熟悉一種稱為“first contentful paint”的指標(biāo)。它是 Lighthouse 報(bào)告的 Performance 部分中跟蹤的六個(gè)指標(biāo)之一。First Contentful Paint（FCP）衡量用戶轉(zhuǎn)到你的頁(yè)面后瀏覽器渲染第一段 DOM 內(nèi)容所花費(fèi)的時(shí)間。頁(yè)面上的圖像、非白色獲得更高的 FCP 分?jǐn)?shù)的最佳方法之一是使用代碼拆分。代碼拆分是一種在傳輸開始時(shí)僅將必要的模塊發(fā)送給用戶的技術(shù)。通過減小最初發(fā)送的載荷大小，這將極大地影響 FCP 分?jǐn)?shù)。流行的模塊打包器（例如 webpack）可為你提供代碼拆分功能。你還可以利用原生 ES 模塊來單獨(dú)加載各個(gè)模塊。你可以在此處詳細(xì)了解有關(guān)原生 ES 模塊的信息。https://blog.bitsrc.io/understanding-es-modules-in-javascript-a28fec420f73在現(xiàn)代網(wǎng)站中，腳本比 HTML 更為密集，其大小更大且消耗更多的處理時(shí)間。默認(rèn)情況下，瀏覽器必須等待腳本下載和執(zhí)行完畢后，再處理頁(yè)面的其余部分。于是笨重的腳本可能會(huì)阻止網(wǎng)頁(yè)的加載。為了避免這種情況，JavaScript 為我們提供了兩種分別稱為 async 和 defer 的技術(shù)。 