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

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

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

JavaScript 是單線(xiàn)程的，這意味著該語(yǔ)言本身一次只能執(zhí)行一項(xiàng)任務(wù)。為了解決這個(gè)限制，瀏覽器提供了“事件循環(huán)”機(jī)制。

例如，當(dāng)您使用“setInterval”函數(shù)時(shí)，瀏覽器會(huì)在后臺(tái)維護(hù)一個(gè)計(jì)時(shí)器，當(dāng)間隔到期時(shí)，回調(diào)函數(shù)就會(huì)被推送到事件循環(huán)中。

同時(shí)，任何不使用異步瀏覽器 API 的 JavaScript 代碼只會(huì)從上到下依次執(zhí)行。當(dāng)主線(xiàn)程沒(méi)有做任何工作時(shí)，瀏覽器就會(huì)從事件循環(huán)中提取任務(wù)并運(yùn)行它。

2) ?后臺(tái)工作者

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

這就是網(wǎng)絡(luò)工作者派上用場(chǎng)的地方； Web Worker 在與主瀏覽器線(xiàn)程不同的線(xiàn)程上運(yùn)行，因此此處運(yùn)行的任務(wù)不會(huì)影響您的頁(yè)面加載速度。

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

3) ?? 推遲非必需品

由于 JavaScript 是單線(xiàn)程的，因此您應(yīng)該盡可能延遲以釋放主線(xiàn)程。因此，最好的起點(diǎn)是核心網(wǎng)絡(luò)生命力，這是重要的 SEO 指標(biāo)，可幫助您識(shí)別可能延遲的緩慢代碼。

然后您可以使用事件監(jiān)聽(tīng)器，例如滾動(dòng)、加載、DOMContentLoaded 等...來(lái)延遲代碼的執(zhí)行。

通常，這用于延遲頁(yè)面跟蹤、加載折疊下方的小部件、加載圖表以及進(jìn)行主折疊下方的其他 API 調(diào)用。

示例：

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

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

另一個(gè)方便的 Web API 是 Intersection Observer。這允許您根據(jù)元素的可見(jiàn)性觸發(fā)代碼，這對(duì)于在用戶(hù)滾動(dòng)經(jīng)過(guò)某個(gè) DOM 元素時(shí)最大限度地減少 API 調(diào)用非常有用（想想無(wú)限分頁(yè)）。

4) ?? 離屏畫(huà)布

與 Web Worker 類(lèi)似，您可以使用稱(chēng)為“OffscreenCanvas”的瀏覽器 API 將與畫(huà)布相關(guān)的密集操作作為后臺(tái)任務(wù)推送到自己的線(xiàn)程上。

這對(duì)于實(shí)時(shí)可視化、圖像處理、游戲、視頻編輯等很有用......

5) ? 在瀏覽器不忙時(shí)運(yùn)行任務(wù)

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

這非常適合運(yùn)行非關(guān)鍵任務(wù)，例如 PWA 中離線(xiàn)訪(fǎng)問(wèn)的日志記錄和緩存。

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

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

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

PS：有關(guān)更深入的 Web 開(kāi)發(fā)、AI、Linux 教程和指南，您可以查看我的博客：KevinCoder

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