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 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 中的新变化！