Chrome 97 的新功能

Pete LePage

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

• WebTransport 是在客户端和服务器之间发送实时消息的新选项。
• 您可以使用功能检测来查看浏览器支持哪些类型的脚本。
• 从头搜索数组会稍微简单一些。
• 还有许多更多内容。

新年快乐！我是 Pete LePage。我们一起来深入了解 Chrome 97 为开发者带来了哪些新功能

网络传输

如果您使用 Web Sockets 或 WebRTC Data Channel API 在服务器和页面之间发送消息，则可以使用一个新选项。WebTransport 是一个提供低延迟客户端-服务器消息传递的新 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 的数组中的最后一个数字，请使用测试函数调用 findLast()，该函数会检查值是否大于 10，这样就大功告成了。

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，以确保一切按预期运行。

还有更多其他奖励！

当然还有很多。

表单条目中的新行现在按照与 Gecko 和 WebKit 相同的方式进行标准化，从而改善浏览器之间的互操作性。

我们对客户端提示名称进行了标准化，方法是在名称前添加 sec-ch 作为前缀。例如，将 dpr 更改为 sec-ch-dpr。我们将继续支持这些提示的现有版本，但您应该为最终弃用和移除这些提示做好规划。

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

深入阅读

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

• Chrome 开发者工具的新变化 (97)
• Chrome 97 弃用和移除
• Chrome 97 的 ChromeStatus.com 更新
• Chrome 97 中的 JavaScript 的新变化
• Chromium 源代码库更改列表
• Chrome 发布日历

订阅

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

我是 Pete LePage