以下是一些注意事項:
- 使用新的
light-dark()
函式調整色彩配置。 - 使用 Long Animation Frames API 診斷網站回應速度。
- 使用 Service Worker Static Routing API 避免服務工作站啟動效能降低。
- 還有更多應用程式。
我是 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 開發人員工具新功能 (123)
- Chrome 123 淘汰和移除
- 適用於 Chrome 123 的 ChromeStatus.com 更新
- Chromium 原始碼存放區變更清單
- Chrome 發布時間表
訂閱
如要隨時掌握最新資訊,請訂閱 Chrome Developers YouTube 頻道,每當我們推出新影片時,您就會收到電子郵件通知。
Yo soy Adriana Jara,而且 Chrome 124 推出後,我將立刻告訴大家 Chrome 有哪些新功能!