必須了解 JavaScript 概念才能加快網頁速度

雖然現在我們大多數人都編寫 React 或其他高級 TypeScript 程式碼，但有時您仍然必須冒險進入瀏覽器中 F12 控制台和 JavaScript 運行時的黑暗區域。

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

1) ?事件循環

JavaScript 是單執行緒的，這表示語言本身一次只能執行一項任務。為了解決這個限制，瀏覽器提供了「事件循環」機制。

例如，當您使用「setInterval」函數時，瀏覽器會在背景維護計時器，當間隔到期時，回呼函數就會被推送到事件循環中。

同時，任何不使用非同步瀏覽器 API 的 JavaScript 程式碼只會從上到下依序執行。當主執行緒沒有做任何工作時，瀏覽器就會從事件循環中提取任務並執行它。

2) ?後台工作者

當處理需要很長時間執行的密集操作時，例如 500ms ，你絕對不希望在主執行緒上運行它，因為它會讓 UI 變得遲緩。

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

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

3) ⏸️ 延後非必需品

由於 JavaScript 是單執行緒的，因此您應該盡可能延遲以釋放主執行緒。因此，最好的起點是核心網路生命力，這是一個重要的 SEO 指標，可幫助您識別可能延遲的緩慢程式碼。

然後您可以使用事件監聽器，例如捲動、載入、DOMContentLoaded 等...來延遲程式碼的執行。

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

範例：

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

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

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

4) ?️ 離屏畫布

與 Web Worker 類似，您可以使用稱為「OffscreenCanvas」的瀏覽器 API 將與畫布相關的密集操作作為後台任務推送到自己的執行緒上。

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

5) ⏳ 在瀏覽器不忙時執行任務

與事件循環非常相似，除了使用「requestIdleCallback」運行的任務具有非常低的優先權，因此僅在瀏覽器空閒時運行。

這非常適合執行非關鍵任務，例如 PWA 中離線存取的日誌記錄和快取。

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

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

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

PS：有關更深入的 Web 開發、AI、Linux 教學和指南，您可以查看我的部落格：KevinCoder

以上是必須了解 JavaScript 概念才能加快網頁速度的詳細內容。更多資訊請關注PHP中文網其他相關文章！