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 中，DevTools 的性能面板进行了以下改进。

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

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

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

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

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

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

Async Clipboard 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 中的新变化！