Chrome 122 新功能

Adriana Jara

以下是一些注意事項：

我是 Adriana Jara讓我們深入探索 Chrome 122 為開發人員推出的新功能。

Storage 值區 API。

Storage Buckets API 提供更精細的管理能力，方便您更有效地管理永久儲存空間。

一般來說，當使用者的裝置儲存空間不足時，使用 IndexedDB 或 localStorage 等 API 儲存的資料會遺失，使用者無法操作。永久儲存空間的方法是使用 StorageManager 介面的 persist() 方法。不過，要求持續儲存空間的方法並非全部或完全

Storage Buckets API 的核心概念是讓網站能夠建立多個儲存空間值區，瀏覽器也可能選擇將每個值區單獨刪除，不受其他值區影響。因此，您可以指定「移除優先順序」，確保不刪除最有價值的資料。每個儲存空間值區都能包含與現有儲存 API 相關聯的資料，例如 IndexedDB 和 CacheStorage。

造訪不同儲存體的儲存空間不盡相同：隆重推出 Storage 值區一文，瞭解更多詳細資訊，以及開始使用 Storage 值區的程式碼範例。

效能面板中的開發人員工具改善項目

在 Chrome 122 開發人員工具的「效能」面板中包含下列改善項目。

首先，您現在可以設定「Performance」面板頂端的「時間軸」，設定導覽標記，並在標記之間切換。如要設定導覽標記，請在「時間軸」上選取範圍，將滑鼠遊標懸停在該範圍上，然後按一下對應的「N ms」zoom_in 按鈕。您可以連續建立多個巢狀導覽標記。如要在縮放等級之間跳轉，請按一下「時間軸」頂端的鏈結中對應的導覽標記。請觀看下一部影片，瞭解導覽標記的實際運作情形。

此外，「Main」(主要) 測試群組中也會顯示事件發起人。根據預設，[成效] > [主要] 軌道會顯示用來連接啟動條件的箭頭，以及下列事件造成的箭頭。

  • 樣式或版面配置無效 ->「重新計算樣式」或「版面配置」
  • 「Request Animation Frame」->「Animation Frame」
  • 「Request Idle Callback」(要求閒置回呼) ->「Fire Idle Callback」
  • [安裝計時器] -> [已觸發計時器]
  • 建立 WebSocket ->「傳送...」和「接收 WebSocket 握手」或「刪除 WebSocket」

如要查看箭頭，請在追蹤記錄中尋找這類事件，然後按一下該事件。

要求的箭頭並啟動閒置回呼。

如要瞭解更多開發人員工具更新，請參閱 DevTools 122 的新功能。

非同步剪貼簿 API unsanitized 選項

使用 Async Clipboard API 複製及貼上時，read() 方法的 unsanitized 選項可讓應用程式和網站取得未經處理的 HTML。除非網站包含這個屬性，否則讀取剪貼簿中的 HTML 都會受到清除。

根據預設，使用非同步 API 讀取 text/html MIME 類型時，基於安全考量，系統會叫用清理程式來移除 HTML 標記中的內容，並內嵌在產生的 HTML 中。這會導致大量 HTML 承載，並導致 HTML 內容在網站開發人員或行動應用程式閱讀時遺失擬真度。

您可以在下列範例的輸出內容中看到差異。

輸入內容：

<style>p { color: blue; }</style><p>Hello, World!</p>'

清除 (預設)：

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

使用 unsanitized 選項：

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

如要瞭解 Clipboard API 的基本概念，請參閱「解除封鎖剪貼簿」。

還有更多獎品等著您！

當然還有許多其他東西。

  • 在 CSS 中，含有不支援的功能的容器查詢會永遠保持不變。例如，下列查詢因不明特徵而永遠不會比對：
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() 不會影響 File 物件，只會刪除文字類型物件。

  • 有了 WebGL 的 drawingBufferStorage，即可在算繪為預設繪圖緩衝區像素格式時避免額外複製，並繪製精確度超過 8 位元的內容。

延伸閱讀

以上內容僅涵蓋部分重點功能。如要瞭解 Chrome 122 的其他變更，請點選以下連結。

訂閱

如要隨時掌握最新資訊，請訂閱 Chrome Developers YouTube 頻道，每當我們推出新影片時，您就會收到電子郵件通知。

Yo soy Adriana Jara 和 Chrome 123 推出後，我將立刻告訴大家 Chrome 有哪些新功能！