Chrome 94 的新功能

Pete LePage

以下是您有必要知道的信息：

  • <canvas> 元素的默认颜色空间现已在规范中正式定义为 SRGB，您可以将其更改为 Display P3。
  • WebCodecs 是一种新的低级别方法，可用于访问内置音频和视频编解码器，对流式游戏、视频编辑器等而言非常重要。
  • WebGPU 开始进行源试用。
  • PWA 峰会将于 10 月 6 日至 7 日举行。
  • 还有许多更多内容。

我是 Pete LePage，在家工作和拍摄。接下来，我们将深入探讨一下 Chrome 94 会为开发者带来哪些新变化。

canvas 元素的默认颜色空间

在屏幕上呈现颜色的方式对某些用户来说至关重要。对于摄影师、平面媒体插画师以及许多其他摄影师，屏幕上的颜色需要与打印的内容相一致。从 Chrome 94 开始，<canvas> 元素使用 sRGB 进行完全颜色管理。以前，sRGB 是惯例，但未在规范中明确定义。

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

更重要的是，您现在可以指定在创建 <canvas> 渲染上下文 2D 对象或 ImageData 对象（包括 P3 颜色空间）时要使用的颜色空间。

WebCodecs

将视频放到页面上是非常简单的。但是，如果您需要执行稍微复杂一些的操作，并与视频流的组件交互，将很难实现，并且通常要求您使用 Web Assembly 来交付自己的编解码器！

但是，提供您自己的编解码器意味着编写浏览器已有的代码，并且无法利用硬件加速！借助 Web Codecs API，您可以使用浏览器中的媒体组件和编解码器。

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

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

需要完全控制媒体内容处理方式的 Web 应用，例如视频编辑器、视频会议、在线影音应用等。对浏览器内置的媒体控件的访问非常庞大。

在 30 秒内显示任何有用的内容并非易事，请查看 web.dev 上的使用 WebCodecs 处理视频，深入了解大量代码和一些精彩的演示！

WebGPU

WebGPU 是一个提供现代图形功能的新 API，尤其是 Direct3D 12、Metal 和 Vulkan。您可以将其视为 WebGL，但前者支持使用 GPU 的更高级功能，还支持在 GPU 上执行常规计算。

显示 OS API 与 Direct3D 12、Metal 和 Vulkan 之间的 WebGPU 连接的架构图。
WebGPU 架构图

Google 将在 Chrome 94 中启动源试用，Safari 和 Firefox 目前正在进行相应的实现。

使用 WebGPU 的计算着色器功能模拟大海的 Babylon.js 演示。

François 在 web.dev 上撰写了一篇很棒的文章：通过 WebGPU 访问现代 GPU 功能（包含详细信息），并比较了在 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，那么现在是开始规划进行迁移的好时机。

而虚拟键盘 API 则可让您更好地控制虚拟屏幕键盘的显示方式和时间。借助该属性，您可以明确控制任何滚动行为，或在键盘出现或消失时更改布局。

深入阅读

这仅涵盖了部分重要的亮点。如需了解 Chrome 94 中的其他变化，请点击以下链接。

订阅

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

我是 Pete LePage