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，您可以使用浏览器中已有的媒体组件和编解码器。

就我个人而言，我一直很难记住用于对视频进行 Web 编码或将 GIF 转换为视频文件的正确命令行开关。使用 WebCodecs 提供的 API，我可以快速构建一个 Web 应用，用于读取文件并导出 Web 所需的正确文件。

从 Canvas 或 ImageBitmap 到网络或存储空间的路径
从 Canvas 或 ImageBitmap 到网络或存储空间的路径

需要完全控制媒体内容处理方式的 Web 应用，例如视频编辑器、视频会议、流式传输应用等。访问浏览器内置的媒体控件非常重要。

要在 30 秒内展示任何实用内容都很难，因此请参阅 web.dev 上的使用 WebCodecs 处理视频，深入了解大量代码和一些很酷的演示！

WebGPU

WebGPU 是一个新的 API，可提供现代图形功能，尤其是 Direct3D 12、Metal 和 Vulkan。您可以将其视为 WebGL，但它提供了对 GPU 更高级功能的访问权限，并且还支持在 GPU 上执行一般计算。

架构图，显示了操作系统 API 与 Direct3D 12、Metal 和 Vulkan 之间的 WebGPU 连接。
WebGPU 架构图

Chrome 94 已开始源试用，Safari 和 Firefox 目前正在开发相应的实现方案。

一个 Babylon.js 演示，演示了使用 WebGPU 的计算着色器功能模拟汹涌大海。

François 在 web.dev 上撰写了一篇很棒的文章，名为 Access modern GPU features with WebGPU，其中详细介绍了相关内容，并比较了在 CPU 和 GPU 上运行矩阵乘法时的性能。下面是一个提示。GPU 胜出。

PWA 峰会

PWA 峰会将于 10 月 6 日至 7 日举行。这是一场免费的在线会议，专注于通过渐进式 Web 应用帮助所有人取得成功。PWA 峰会是由参与 PWA 技术开发的一些不同公司（Google、Intel、Microsoft 和 Samsung）的专家展开的。

大会上有许多精彩的演讲和内容。如需了解详情并注册，请访问 PWASummit.org。希望能在那里见到您！

等等！

当然还有很多其他功能。

借助优先级 scheduler.postTask() 方法，您可以调度任务，动态更改其优先级，或全部取消。

如果您曾在滚动条出现时遇到重新布局问题，scrollbar-gutter 属性会让您满意。它可控制滚动条边线的存在，让您能够防止内容展开时布局发生变化。

在第三方情境中使用 WebSQL 现已废弃，预计将在 Chrome 97 中移除。Web SQL 数据库标准已于 2010 年 11 月被弃用。它从未在 Firefox 中实现，并于 2019 年在 Safari 中被废弃。当使用量足够低时，我们将弃用该功能并将其从 Chrome 中移除。如果您仍在使用 WebSQL，不妨趁现在开始规划从 WebSQL 迁移。

借助虚拟键盘 API，您可以更好地控制虚拟屏幕键盘的显示方式和时间。借助它，您可以明确控制任何滚动行为，或在键盘显示或隐藏时对布局所做的更改。

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 94 中的其他变更，请点击以下链接。

订阅

如需了解最新动态，请订阅 Chrome Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。

我是 Pete LePage，Chrome 95 发布后，我会立即为您介绍 Chrome 中的新变化！