Chrome 94 版的新功能

Pete LePage

以下是一些注意事項：

  • <canvas> 元素的預設色彩空間現在會依規格定義為 SRGB，而您可以將其變更為 Display P3。
  • WebCodecs 是新推出的低階音訊及影片轉碼器，對於串流遊戲、影片編輯器等方面來說十分重要。
  • WebGPU 開始試用來源。
  • PWA 高峰會將於 10 月 6 日至 7 日舉行。
  • 還有更多應用程式。

我是 Pete LePage，目前在工作及拍攝地點。接下來，我們來深入探索 Chrome 94 開發人員推出的新功能。

canvas 元素的預設色域

畫面色彩的顯示方式對於部分使用者而言至關重要。如果是攝影師、列印插圖和其他許多人，螢幕上的色彩必須和列印內容一致。從 Chrome 94 版開始，系統會使用 sRGB 完全管理 <canvas> 元素。以往 sRGB 是採用慣例，但並未在規格中明確定義。

opts = {colorSpace:'display-p3'};
const ctx = canvas.getContext('2d', opts);

更重要的是，在建立 <canvas> 算繪情境 2d 物件或 ImageData 物件 (包括 P3 色域) 時，您現在可以指定要使用的色域。

WebCodecs

將影片放在頁面上一點也不難。但如果您需要執行更複雜的操作並與影片串流的元件互動，這並不容易，通常您必須使用 Web Assembly 來提供自己的轉碼器！

但傳送自己的轉碼器意味著您編寫瀏覽器現有的程式碼，而且無法利用硬體加速功能！Web Codecs API 可讓您使用瀏覽器中現有的媒體元件和轉碼器。

個人經驗，我一直難以記住正確的指令列切換按鈕， 以便為影片進行網路編碼，或是將 GIF 轉換成影片檔案使用 WebCodecs 提供的 API 後，我就能快速建構網頁應用程式，以便讀取檔案，並將網頁所需的檔案匯出。

從 Canvas 或 ImageBitmap 到網路或儲存空間的路徑
從 Canvas 或 ImageBitmap 到網路或儲存空間的路徑

需要完全控管媒體內容處理方式的網頁應用程式，例如影片編輯器、視訊會議、串流應用程式等。對內建媒體控制項的瀏覽器存取需求極大。

在三十秒內顯示任何實用內容並不容易，因此請觀看 web.dev 上的使用 WebCodecs 處理影片，進一步瞭解大量程式碼和一些精彩的示範模式！

WebGPU

WebGPU 是能公開新型圖形功能的新 API，特別是 Direct3D 12、 Metal 和 Vulkan。這就像是 WebGL，但可讓您存取更多 GPU 的進階功能，而且也支援在 GPU 上執行一般運算。

這個架構圖顯示 OS API 與 Direct3D 12、 Metal 和 Vulkan 之間的 WebGPU 連線。
WebGPU 架構圖表

我們正在 Chrome 94 開始來源試用，Safari 和 Firefox 目前也正在著手實作。

Babylon.js 示範使用 WebGPU 運算著色器功能模擬海平面。

François 有一篇精彩的文章，詳情請參閱「使用 Web.dev 上的新型 GPU 功能」一文，並比較在 CPU 與 GPU 上執行的矩陣乘法效能。提示一下GPU 勝出。

PWA 高峰會

PWA 高峰會將於 10 月 6 日至 7 日舉行。這場免費的線上會議旨在幫助每個人運用漸進式網頁應用程式獲得成功。PWA 高峰會是 Google、Intel、Microsoft 和 Samsung 等幾家公司參與開發 PWA 技術的公司，共同合作。

網路上有很多精彩的講座和內容，如要瞭解詳情及註冊，請前往 PWASummit.org。希望您能夠積極參與！

還有更多獎品等著您！

當然還有許多其他東西。

優先順序 scheduler.postTask() 方法可讓您安排工作時間、以動態方式變更工作的優先順序，或是全部取消。

如果您在顯示捲軸時曾嘗試重新版面配置，scrollbar-gutter 屬性會讓您滿意。這項設定可讓您控管捲軸溝槽是否顯示，藉此避免在內容展開時變更版面配置。

在第三方結構定義中使用 WebSQL 的功能現已淘汰，Chrome 97 預計會將其移除。Web SQL 資料庫標準已於 2010 年 11 月淘汰。它從未在 Firefox 中導入，且已於 2019 年在 Safari 中淘汰。並且會在用量過低時從 Chrome 中移除。如果您仍在使用 WebSQL，現在是開始規劃其遷移的好時機。

此外，虛擬鍵盤 API 還可讓您進一步控管螢幕小鍵盤的顯示方式和時機。可讓您明確控制任何捲動行為，或者在鍵盤顯示或消失時變更版面配置。

其他資訊

這僅涵蓋部分重點功能。如需瞭解 Chrome 94 版的其他變更，請點選下方連結。

訂閱

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

我是 Pete LePage，只要 Chrome 95 版推出，我就會在這裡為您提供 Chrome 的新功能！