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 124 版本说明
• Chrome 开发者工具的新变化 (124)
• 针对 Chrome 124 的 ChromeStatus.com 更新
• Chromium 源代码库更改列表
• Chrome 发布日历

订阅

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

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