以下是 Chrome 124 中的亮点：
- 有两个新的 API 支持从 JavaScript 使用声明性 shadow DOM。
- 您可以在 Web Socket 中使用流。
- 改进了视图过渡功能。
- 还有许多更多内容。
想看完整内容？查看 Chrome 124 版本说明。
在 JavaScript 中使用声明性 shadow DOM
新增了两个 API，它们允许在 JavaScript 中使用声明性 shadow DOM。
setHTMLUnsafe() 与 innerHTML 类似，可让您将元素的内部 HTML 设置为提供的字符串。这在您有一些包含声明性 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 都是不安全的，这意味着它们不会进行任何输入排错。因此，您要确保自己喂食的一切都是安全的。 在即将发布的版本中，我们希望看到对输入进行清理的版本。
最后，最新版本的 Firefox 和 Safari 已经支持这两种 API！
WebSocket 流 API
WebSocket 是一种在用户浏览器与服务器之间来回发送数据的好方法，无需依赖轮询。这对于聊天应用等应用非常有用，在这些应用中，您希望在收到信息后立即加以处理。
但是，如果数据到达速度超乎您的处理速度，该怎么办呢？
这称为背压，可能会给您造成一些严重的头痛。 遗憾的是，WebSocket API 没有很好地处理返回压力的方法。
WebSocket Stream API 具有数据流和 Web 套接字的功能，这意味着无需任何额外费用即可应用背压。
首先，构造一个新的 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会提示浏览器不应在画中画窗口中显示可让用户返回“打开者”标签页的按钮。支持键盘聚焦的滚动容器通过使用顺序焦点导航使滚动容器可聚焦，改进了无障碍功能。
通用安装允许用户安装任何页面，即使那些不符合当前 PWA 条件的页面也不例外。
深入阅读
这里仅介绍一些重要的亮点。如需了解 Chrome 124 中的其他变化，请点击以下链接。
- Chrome 124 版本说明
- Chrome 开发者工具的新变化 (124)
- 针对 Chrome 124 的 ChromeStatus.com 更新
- Chromium 源代码库更改列表
- Chrome 发布日历
订阅
如需随时了解最新动态，请订阅 Chrome Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。
我是 Pete LePage