Chrome 123 新功能

Adriana Jara

以下是一些注意事項：

我是 Adriana Jara。讓我們深入瞭解 Chrome 123 中開發人員可用的最新功能。

light-dark() CSS 函式。

CSS 中的 light-dark() 函式可讓您建立可根據使用者偏好設定淺色或深色模式的顏色。使用 light-dark() 函式，在單一 CSS 屬性中指定兩個不同的顏色值。

瀏覽器會根據元素計算的 color-scheme 值，自動選擇適當的顏色。例如，使用下列 CSS：

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}
  • 如果使用者選取淺色主題，元素就會顯示檸檬綠色背景。
  • 如果使用者選取深色主題，元素就會顯示綠色背景。

Long Animation Frames API。

Long Animation Frames API 可協助您找出主執行緒壅塞的原因，而這通常是 INP (Interaction to Next Paint) 不佳的肇因。INP 是 Core Web Vitals 的一種指標，用於評估網站的回應速度。

這個新 API 是 Long Tasks API 的強化版，可協助您進一步瞭解使用者介面更新速度緩慢的原因。Long Animation Frames API 可用來評估阻斷工作。它會與下列轉譯更新一起評估工作，並新增長時間執行的腳本、轉譯時間，以及強制版面配置和樣式所花費的時間等資訊，這稱為「版面配置衝突」。

收集及分析這類資訊，可協助您找出並排除效能瓶頸。您可以使用下列程式碼擷取長影格。

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

Service worker Static Routing API。

您可以使用服務工作者讓網站在離線狀態下運作，並建立可提升效能的快取策略。

不過，如果網頁在一段時間內首次載入，而控制 Service Worker 的服務並未在該時刻執行，就可能會造成效能成本。由於所有擷取作業都必須透過服務工作者執行，因此瀏覽器必須等待服務工作者啟動及執行，才能得知要載入哪些內容。

有了 Service Worker Static Routing API，您可以在安裝時宣告路徑，讓路徑一律從網路提供。稍後載入受控網址時，瀏覽器可以在服務工作程式完成啟動前，開始從這些路徑擷取資源。這麼做會從您知道不需要服務工作元的網址中移除服務工作元。

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

還有更多獎品等著您！

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

  • 您可以根據使用者透過 NavigationActivation 介面瀏覽的網頁，提供自訂網頁。

  • Chrome 現已支援 Zstandard (zstd)。這個 Content-Encoding 可加快網頁載入速度，減少頻寬使用量，並減少在伺服器上壓縮內容所需的時間、CPU 和電力，進而降低伺服器成本。

  • 適用於 bfcache 的 notRestoredReasons API 將從 Chrome 123 開始推出。這可讓網站擁有者在欄位中收集無法使用 bfcache 的原因。網站擁有者可以利用這項功能改善 bfcache 的使用方式，加快瀏覽歷史記錄的速度。

  • display-mode 的 picture-in-picture 值可讓您編寫特定 CSS 規則，這些規則只會在網頁應用程式以分割畫面模式顯示時套用。例如：

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

延伸閱讀

這份報告僅涵蓋部分重點。如要瞭解 Chrome 123 中的其他變更，請參閱下列連結。

訂閱

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

我是 Adriana Jara，Chrome 124 一推出，我就會在這裡告訴你 Chrome 有哪些新功能！