谷歌宣布了一種運行 JavaScript 的新方法，可以提高網(wǎng)頁響應(yīng)能力，幫助使用它的網(wǎng)站在新的核心網(wǎng)絡(luò)重要指標(biāo)中擊敗競爭對手。

該公告提供了一種增強網(wǎng)頁性能的方法。如果這次試驗成功，那么所有內(nèi)容管理平臺可能都希望使用它，以便領(lǐng)先于競爭對手。

Google 正在解決的問題

與下一次繪制的交互 (INP) 是替代首次輸入延遲 (FID) 的指標(biāo)。INP 計劃于 2024 年 3 月作為核心 Web 重要指標(biāo)上線。為了在即將到來的 INP 核心網(wǎng)絡(luò)至關(guān)重要中取得好成績，網(wǎng)頁需要響應(yīng)每一個可能的用戶交互。

導(dǎo)致 INP 分?jǐn)?shù)不佳的原因之一是某些 JavaScript 需要很長時間才能運行。當(dāng)這些腳本需要很長時間才能運行時，它們被稱為長任務(wù)。長任務(wù)的問題在于，它們就像道路上的慢速司機，在快車道上行駛，減慢了交通速度。

目前發(fā)生的情況是，控制用戶交互的腳本被長任務(wù)阻塞，導(dǎo)致網(wǎng)頁無響應(yīng)。在這種情況下，用戶在單擊按鈕后會等待頁面執(zhí)行某些操作。

如今，許多網(wǎng)頁中通常發(fā)生的情況是用戶交互必須等到長任務(wù)完成運行。下圖顯示了長任務(wù)如何阻止重要的用戶交互任務(wù)運行。

長任務(wù)阻塞用戶交互腳本

谷歌提出的解決方案是解決這個問題，讓這項長任務(wù)就像一輛緩慢的汽車停在路邊，讓快速車通過。

現(xiàn)有策略不起作用

已經(jīng)有一些編碼解決方法可以幫助提高用戶交互分?jǐn)?shù)。但它們實際上并不能很好地工作，因為它們是為了解決其他問題而不是用戶交互問題而設(shè)計的。

谷歌的解釋者表示，現(xiàn)有的策略會暫停長任務(wù)，但將其發(fā)送到所有其他腳本隊列的后面，其中許多腳本可能不如長任務(wù)那么重要。

在這種典型場景中，必須完成的長任務(wù)必須等到不太重要的腳本完成，因為它現(xiàn)在位于隊列的后面。當(dāng)前的編碼解決方法最終可能會造成更糟糕的情況。

長任務(wù)的解決方案是scheduler.yield

解決長任務(wù)問題的方法是 Google 稱為Scheduler.yield的方法。Scheduler.yield 的作用是暫停長任務(wù)，以便讓出用戶交互任務(wù)開始運行。一旦用戶交互腳本完成，長任務(wù)就能夠跳到隊列的頭部并再次開始運行。這是 Google 發(fā)布的插圖，展示了如何將長任務(wù)分解為較小的任務(wù)，以便運行重要的用戶交互腳本。

Scheduler.yield 工作原理圖解

Scheduler.Yield 的原始試驗

自 7 月 13 日發(fā)布的 Chrome 115 以來，就可以運行 Scheduler.yield 了。谷歌正在要求志愿者在“原始試驗”中測試這項新功能，以便收集反饋以了解它在現(xiàn)實世界中的工作原理，然后最終將其作為正式功能。原始試驗是參與測試新功能的機會（此處有關(guān)原始試驗的信息https://developer.chrome.com/docs/web-platform/origin-trials/）。

谷歌的公告解釋道：

“為了不斷努力提供新的 API，幫助 Web 開發(fā)人員使他們的網(wǎng)站盡可能快捷，Chrome 團隊目前正在從 Chrome 版本 115 開始運行 Scheduler.yield 的原始試驗。

Scheduler.yield 是計劃程序 API 的一個擬議的新補充，與傳統(tǒng)上依賴的方法相比，它允許以一種更簡單、更好的方式將控制權(quán)交還給主線程?！?/span>

在實時網(wǎng)站上運行 Scheduler.yield 的潛在問題之一是，需要為非 Chrome 115 瀏覽器編寫后備代碼，以便該網(wǎng)站能夠為非 Chrome 115 且不支持該功能的網(wǎng)站訪問者正常工作。

還有一種方法可以在本地運行進行測試：

“如果您想在本地試驗 Scheduler.yield，請在 Chrome 的地址欄中輸入 chrome://flags，然后從“實驗性 Web 平臺功能”部分的下拉列表中選擇“啟用”。

這將使 Scheduler.yield （以及任何其他實驗性功能）僅在您的 Chrome 實例中可用?！?/span>

超越競爭對手的機會

這項新功能目前正處于測試模式。但鑒于 INP 計劃于 2024 年 3 月成為官方核心網(wǎng)絡(luò)重要指標(biāo)，因此關(guān)注這一新的 Chrome 功能并在實驗階段結(jié)束后盡早采用它可能會有所幫助。只要為尚未采用新功能的瀏覽器提供后備措施，現(xiàn)在采用它可能是領(lǐng)先于競爭對手的好方法。

閱讀官方公告：

介紹scheduler.yield原始試驗：
https://developer.chrome.com/blog/introducing-scheduler-yield-origin-trial/

注冊 Scheduler.yield 原始實驗：

https://developer.chrome.com/origintrials/#/view_trial/836543630784069633

閱讀有關(guān)優(yōu)化長任務(wù)的解釋：https://web.dev/optimize-long-tasks/

訪問 Scheduler.yield api 的 GitHub 解釋器頁面：

https://github.com/WICG/scheduling-apis/blob/main/explainers/yield-and-continuation.md

翻譯整理作品，原作者：Roger Montti

關(guān)于網(wǎng)站速度的其他文章：

Core Web Vitals ：頁面速度現(xiàn)在對 SEO 更為重要

最大內(nèi)容繪制 (LCP) – 定義、測量以及如何修復(fù)

Google SEO: 累積布局偏移 (CLS) – 定義、測量以及如何修復(fù)

Google SEO: 首次輸入延遲 (FID) – 定義、測量和修復(fù)方法

Google SEO: 如何使用 PageSpeed Insights