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

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

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

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

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

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

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

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

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

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

  // 添加“animate”類(lèi)
  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)畫(huà)進(jìn)行移動(dòng)和 JavaScript 來(lái)?yè)]動(dòng)肢體。右側(cè)的圖像是基本的動(dòng)畫(huà) GIF。使用默認(rèn)的 100,000 個(gè) sessionStorage 操作點(diǎn)擊“寫(xiě)入”按鈕：

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

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

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

Web Workers

長(zhǎng)時(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)畫(huà)的元素
  let sprite = document.getElementById('sprite');
  if (!sprite) return;

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

  // 添加“animate”類(lèi)
  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 來(lái)模擬復(fù)雜的線程式操作。但是，worker 的功能受到有意限制，并且 worker 不能直接訪問(wèn) DOM 或 localStorage（這樣做實(shí)際上會(huì)使 JavaScript 多線程化并破壞瀏覽器的穩(wěn)定性）。因此，所有消息都作為字符串發(fā)送，這允許傳遞 JSON 編碼的對(duì)象，但不允許傳遞 DOM 節(jié)點(diǎn)。

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

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

硬件加速動(dòng)畫(huà)

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

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

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

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

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

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

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

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

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

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

Web 性能

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

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

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

關(guān)于 DOM 阻塞的常見(jiàn)問(wèn)題解答 (FAQ)

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

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

如何避免 DOM 阻塞？

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

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

同步腳本會(huì)阻塞 DOM 構(gòu)造，直到它們完全加載并執(zhí)行。這意味著如果腳本加載時(shí)間很長(zhǎng)，它會(huì)延遲整個(gè)網(wǎng)頁(yè)。另一方面，異步腳本不會(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)頁(yè)加載時(shí)間。但是，這也意味著腳本在 DOM 構(gòu)造時(shí)可能尚未準(zhǔn)備好，因此它只能用于不會(huì)更改 DOM 結(jié)構(gòu)的腳本。

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

將腳本移到 HTML 文檔底部可確保它們是最后加載的內(nèi)容。這意味著網(wǎng)頁(yè)的其余部分可以在不等待腳本完成加載的情況下進(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)頁(yè)的其余部分將繼續(xù)加載。腳本可以在準(zhǔn)備好后立即執(zhí)行，即使 DOM 尚未完全構(gòu)建也是如此。這可以大大提高網(wǎng)頁(yè)加載時(shí)間，但它只能用于不會(huì)更改 DOM 結(jié)構(gòu)的腳本。

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

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

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

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

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

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

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

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

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