Chrome 97 的新功能

Pete LePage

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

新年快乐！我是 Pete LePage。我们来深入了解一下 Chrome 97 中面向开发者的新功能。

Web Transport

如果您使用 Web Sockets 或 WebRTC Data Channel API 在服务器和网页之间发送消息，则有一个新选项可供您使用。WebTransport 是一个新 API，可提供低延迟、双向的客户端-服务器消息传递。

Web Transport API 的延迟时间比 WebSocket 短，并且与专为点对点消息传递设计的 RTC Data Channel API 不同，Web Transport API 是专门为客户端-服务器消息传递设计的。

它支持通过数据流 API 可靠地发送数据，支持通过数据报 API 不可靠地发送数据。Web Worker 支持该功能。此外，由于它公开了与 Streams 兼容的接口，因此支持针对背压的优化。

如需使用它，您需要一台支持 HTTP/3 的服务器，这通常比设置和维护 WebRTC 服务器更容易。打开新的 WebTransport 实例，等待其连接，然后即可开始发送数据。

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

如需了解完整详情，请参阅 web.dev 上的实验 WebTransport 一文。

脚本类型特征检测

目前，我们可以使用 nomodule 属性在浏览器中检测对 JavaScript 模块的支持。不过，我们正在考虑推出多项新功能，例如导入映射、推测规则和软件包预加载。我们需要通过某种方式来了解浏览器支持哪些内容。

输入 HTMLScriptElement.supports()。您可以使用它来确定可以使用哪些类型的脚本，并发送给浏览器最佳选项。

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

新的数组原型

我很高兴 JavaScript 变得更简单。Array 和 TypedArray 现在支持 findLast() 和 findLastIndex() 静态方法。

这些函数实际上与 find() 和 findIndex() 相同，但从数组的末尾而不是开头进行搜索。

例如，如需查找数组中大于 10 的最后一个数字，请使用用于检查值是否大于 10 的测试函数调用 findLast()，即可顺利完成。

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

在 UA 字符串中模拟 Chrome 100

短短几个月后，我们将迎来 Chrome 100，这是个三位数版本号。 应检查用于检查版本号或解析 UA 字符串的所有代码，确保其能够处理三位数。

有一个名为 #force-major-version-to-100 的标志，会将当前版本号更改为 100，以便您确保一切都能按预期运行。

突出显示新 #force-major-version-to-100 选项的 Chrome 标志页面

等等！

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

表单条目中的新行现在会采用与 Gecko 和 WebKit 相同的方式进行规范化，从而提高浏览器之间的互操作性。

我们通过在客户端提示名称前添加 sec-ch 作为前缀来对客户端提示名称进行标准化。例如，dpr 会变为 sec-ch-dpr。我们将继续支持这些提示的现有版本，但您应做好最终弃用和移除这些提示的准备。

关闭的 <details> 元素现在可供搜索，并且可以链接到。使用“在页面中查找”“ScrollToTextFragment”和元素 fragment 导航时，这些隐藏元素会自动展开。

深入阅读

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

订阅

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

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