Chrome 122 的新变化

Adriana Jara

以下是您需要知晓的相关信息：

我是 Adriana Jara。我们来深入了解一下 Chrome 122 中面向开发者的新功能。

Storage Buckets API。

Storage Buckets API 提供更精细的粒度，以便更好地管理永久存储空间。

传统上，当用户用尽设备上的存储空间时，使用 IndexedDB 或 localStorage 等 API 存储的数据会丢失，而用户无法干预。使存储空间持久化的一种方法是使用 StorageManager 接口的 persist() 方法。不过，这种请求持久存储的方法是“全部或全无”

Storage Buckets API 的核心理念是，允许网站创建多个存储分区，浏览器可以单独删除每个存储分区，而不会影响其他存储分区。因此，您可以指定逐出优先级，以确保最有价值的数据不会被删除。每个存储分区可以包含与既有的存储 API（例如 IndexedDB 和 CacheStorage）相关联的数据。

如需了解详情并获取开始使用存储分区的代码示例，请参阅并非所有存储空间都是一样的：Storage 存储分区简介。

改进了“性能”面板中的开发者工具

在 Chrome 122 中，开发者工具在 Performance 面板中进行了以下改进。

首先，您现在可以在效果面板顶部的时间轴中设置面包屑导航，并在面包屑导航之间跳转。如需设置面包屑导航，请在时间轴上选择一个范围，将光标悬停在该范围上，然后点击相应的 N ms 按钮。您可以连续创建多个嵌套面包屑导航。若要在不同缩放级别之间切换，请点击时间轴顶部链中相应的面包屑导航。观看下一个视频，了解面包屑导航的实际效果。

此外，主要轨道中现在包含事件发起者。默认情况下，效果 > 主要轨道会显示箭头，用于连接发起者及其导致的后续事件。

  • 样式或布局失效 -> 重新计算样式或布局
  • 请求动画帧 -> 动画帧已触发
  • 请求空闲回调 -> 触发空闲回调
  • 安装定时器 -> 定时器已触发
  • 创建 WebSocket -> 发送...和接收 WebSocket 握手或销毁 WebSocket

如需查看箭头，请在轨迹中找到此类事件，然后点击该事件。

从请求到触发空闲回调的箭头。

如需了解更多 DevTools 更新，请参阅 DevTools 122 中的新变化。

异步剪贴板 API unsanitized 选项

使用 Async Clipboard API 进行复制和粘贴时，read() 方法的 unsanitized 选项允许应用和网站获取未经净化的 HTML。除非网站包含此属性，否则系统会对从剪贴板读取的 HTML 进行净化。

默认情况下，在使用异步 API 读取 text/html MIME 类型时，出于安全考虑，系统会调用排错程序以从 HTML 标记中删除内容，并且样式会内嵌在生成的 HTML 中。 这会导致 HTML 载荷变大，并导致 Web 开发者或移动应用读取 HTML 内容时 HTML 内容的保真度下降。

您可以在以下示例中看到输出的差异。

输入：

<style>p { color: blue; }</style><p>Hello, World!</p>'

经过净化（默认）：

<p style='color: blue; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>Hello, World!</p>

使用 unsanitized 选项：

<html><head><style>p { color: blue; }</style></head><body><p>Hello, World!</p></body></html>

如需了解 Clipboard API 的基础知识，请参阅取消屏蔽剪贴板访问权限。

等等！

当然，还有许多其他功能。

  • 在 CSS 中，包含不受支持功能的容器查询永远不会匹配。例如，由于未知功能，以下查询将永远不会匹配：
@container (width > 0px) or (unknown) {}

  • dataTransfer.clearData() 不会影响 File 对象，只会删除文本类型对象。

  • 借助 WebGL 的 drawingBufferStorage，您可以在将渲染转换为默认的绘制缓冲区像素格式并绘制精度高于 8 位的内容时避免额外复制。

深入阅读

本指南仅涵盖部分重要内容。如需了解 Chrome 122 中的其他变更，请访问以下链接。

订阅

如需及时了解最新动态，请订阅 Chrome 开发者 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

亲爱的 Adriana Jara，Chrome 123 一发布，我都会在这里向大家介绍 Chrome 的新变化！