以下是 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