此页面由 Cloud Translation API 翻译。

Chrome 124 的新变化

Pete LePage

以下是 Chrome 124 中的亮点：

现在有两个新 API 可允许声明式 shadow DOM 。
您可以在 Web Sockets 中使用流。
视图过渡有所改进。
还有许多其他功能。

想查看完整报道？请查看 Chrome 124 版本说明。

在 JavaScript 中使用声明式 shadow DOM

现在有两个新的 API 可让您从 JavaScript。

setHTMLUnsafe() 与 innerHTML 类似，可让您设置向提供的字符串添加元素。当您需要一些包含声明式 shadow DOM 的 HTML，如下所示。

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

如果只使用 innerHTML，浏览器将无法正确解析，无 shadow DOM。但使用 setHTMLUnsafe() 时，系统会创建 shadow DOM，且元素将按预期进行解析。

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

另一个 API 是 parseHTMLUnsafe()，其工作方式类似于 DOMParser.parseFromString()。

这两个 API 都不安全，这意味着它们不会进行任何输入清理。所以你要确保自己喂给他们的所有食物都是安全的。在即将发布的版本中，我们预计会看到一个提供排错功能的版本输入词元。

最后，在 Google Cloud 的 Firefox 和 Safari！

WebSocket 流 API

WebSocket 是一种很好的方法，可以在用户的而无需依赖于轮询。这非常适合于以及聊天应用等。

但是，如果数据到达速度超过了您的处理能力，该怎么办？

这称为背压，可能会引起一些严重的头痛。遗憾的是，WebSocket API 没有很好地处理返回压力。

WebSocket Stream API 提供了以及 Web Sockets，这意味着且无需额外付费

首先，构造一个新的 WebSocketStream 并向其传递 WebSocket 服务器。

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

接下来，您需要等待连接打开在 ReadableStream 和 WritableStream 中。通过调用 ReadableStream.getReader() 方法，您会得到一个 ReadableStreamDefaultReader 然后您可以read()数据，直到流完成。

如需写入数据，请调用 WritableStream.getWriter() 方法，该方法将为您提供 WritableStreamDefaultWriter，然后您可以write()将数据复制到该目录。

视图过渡方面的改进

我很喜欢视图过渡功能 Chrome 124 中旨在简化视图过渡。

导航时，系统会在文档的窗口对象上触发 pageswap 事件将用新文档替换该文档。

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

以及文档渲染阻止功能，可让您阻止渲染文档，直到关键内容被解析，才能确保一致的首次渲染。

等等！

当然还有很多其他功能。

disallowReturnToOpener 提示浏览器不应在画中画中显示按钮该窗口允许用户返回 Opener 标签页。
键盘可聚焦滚动容器使用依序控件使滚动容器可聚焦，从而改进了无障碍功能焦点导航。
而通用安装则允许用户安装任何网页符合当前 PWA 标准。

深入阅读

本指南仅涵盖部分重要内容。请访问以下链接 Chrome 124 中的其他变更。

要随时掌握最新动态，请订阅 Chrome 开发者 YouTube 频道，，每当我们发布新视频时，您都会收到电子邮件通知。

我是 Pete LePage，待 Chrome 125 发布后，告诉您 Chrome 中的新变化！