Chrome 124 的新变化

Pete LePage

Chrome 124 中的亮点如下：

想要了解完整的运行方式？查看 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 流 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 中的新变化！