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 (「與下一個顯示內容互動」) 不佳的原因。這個 API 是用於評估網站回應速度的 Core Web Vital。

新版 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 轉送 API。

只要使用服務工作處理程序，即可讓網站離線運作，並制定能大幅提升效能的快取策略。

不過，如果網頁一段時間內的首次載入，可能會導致 Service Worker 當下並未執行，進而導致效能低落。由於所有擷取作業都必須透過 Service Worker 進行，因此瀏覽器必須等待 Service Worker 啟動並執行，才能知道要載入什麼內容。

在安裝時，使用 Service Worker Static 轉送 API，您可以宣告一律從網路提供的路徑。稍後載入受控制的網址時，瀏覽器可以在服務工作處理程序啟動之前，就開始從這些路徑擷取資源。這會將 Service Worker 從已知不需要 Service Worker 的網址中移除。

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 Developers YouTube 頻道， 每次推出新影片時，您都會收到電子郵件通知。

Yo soy Adriana Jara 等 Chrome 124 推出後，立即向各位說明 Chrome 的新功能！