Chrome 129 新功能

Pete LePage

以下是一些注意事項：

我是 Pete LePage。讓我們深入瞭解 Chrome 129 為開發人員提供哪些新功能。

使用 scheduler.yield() 拆分長時間的工作

長時間的作業會延遲瀏覽器回應使用者輸入內容的速度，讓使用者認為網站速度緩慢，並影響 INP 等重要效能指標。有了 scheduler.yield()，您就能將長時間的工作拆解為較小的部分，並透過明確地將控制權交還給主執行緒，提高回應速度。

可讓您告知瀏覽器：

「嘿！我要執行的工作可能需要一些時間，如果您需要繪製影格、回應使用者輸入內容，或執行其他重要工作，沒關係，我可以等待」

這張圖片說明分割工作如何有助於促進使用者互動。在頂端，長時間工作會阻斷事件處理常式，直到工作完成為止。在底部，分割的工作可讓事件處理常式提早執行。

請經常在 JavaScript 程式碼中加入下列程式碼行，讓瀏覽器有喘息空間，避免發生 INP 問題。

await scheduler.yield();

重要的是，這可讓程式碼的後續動作獲得優先處理，因此您不會因為產生 yield 而損失任何東西。建議您在任何較大的工作區塊之間的函式中，盡量使用 scheduler.yield()。

詳情請參閱「最佳化長時間工作」。

內在大小的動畫

CSS 動畫效果相當不錯，但通常需要明確的大小，因此無法使用 auto、min-content 或 fit-content 等內在大小關鍵字。

CSS 屬性 interpolate-size 可開啟一組新的動畫，這在使用內在大小設定關鍵字時是不可能的。

沒有 interpolate-size 時，下方影片中的按鈕沒有轉場效果。

加入 interpolate-size: allow-keywords 後，影片中的按鈕就會顯示精美的轉場動畫效果。

在 root 元素上指定 interpolate-size: allow-keywords，即可為整個網頁設定新行為。建議您在相容性無虞的情況下，盡量採用這種做法。

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

為提供更精細的控制選項，CSS calc-size() 函式 (類似 calc()) 也支援針對單一支援的內在大小設定關鍵字執行作業。執行版面配置計算時，size 關鍵字會評估為 calc-size-basis 的原始大小。

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

詳情請參閱「在 CSS 中使用 height: auto; (和其他內在大小設定關鍵字) 進行動畫效果」。

CSS 錨點位置異動

CSS 錨點定位功能已在 Chrome 125 中推出，但在 CSS 工作小組進行額外討論後，規格和實作方式有了一些變更。如果您已使用 CSS 錨點位置，請盡快更新程式碼。

首先，inset-area 已重新命名為 position-area。這是較佳做法，因為 position- 的用詞可提醒您，這個屬性是套用至已定位的元素，而非錨點元素。

第二，position-try-options 已重新命名為 position-try-fallbacks。這有助於您記得，這些只是主要位置的備用選項，而主要位置是由基礎樣式決定。

最後，inset-area() 函式語法會從 position-try 中移除。因此，請改用 position-try-fallbacks: top 而非 position-try-fallbacks: inset-area(top)。

還有更多獎品等著您！

當然，還有許多其他功能。

我們新增了 Intl 方法，可用於格式化時間長度，並支援多個語言代碼。

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

Web GPU 畫布現在可針對 HDR 圖片使用整個顯示範圍。

另外，也有一些可能會影響部分開發人員的淘汰和移除項目。

查看完整版本資訊。

延伸閱讀

這份報告僅涵蓋部分重點。如要瞭解 Chrome 129 中的其他異動，請參閱以下連結。

訂閱

如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

我來代替 Adriana 為大家介紹 Chrome 130 的最新功能，敬請期待！