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 上執行一般運算。

架構圖：顯示 WebGPU 在 OS API 和 Direct3D 12、Metal 和 Vulkan 之間的連線。
WebGPU 架構圖

我們已在 Chrome 94 中開始來源試用版，Safari 和 Firefox 也正在進行相關實作。

Babylon.js 示範，使用 WebGPU 的運算著色器功能模擬波濤洶湧的海浪。

François 有一篇很棒的文章：在 web.dev 上透過 WebGPU 存取新型 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 Database 標準已於 2010 年 11 月停用。這項功能從未在 Firefox 中實作，並於 2019 年淘汰。當使用率降到一定程度時，這項功能就會停用並從 Chrome 中移除。如果您仍在使用 WebSQL，現在是開始規劃遷移的理想時機。

虛擬鍵盤 API 則可讓您進一步控管虛擬螢幕小鍵盤的顯示方式和時機。您可以使用這項功能明確控制任何捲動行為，或在鍵盤顯示或消失時變更版面配置。

延伸閱讀

這份文件僅涵蓋部分重點。如要瞭解 Chrome 94 的其他變更，請參閱下方連結。

訂閱

如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

我是 Pete LePage，當 Chrome 95 推出後，我會在這裡告訴大家 Chrome 的新功能！