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 錨定位置變更

在 Chrome 125 版中導入 CSS 錨定位置，但在 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"

網路 GPU 畫布現在可以使用完整的螢幕來顯示 HDR 圖片。

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

查看完整版本資訊。

延伸閱讀

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

訂閱

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

我來代替 Adriana 為你服務，我是 Pete LePage。Chrome 130 一推出，我們就會在這裡告訴你 Chrome 的新功能！