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）相关联的数据。

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

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

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

首先，通过性能面板顶部的时间轴，您现在可以设置面包屑导航并在它们之间进行切换。如需设置面包屑导航，请在 Timeline 上选择一个范围，将鼠标悬停在该范围上，然后点击相应的 N 毫秒 zoom_in 按钮。您可以连续创建多个嵌套面包屑导航。如需在缩放级别之间切换，请点击链中的相应面包屑导航（位于时间轴顶部）。观看下一个视频，了解面包屑导航的实际运用。

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

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

如需查看箭头，请在跟踪记录中找到此类事件，然后点击它。

来自请求的箭头并触发空闲回调。

如需了解更多开发者工具更新，请参阅 Devtools 122 的新变化。

Async Clipboard API unsanitized 选项

在使用 Async Clipboard API 复制和粘贴时，read() 方法的 unsanitized 选项允许应用和网站获取未经过排错的 HTML。除非网站包含此属性，否则系统会清理从剪贴板读取的 HTML 内容。

默认情况下，在使用异步 API 读取 text/html MIME 类型时，出于安全考虑，系统会调用排错程序以从 HTML 标记中删除内容，并将样式内嵌在生成的 HTML 中。这会导致 HTML 有效负载过大，并会在 Web 开发者或移动应用读取 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 Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。

嗨，Adriana Jara！Chrome 123 发布之后，我会随时告诉大家 Chrome 的新变化！