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);
}
  • 當使用者選取淺色主題時，元素的背景就會是亮綠色。
  • 如果使用者選取深色主題，元素會顯示綠色背景。

長動畫頁框 API。

Long Animation Frames API 可協助您找出主要執行緒壅塞的原因，通常是 INP (與下一個繪製互動) 發生的原因。INP 是 Core Web Vitals，是衡量網站回應速度的 Core Web Vitals。

新版 API 是 Long Tasks API 的強化版本，讓您更能掌握使用者介面更新速度緩慢的情形。Long Animation Frames API 可讓您評估封鎖工作，這個 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 進行，因此瀏覽器必須等待 Service Worker 啟動並執行，才能判斷要載入哪些內容。

在安裝時，您可以使用 Service Worker Static Routing 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 有哪些新功能！