雖然現(xiàn)在我們大多數(shù)人都編寫 React 或其他高級 TypeScript 程式碼，但有時(shí)您仍然必須冒險(xiǎn)進(jìn)入瀏覽器中 F12 控制臺和 JavaScript 運(yùn)行時(shí)的黑暗區(qū)域。

在本文中，我將介紹一些您需要了解的關(guān)鍵概念，這些概念可以而且很可能幫助您建立更快的頁面。

1) ?事件循環(huán)

JavaScript 是單執(zhí)行緒的，這表示語言本身一次只能執(zhí)行一項(xiàng)任務(wù)。為了解決這個(gè)限制，瀏覽器提供了「事件循環(huán)」機(jī)制。

例如，當(dāng)您使用「setInterval」函數(shù)時(shí)，瀏覽器會在背景維護(hù)計(jì)時(shí)器，當(dāng)間隔到期時(shí)，回呼函數(shù)就會被推送到事件循環(huán)中。

同時(shí)，任何不使用非同步瀏覽器 API 的 JavaScript 程式碼只會從上到下依序執(zhí)行。當(dāng)主執(zhí)行緒沒有做任何工作時(shí)，瀏覽器就會從事件循環(huán)中提取任務(wù)並執(zhí)行它。

2) ?後臺工作者

當(dāng)處理需要很長時(shí)間執(zhí)行的密集操作時(shí)，例如 500ms ，你絕對不希望在主執(zhí)行緒上運(yùn)行它，因?yàn)樗鼤?UI 變得遲緩。

這就是網(wǎng)路工作者派上用場的地方； Web Worker 在與主瀏覽器執(zhí)行緒不同的執(zhí)行緒上運(yùn)行，因此此處運(yùn)行的任務(wù)不會影響您的頁面載入速度。

一個(gè)好的用例是：當(dāng)您擁有複雜圖表的時(shí)間序列資料時(shí)，其中包含數(shù)千個(gè)要解析和計(jì)算的記錄。您可以只顯示載入程式並在 Web Worker 中進(jìn)行圖表計(jì)算，然後在準(zhǔn)備好後更新 DOM。

3) ?? 延後非必需品

由於 JavaScript 是單執(zhí)行緒的，因此您應(yīng)該盡可能延遲以釋放主執(zhí)行緒。因此，最好的起點(diǎn)是核心網(wǎng)路生命力，這是一個(gè)重要的 SEO 指標(biāo)，可幫助您識別可能延遲的緩慢程式碼。

然後您可以使用事件監(jiān)聽器，例如捲動(dòng)、載入、DOMContentLoaded 等...來延遲程式碼的執(zhí)行。

通常，這用於延遲頁面追蹤、加載折疊下方的小部件、加載圖表以及進(jìn)行主折疊下方的其他 API 呼叫。

範(fàn)例：

document.addEventListener('DOMContentLoaded',function() {
 // Slow code here.
});

?? DOMContentLoaded：將等待首先解析整個(gè) HTML 文檔，包括非非同步 JS 腳本，但不等待圖像、CSS 文件、iframe 等外部資源。 「load」事件類似，只是它等待所有內(nèi)容加載，包括 CSS、iframe 和圖片。

另一個(gè)方便的 Web API 是 Intersection Observer。這允許您根據(jù)元素的可見性觸發(fā)程式碼，這對於在使用者滾動(dòng)經(jīng)過某個(gè) DOM 元素時(shí)最大限度地減少 API 呼叫非常有用（想想無限分頁）。

4) ?? 離屏畫布

與 Web Worker 類似，您可以使用稱為「OffscreenCanvas」的瀏覽器 API 將與畫布相關(guān)的密集操作作為後臺任務(wù)推送到自己的執(zhí)行緒上。

這對於即時(shí)視覺化、影像處理、遊戲、影片編輯等很有用......

5) ? 在瀏覽器不忙時(shí)執(zhí)行任務(wù)

與事件循環(huán)非常相似，除了使用「requestIdleCallback」運(yùn)行的任務(wù)具有非常低的優(yōu)先權(quán)，因此僅在瀏覽器空閒時(shí)運(yùn)行。

這非常適合執(zhí)行非關(guān)鍵任務(wù)，例如 PWA 中離線存取的日誌記錄和快取。

？ MDN Web 文件 [額外 - 有用的資源]

https://developer.mozilla.org/en-US/
我知道你可能會使用克勞德或一些法學(xué)碩士來做這件事，但人工智慧幻覺是一個(gè)問題，有時(shí)會給你錯(cuò)誤的信息，所以擁有一份你可以信任的可靠的書面參考指南總是好的。

MDN 是開源的，由 Mozilla 管理，毫無疑問，它是學(xué)習(xí)不同 JavaScript、CSS 和 HTML 瀏覽器 API 的最佳 Web 資源。在我的職業(yè)生涯中，我經(jīng)常使用這個(gè)方法，並且仍然如此。

PS：有關(guān)更深入的 Web 開發(fā)、AI、Linux 教學(xué)和指南，您可以查看我的部落格：KevinCoder

以上是必須了解 JavaScript 概念才能加快網(wǎng)頁速度的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！