以下是一些注意事項:
- 使用新的
light-dark()
函式調整色彩配置。 - 使用 Long Animation Frame API,診斷網站上的回應速度。
- 使用 Service Worker Static 轉送 API 避免 Service Worker 啟動效能降低。
- 除此之外,你還有更多功能。
我是 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 開發人員工具新功能 (123)
- Chrome 123 淘汰與移除作業
- Chrome 123 適用的 ChromeStatus.com 更新
- Chromium 原始碼存放區變更清單
- Chrome 發布時間表
訂閱
歡迎訂閱 Chrome Developers YouTube 頻道, 每次推出新影片時,您都會收到電子郵件通知。
Yo soy Adriana Jara 等 Chrome 124 推出後,立即向各位說明 Chrome 的新功能!