如果你的網(wǎng)站速度很慢，并且認(rèn)為頁面中嵌入的邏輯可能是原因，那么你可以使用以下五個(gè) JavaScript 性能優(yōu)化技巧來為用戶加快速度。

1.減少onReady事件的數(shù)量

一旦加載了 HTML 頁面并應(yīng)用了所有 CSS 選擇器，就會(huì)觸發(fā) onReady 事件。通常，開發(fā)人員會(huì)在此處放置初始化頁面組件和啟動(dòng)各種 JavaScript 函數(shù)所需的邏輯。

然而，隨著時(shí)間的推移，開發(fā)人員傾向于向頁面添加越來越多的 onReady 事件。在故障排除例程中，通常會(huì)添加 onReady 事件來解決問題，但不會(huì)在解決問題時(shí)將其刪除。其他時(shí)候，與給定 Web 組件關(guān)聯(lián)的 HTML 會(huì)從頁面中刪除，但相應(yīng)的 onReady 事件不會(huì)，這會(huì)導(dǎo)致多余的 JavaScript 不必要地消耗時(shí)鐘周期。此外，onReady 事件通常被編碼到一個(gè)通用的 JavaScript 文件中，該文件在每次頁面加載時(shí)都會(huì)運(yùn)行，即使該函數(shù)僅在少數(shù)幾個(gè)頁面上需要。

2. 使用 let not var

當(dāng)使用 var 關(guān)鍵字聲明 JavaScript 變量時(shí)，它在整個(gè)頁面的全局范圍內(nèi)，并在頁面的整個(gè)生命周期中維護(hù)在內(nèi)存中。但是，當(dāng)使用 let 關(guān)鍵字聲明變量時(shí)，將應(yīng)用塊范圍。因此，該變量會(huì)在塊執(zhí)行后從內(nèi)存中刪除。

如果 Ajax 響應(yīng)、JSON 數(shù)據(jù)或 XML 等長(zhǎng)文本字符串保存在全局變量中，瀏覽器會(huì)很快耗盡可尋址內(nèi)存，這將嚴(yán)重影響頁面性能。一個(gè)非常容易實(shí)現(xiàn)的 JavaScript 性能優(yōu)化技巧就是用 let 替換代碼中的每個(gè) var。

3. 縮小合并

如果你的網(wǎng)頁鏈接到多個(gè) JavaScript 庫(kù)，一個(gè)快速簡(jiǎn)單的優(yōu)化方法是將所有這些 JavaScript 庫(kù)合并到一個(gè)文件中。

當(dāng) JavaScript 加載時(shí)，它會(huì)阻止其他資源的下載，例如圖像、JSON 和 CSS 文件。并且由于瀏覽器允許與 Internet 建立的外部連接數(shù)量有限，如果你引用了七個(gè)或八個(gè)外部 JavaScript 文件，你可能會(huì)完全阻止下載可能用于呈現(xiàn)內(nèi)容的其他資源顯示在首屏之上。通過將所有 JavaScript 組合到一個(gè)文件中，只使用一個(gè)外部連接，這允許瀏覽器同步下載其他資源。

另一種減小 JavaScript 文件大小的簡(jiǎn)單方法是對(duì)它們應(yīng)用最小化程序，例如 JSCompress。最小化器會(huì)去除空格和不必要的文本元素，從而減小 JavaScript 文件的大小。反過來，這優(yōu)化了 JavaScript 文件的下載時(shí)間。將多個(gè) JavaScript 文件合并為一個(gè)以減少傳出網(wǎng)絡(luò)連接的數(shù)量。

4. 不要重新發(fā)明 JavaScript API

JavaScript 有幾個(gè)內(nèi)置的 API，允許對(duì)集合或數(shù)組進(jìn)行高效的迭代。使用 Array 的原型構(gòu)造函數(shù)，你可以使用類似 lambda 的語法將函數(shù)應(yīng)用于列表中的所有項(xiàng)目或執(zhí)行操作，例如排序或反轉(zhuǎn)。

這些內(nèi)置方法非常高效，并由瀏覽器進(jìn)行了優(yōu)化。但是，一些開發(fā)人員并不了解這些方法，而是編寫迭代循環(huán)來達(dá)到相同的目的。

無需自己重新發(fā)明這些函數(shù)式方法。這不僅浪費(fèi)時(shí)間，而且還引入了不必要的 JavaScript 性能問題。

5. 在服務(wù)器上執(zhí)行密集邏輯

將計(jì)算操作卸載到客戶端的能力是客戶端計(jì)算的一個(gè)關(guān)鍵優(yōu)勢(shì)，但客戶端渲染也可能會(huì)給功率不足的手持設(shè)備帶來巨大的負(fù)載。

例如，如果渲染圖表或電子表格需要大量計(jì)算，并且該計(jì)算導(dǎo)致 JavaScript 性能問題，請(qǐng)考慮將其移動(dòng)到服務(wù)器并簡(jiǎn)單地將內(nèi)容作為預(yù)先計(jì)算的 HTML 交付給客戶端。瀏覽器在靜態(tài) HTML 顯示上比在復(fù)雜的、內(nèi)存密集型的 JavaScript 函數(shù)運(yùn)行上要高效得多。

JavaScript 是在最終用戶訪問你的網(wǎng)站時(shí)更好地參與和保留他們的關(guān)鍵，但是開發(fā)人員應(yīng)該始終意識(shí)到涉及 JavaScript 時(shí)對(duì)性能的影響。注意這五個(gè) JavaScript 性能優(yōu)化技巧，以幫助你的 Web 開發(fā)團(tuán)隊(duì)避免一些常見的網(wǎng)站性能陷阱。