此页面由 Cloud Translation API 翻译。

Chrome 124 的新变化

Pete LePage

以下是 Chrome 124 中的亮点：

有两个新 API 可让您从 JavaScript 使用声明式 Shadow DOM。
您可以在 Web 套接字中使用数据流。
视图过渡略有改进。
还有许多其他功能。

想要了解完整的运行方式？查看 Chrome 124 版本说明。

在 JavaScript 中使用声明式 shadow DOM

有两个新 API 允许从 JavaScript 使用声明式 Shadow DOM。

setHTMLUnsafe() 与 innerHTML 类似，可让您将元素的内部 HTML 设置为所提供的字符串。如果您的某些 HTML 包含像这样的声明式 shadow DOM，这会很有帮助。

<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 都不安全，这意味着它们不会执行任何输入清理操作。所以你要确保自己给他们喂的所有食物都是安全的。在即将发布的版本中，我们预计会看到一个确实会对输入进行清理处理的版本。

最后，最新版本的 Firefox 和 Safari 已经支持这两个 API！

WebSocket Stream API

WebSocket 是用户在浏览器和服务器之间来回发送数据的绝佳方式，无需依赖轮询。这对于聊天应用等需要在信息到达后立即处理信息的应用非常有用。

但如果数据传入速度超出您的处理能力，该怎么办？

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

WebSocket Stream API 可让您充分利用流和 WebSocket 的强大功能，这意味着您无需额外付费即可应用回压。

首先，构建一个新的 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() 到该 WritableStreamDefaultWriter。

视图过渡改进

我很高兴看到视图转换功能，Chrome 124 中还提供了两项旨在简化视图转换的新功能。

当导航将文档替换为新文档时，系统会针对文档的窗口对象触发 pageswap 事件。

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

还有文档渲染屏蔽功能，让您可在解析关键内容之前阻止文档渲染，从而确保在所有浏览器中保持一致的首次渲染效果。

等等！

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

disallowReturnToOpener 提示浏览器不应在画中画窗口中显示允许用户返回打开器标签页的按钮。
键盘可聚焦滚动容器使用依序焦点导航使滚动容器可聚焦，从而改进了无障碍功能。
借助通用安装，用户可以安装任何网页，即使不符合当前的 PWA 条件也是如此。

深入阅读

本指南仅涵盖部分重要内容。如需了解 Chrome 124 中的其他变更，请点击以下链接。

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

我是 Pete LePage。Chrome 125 发布后，我们会立即在此处向您介绍 Chrome 中的新变化！