關(guān)鍵要點(diǎn)

• 同步 JavaScript 操作（例如計(jì)算、DOM 更新、使用 localStorage 或 IndexedDB 存儲(chǔ)和檢索數(shù)據(jù)）會(huì)阻塞 DOM 更新並影響前端性能。
• Web Workers 可用於處理長時(shí)間運(yùn)行的進(jìn)程。它們?cè)试S主瀏覽器應(yīng)用程序啟動(dòng)後臺(tái)腳本並使用消息事件進(jìn)行通信，但它們無法直接訪問 DOM 或 localStorage。
• 硬件加速的 CSS 動(dòng)畫在自己的圖層中運(yùn)行，可以提高動(dòng)畫的流暢度，並且不會(huì)被大多數(shù)現(xiàn)代瀏覽器阻塞。
• 內(nèi)存存儲(chǔ)比基於磁盤的存儲(chǔ)機(jī)制提供更快的數(shù)據(jù)更新。建議使用內(nèi)存對(duì)像以提高性能，並在方便的時(shí)候永久存儲(chǔ)數(shù)據(jù)。

瀏覽器和 Node.js 等運(yùn)行環(huán)境中的 JavaScript 程序在單線程上運(yùn)行。當(dāng)代碼在瀏覽器標(biāo)籤頁中執(zhí)行時(shí)，其他所有操作都會(huì)停止：菜單命令、下載、渲染、DOM 更新甚至 GIF 動(dòng)畫。

用戶很少會(huì)注意到這一點(diǎn)，因?yàn)樘幚磉^程以小的塊快速進(jìn)行。例如：?jiǎn)螕粢粋€(gè)按鈕，引發(fā)一個(gè)事件，運(yùn)行一個(gè)函數(shù)，進(jìn)行計(jì)算並更新 DOM。完成後，瀏覽器可以自由處理處理隊(duì)列中的下一個(gè)項(xiàng)目。

JavaScript 代碼無法等待某些事情發(fā)生；想像一下，如果應(yīng)用程序每次發(fā)出 Ajax 請(qǐng)求時(shí)都凍結(jié)，那該有多麼令人沮喪。因此，JavaScript 代碼使用事件和回調(diào)來操作：指示瀏覽器或操作系統(tǒng)級(jí)別的進(jìn)程在操作完成後且結(jié)果準(zhǔn)備就緒時(shí)調(diào)用特定函數(shù)。

在以下示例中，當(dāng)按鈕單擊事件發(fā)生時(shí)，會(huì)執(zhí)行一個(gè)處理程序函數(shù)，該函數(shù)通過應(yīng)用 CSS 類來設(shè)置動(dòng)畫。當(dāng)動(dòng)畫完成時(shí)，匿名回調(diào)將刪除該類：

// 單擊按鈕時(shí)引發(fā)事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 處理按鈕單擊事件
function handleClick(e) {

  // 獲取要設(shè)置動(dòng)畫的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 動(dòng)畫結(jié)束時(shí)刪除“animate”類
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

  // 添加“animate”類
  sprite.classList.add('animate');
}

ES2015 提供了 Promise，ES2017 引入了 async/await 以簡(jiǎn)化編碼，但在表面之下仍然使用回調(diào)。有關(guān)更多信息，請(qǐng)參閱“現(xiàn)代 JS 中的流程控制”。

阻塞因素

不幸的是，某些 JavaScript 操作將始終是同步的，包括：

• 運(yùn)行計(jì)算
• 更新 DOM
• 使用 localStorage 或 IndexedDB 存儲(chǔ)和檢索數(shù)據(jù)。

以下示例展示了一個(gè)入侵者，它結(jié)合使用 CSS 動(dòng)畫進(jìn)行移動(dòng)和 JavaScript 來揮動(dòng)肢體。右側(cè)的圖像是基本的動(dòng)畫 GIF。使用默認(rèn)的 100,000 個(gè) sessionStorage 操作點(diǎn)擊“寫入”按鈕：

[CodePen 示例鏈接 - 此處應(yīng)插入CodePen的嵌入代碼]

在此操作期間，DOM 更新被阻止。在大多數(shù)瀏覽器中，入侵者會(huì)停止或卡頓。某些動(dòng)畫 GIF 動(dòng)畫將暫停。較慢的設(shè)備可能會(huì)顯示“腳本無響應(yīng)”警告。

這是一個(gè)複雜的示例，但它演示了基本操作如何影響前端性能。

Web Workers

長時(shí)間運(yùn)行進(jìn)程的一種解決方案是 Web Workers。這些允許主瀏覽器應(yīng)用程序啟動(dòng)後臺(tái)腳本並使用消息事件進(jìn)行通信。例如：

// 單擊按鈕時(shí)引發(fā)事件
document.getElementById('clickme').addEventListener('click', handleClick);

// 處理按鈕單擊事件
function handleClick(e) {

  // 獲取要設(shè)置動(dòng)畫的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

  // 動(dòng)畫結(jié)束時(shí)刪除“animate”類
  sprite.addEventListener('animationend', () => {
    sprite.classList.remove('animate');
  });

  // 添加“animate”類
  sprite.classList.add('animate');
}

Web Worker 腳本：

// main.js
// 是否支持 Web Workers？
if (!window.Worker) return;

// 啟動(dòng) Web Worker 腳本
let myWorker = new Worker('myworker.js');

// 從 myWorker 接收消息
myWorker.onmessage = e => {
  console.log('myworker sent:', e.data);
}

// 向 myWorker 發(fā)送消息
myWorker.postMessage('hello');

一個(gè) worker 甚至可以生成其他 worker 來模擬複雜的線程式操作。但是，worker 的功能受到有意限制，並且 worker 不能直接訪問 DOM 或 localStorage（這樣做實(shí)際上會(huì)使 JavaScript 多線程化並破壞瀏覽器的穩(wěn)定性）。因此，所有消息都作為字符串發(fā)送，這允許傳遞 JSON 編碼的對(duì)象，但不允許傳遞 DOM 節(jié)點(diǎn)。

Workers 可以訪問某些窗口屬性、WebSockets 和 IndexDB，但它們不會(huì)改進(jìn)上面顯示的示例。在大多數(shù)情況下，worker 用於長時(shí)間運(yùn)行的計(jì)算——例如光線追蹤、圖像處理、比特幣挖掘等等。

（Node.js 提供子進(jìn)程，它們類似於 Web Workers，但可以選擇運(yùn)行其他語言編寫的可執(zhí)行文件。）

硬件加速動(dòng)畫

大多數(shù)現(xiàn)代瀏覽器不會(huì)阻塞在自己的圖層中運(yùn)行的硬件加速 CSS 動(dòng)畫。

默認(rèn)情況下，上面的示例通過更改左外邊距來移動(dòng)入侵者。此屬性和類似的屬性（例如 left 和 width）會(huì)導(dǎo)致瀏覽器在每個(gè)動(dòng)畫步驟中重新流式傳輸和重新繪製整個(gè)文檔。

使用 transform 和/或 opacity 屬性時(shí)，動(dòng)畫效率更高。這些實(shí)際上將元素放入單獨(dú)的合成圖層中，以便 GPU 可以單獨(dú)設(shè)置其動(dòng)畫。

單擊“硬件加速”複選框，動(dòng)畫將立即變得更流暢?，F(xiàn)在嘗試另一個(gè) sessionStorage 寫入；即使動(dòng)畫 GIF 停止，入侵者也會(huì)繼續(xù)移動(dòng)。請(qǐng)注意，肢體運(yùn)動(dòng)仍然會(huì)暫停，因?yàn)檫@是由 JavaScript 控制的。

內(nèi)存存儲(chǔ)

在內(nèi)存中更新對(duì)象的速度比使用寫入磁盤的存儲(chǔ)機(jī)制要快得多。在上面的示例中選擇“對(duì)象”存儲(chǔ)類型並點(diǎn)擊“寫入”。結(jié)果會(huì)有所不同，但它應(yīng)該比等效的 sessionStorage 操作快大約 10 倍。

內(nèi)存是易失性的：關(guān)閉標(biāo)籤頁或?qū)Ш诫x開會(huì)導(dǎo)致所有數(shù)據(jù)丟失。一個(gè)很好的折衷方案是使用內(nèi)存對(duì)象來提高性能，然後在方便的時(shí)候永久存儲(chǔ)數(shù)據(jù)——例如在頁面卸載時(shí)：

// myworker.js
// 接收消息時(shí)啟動(dòng)
onmessage = e => {
  console.log('myworker received:', e.data);
  // ...長時(shí)間運(yùn)行的進(jìn)程...
  // 發(fā)送回消息
  postMessage('result');
};

遊戲或單頁應(yīng)用程序可能需要更複雜的選擇。例如，保存數(shù)據(jù)的時(shí)間點(diǎn)：

• 在一段時(shí)間內(nèi)沒有用戶活動(dòng)（鼠標(biāo)、觸摸或鍵盤事件）
• 遊戲暫?；驊?yīng)用程序標(biāo)籤在後臺(tái)（參見頁面可見性 API）
• 有自然的暫?！缤婕宜劳觥⑼瓿申P(guān)卡、在主屏幕之間移動(dòng)等等。

Web 性能

Web 性能是一個(gè)熱門話題。開發(fā)人員受瀏覽器限制的約束較小，用戶期望獲得快速、類似操作系統(tǒng)的應(yīng)用程序性能。

盡可能少地進(jìn)行處理，DOM 將永遠(yuǎn)不會(huì)被明顯阻塞。幸運(yùn)的是，在無法避免長時(shí)間運(yùn)行的任務(wù)的情況下，有一些選擇。

用戶和客戶端可能永遠(yuǎn)不會(huì)注意到您的速度優(yōu)化，但當(dāng)應(yīng)用程序變慢時(shí)，他們總是會(huì)抱怨！

關(guān)於 DOM 阻塞的常見問題解答 (FAQ)

什麼是 DOM 阻塞以及為什麼它是一個(gè)問題？

DOM 阻塞是指瀏覽器無法渲染網(wǎng)頁，因?yàn)樗诘却_本完成加載。這會(huì)大大降低網(wǎng)頁的加載速度，從而導(dǎo)致用戶體驗(yàn)不佳。瀏覽器必須通過解析 HTML 標(biāo)記來構(gòu)建 DOM 樹。在此過程中，如果遇到腳本，則必須停止並執(zhí)行它才能繼續(xù)。這是因?yàn)槟_本可能會(huì)更改 DOM 樹結(jié)構(gòu)，並且瀏覽器需要確保它擁有最新的視圖。

如何避免 DOM 阻塞？

有幾種方法可以避免 DOM 阻塞。最有效的方法之一是使用異步加載腳本。這意味著腳本將在後臺(tái)加載，而頁面其餘部分將繼續(xù)加載。另一種方法是推遲腳本，這意味著它們只會(huì)在 HTML 文檔完全解析後才執(zhí)行。最後，您還可以將腳本移到 HTML 文檔的底部，以便它們是最後加載的內(nèi)容。

同步腳本和異步腳本有什麼區(qū)別？

同步腳本會(huì)阻塞 DOM 構(gòu)造，直到它們完全加載並執(zhí)行。這意味著如果腳本加載時(shí)間很長，它會(huì)延遲整個(gè)網(wǎng)頁。另一方面，異步腳本不會(huì)阻塞 DOM 構(gòu)造。它們?cè)卺崤_(tái)加載，並且一旦準(zhǔn)備好就可以執(zhí)行，即使 DOM 尚未完全構(gòu)建也是如此。

腳本標(biāo)籤中的“defer”屬性是什麼？

腳本標(biāo)籤中的“defer”屬性用於指示腳本應(yīng)在 HTML 文檔完全解析後執(zhí)行。這意味著腳本不會(huì)阻塞 DOM 構(gòu)造，從而加快網(wǎng)頁加載時(shí)間。但是，這也意味著腳本在 DOM 構(gòu)造時(shí)可能尚未準(zhǔn)備好，因此它只能用於不會(huì)更改 DOM 結(jié)構(gòu)的腳本。

將腳本移到 HTML 文檔底部有何幫助？

將腳本移到 HTML 文檔底部可確保它們是最後加載的內(nèi)容。這意味著網(wǎng)頁的其餘部分可以在不等待腳本完成加載的情況下進(jìn)行渲染。但是，此方法只能用於不會(huì)更改 DOM 結(jié)構(gòu)的腳本，因?yàn)樗鼈冊(cè)?DOM 構(gòu)造時(shí)可能尚未準(zhǔn)備好。

腳本標(biāo)籤中的“async”屬性是什麼？

腳本標(biāo)籤中的“async”屬性用於指示腳本應(yīng)異步加載。這意味著腳本將在後臺(tái)加載，而網(wǎng)頁的其餘部分將繼續(xù)加載。腳本可以在準(zhǔn)備好後立即執(zhí)行，即使 DOM 尚未完全構(gòu)建也是如此。這可以大大提高網(wǎng)頁加載時(shí)間，但它只能用於不會(huì)更改 DOM 結(jié)構(gòu)的腳本。

DOM 阻塞對(duì) SEO 的影響是什麼？

DOM 阻塞會(huì)大大降低網(wǎng)頁的加載速度，這會(huì)對(duì)它的 SEO 排名產(chǎn)生負(fù)面影響。像 Google 這樣的搜索引擎將網(wǎng)頁加載速度視為排名因素之一。因此，避免 DOM 阻塞對(duì)於確保您的網(wǎng)頁在搜索引擎結(jié)果中排名靠前非常重要。

什麼是虛擬 DOM 以及它如何提供幫助？

虛擬 DOM 是在 React 等現(xiàn)代 JavaScript 框架中使用的概念。它是實(shí)際 DOM 的副本，更改首先在虛擬 DOM 中進(jìn)行，而不是在實(shí)際 DOM 中進(jìn)行。一旦所有更改都完成，虛擬 DOM 將通過稱為協(xié)調(diào)的過程與實(shí)際 DOM 同步。這減少了對(duì)實(shí)際 DOM 的直接操作次數(shù)，從而加快了網(wǎng)頁加載時(shí)間。

如何檢查我的網(wǎng)頁是否存在 DOM 阻塞問題？

您可以使用 Google 的 PageSpeed Insights 等工具來檢查您的網(wǎng)頁是否存在 DOM 阻塞問題。此工具會(huì)分析您的網(wǎng)頁並提供有關(guān)其性能的詳細(xì)報(bào)告，包括任何潛在的問題，例如 DOM 阻塞。

CSS 是否也會(huì)導(dǎo)致 DOM 阻塞？

是的，CSS 也可能導(dǎo)致 DOM 阻塞。當(dāng)瀏覽器遇到 CSS 文件時(shí)，它必須停止並加載它才能繼續(xù)渲染網(wǎng)頁。這是因?yàn)?CSS 文件可能包含會(huì)更改網(wǎng)頁外觀的樣式。為避免這種情況，您可以使用內(nèi)聯(lián)關(guān)鍵 CSS 和推遲非關(guān)鍵 CSS 等方法。

以上是如何避免通過Localstorage和其他罪魁禍?zhǔn)鬃柚笵OM的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！