Chrome 94 的新功能

以下是您需要知晓的相关信息:

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

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

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

需要完全控制媒体内容处理方式的 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 峰会由 Google、Intel、Microsoft 和三星等多家参与 PWA 技术开发的不同公司的人员联合举办。

大会上有许多精彩的演讲和内容。如需了解详情并注册,请访问 PWASummit.org。期待您届时与我们见面!

等等!

当然,还有许多其他功能。

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

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

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

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

深入阅读

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

订阅

如需及时了解最新动态,请订阅 Chrome 开发者 YouTube 频道,这样每当我们发布新视频时,您就会收到电子邮件通知。

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