Chrome 133 Beta 版

发布时间:2024 年 1 月 15 日

除非另有说明,否则以下更改适用于 Android、ChromeOS、Linux、macOS 和 Windows 的最新 Chrome Beta 版渠道版本。如需详细了解此处列出的功能,请点击提供的链接或访问 ChromeStatus.com 上的列表。截至 2024 年 1 月 15 日,Chrome 133 为 Beta 版。您可以访问 Google.com 下载桌面版,也可以在 Android 设备上访问 Google Play 商店下载。

CSS 和界面

此版本新增了七项 CSS 和界面功能。

CSS 高级 attr() 函数

实现了 CSS 5 级中指定的 attr() 增强功能,该功能允许使用除 <string> 之外的类型,并可在所有 CSS 属性中使用(除了对伪元素 content 的现有支持之外)。

如需了解详情,请参阅 CSS attr() 迎来升级

CSS :open 伪类

<dialog><details> 处于打开状态时,:open 伪类会匹配它们;当 <select><input> 处于具有选择器的模式且选择器正在显示时,:open 伪类会匹配它们。

CSS 滚动状态容器查询

使用容器查询根据容器的滚动状态为容器的后代设置样式。

查询容器可以是滚动容器,也可以是受滚动容器的滚动位置影响的元素。您可以查询以下状态:

  • stuck:粘性定位的容器会固定到滚动框的某个边缘。
  • snapped:滚动贴靠对齐的容器当前已水平或垂直贴靠。
  • scrollable:滚动容器是否可以在查询的方向上滚动。

新的 container-type: scroll-state 可用于查询容器。

#sticky {
  position: sticky;
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  #sticky-child {
    font-size: 75%;
  }
}

如需了解详情,请参阅 CSS scroll-state()

CSS text-boxtext-box-trimtext-box-edge

为了实现文本内容的最佳平衡,text-box-trimtext-box-edge 属性以及 text-box 简写属性可用于更精细地控制文本的垂直对齐方式。

text-box-trim 属性用于指定要剪裁的边(上方或下方),而 text-box-edge 属性用于指定应如何剪裁边缘。

借助这些属性,您可以使用字体指标精确控制垂直间距。如需了解详情,请参阅 CSS text-box-trim

popover 属性的 hint

Popover API 为 popover 属性的两个值(automanual)指定了行为。此功能描述了第三个值 popover=hint。提示(通常与“提示框”类型的行为相关联)的行为略有不同。主要区别在于,打开嵌套的弹出式窗口堆栈时,hint 从属于 auto。因此,在现有 auto popover 堆栈保持打开状态时,可以打开不相关的 hint popover。

一个规范的示例是,打开 <select> 选择器 (popover=auto) 并显示悬停触发的提示 (popover=hint)。该操作不会关闭 <select> 选择器。

改进了弹出式窗口调用方和锚点定位

添加了一种命令式方式,用于通过 popover.showPopover({source}) 设置弹出式窗口之间的调用方关系。允许调用方关系创建隐式锚元素引用。

嵌套在调用器中的弹出式窗口不应重新调用调用器

在以下情况下,点击按钮会正确激活弹出框,但之后点击弹出框本身不应关闭弹出框。

<button popovertarget=foo>Activate
  <div popover id=foo>Clicking me shouldn't close me</div>
</button>

之前之所以会发生这种情况,是因为弹出式窗口点击事件冒泡到 <button> 并激活了调用方,从而切换弹出式窗口的关闭状态。现在已更改为预期行为。

Web API

Animation.overallProgress

为开发者提供了一种便捷且一致的方式来表示动画在其迭代过程中已推进的程度,无论其时间轴的性质如何。如果没有 overallProgress 属性,您需要手动计算动画的进度,并考虑动画的迭代次数以及动画的 currentTime 是总时间的百分比(如滚动驱动的动画)还是绝对时间量(如时间驱动的动画)。

Atomics 对象的 pause() 方法

pause() 方法添加到 Atomics 命名空间对象,以向 CPU 提示当前代码正在执行自旋锁。

针对脚本的 CSP 哈希报告

复杂的 Web 应用通常需要跟踪其下载的子资源,以确保安全性。

特别是,即将推出的行业标准和最佳实践(例如 PCI-DSS v4)要求 Web 应用保留其下载和执行的所有脚本的清单。

此功能基于 CSP 和 Reporting API,用于报告文档加载的所有脚本资源的网址和哈希值(对于 CORS/同源)。

保留 DOM 状态的移动

添加了一个 DOM 原语 (Node.prototype.moveBefore),可让您在 DOM 树中移动元素,而无需重置元素的状态。

如果移动而非移除和插入,则会保留以下状态:

  • <iframe> 个元素保持加载状态。
  • 活动元素保持焦点。
  • 弹出式窗口、全屏对话框和模态对话框保持打开状态。
  • CSS 过渡和动画继续。

<area> 上公开 attributionsrc 属性

使 <area>attributionsrc 属性的公开与该属性的现有处理行为保持一致,即使该属性未公开也是如此。

此外,在 <area> 上支持该属性也是有意义的,因为该元素是一流的导航界面,而 Chrome 已经在 <a>window.open 的其他界面上支持该属性

在元素计时和 LCP 中公开粗略的跨源 renderTime(无论 Timing-Allow-Origin 如何)

元素时间和 LCP 条目具有 renderTime 属性,该属性与绘制图片或文本的第一个帧对齐。

目前,此属性通过要求图片资源包含 Timing-Allow-Origin 标头来保护跨源图片。不过,这种限制很容易规避(例如,通过在同一帧中显示同源图片和跨源图片)。

由于此限制一直令人困惑,因此我们计划移除此限制,并在文档未实现跨源隔离时,将所有渲染时间粗化为 4 毫秒。这似乎足够粗略,可以避免泄露任何有用的跨源图片解码时信息。

还原 responseStart 并引入 firstResponseHeadersStart

启用 103 早期提示后,响应会包含两个时间戳:

  • 当 Early Hints 到达时 (103)
  • 当最终标头到达时(例如 200)

当 Chrome 115 发布 firstInterimResponseStart 以允许衡量这两个时间戳时,我们还将 responseStart(由第一字节时间 (TTFB) 使用)的含义更改为“最终标头”。这导致浏览器和工具出现 Web 兼容性问题,因为它们未针对此常用指标进行类似更改。

Chrome 133 会还原此 responseStart 变更,以解决此兼容性问题,并引入 firstResponseHeadersStart,以便网站能够测量最终标头的时间,同时保留 TTFB 的原始定义。

FileSystemObserver 接口

FileSystemObserver 接口会向网站通知文件系统中的更改。网站会观察用户之前已授予权限的文件和目录在用户本地设备或 Bucket 文件系统(也称为源私有文件系统)中的变化,并收到有关基本变化信息(例如变化类型)的通知。

节能模式下冻结

当节能模式处于有效状态时,如果某个“浏览上下文组”已隐藏且静默超过 5 分钟,并且其中任何同源框架子组的 CPU 使用率超过阈值,Chrome 将冻结该浏览上下文组,除非该浏览上下文组:

  • 提供音频或视频会议功能(通过识别麦克风、摄像头或屏幕/窗口/标签页捕获或具有“打开”RTCDataChannel 或“实时”MediaStreamTrack 的 RTCPeerConnection 来检测)。
  • 控制外部设备(通过 WebUSB、Web 蓝牙、WebHID 或 Web Serial 检测到)。
  • 持有 Web 锁或 IndexedDB 连接,从而阻止版本更新或不同连接上的事务。

冻结是指暂停执行。它在 Page Lifecycle API 中正式定义。

系统将校准 CPU 使用率阈值,以便在启用节能模式时冻结大约 10% 的后台标签页。

多个导入映射

目前,导入映射必须在任何 ES 模块之前加载,并且每个文档只能有一个导入映射。这使得它们变得脆弱,并且在实际应用场景中可能使用缓慢:任何在它们之前加载的模块都会导致整个应用崩溃,而在具有许多模块的应用中,它们会成为一个大型阻塞资源,因为需要先加载所有可能模块的整个映射。

此功能通过以一致且确定的方式合并多个导入映射,实现每个文档支持多个导入映射。

存储访问标头

提供了一种替代方法,供经过身份验证的嵌入内容选择启用未分区的 Cookie。这些标头用于指示未分区的 Cookie 是否(或是否可以)包含在给定的网络请求中,并允许服务器激活已授予的“storage-access”权限。提供激活“storage-access”权限的替代方法,允许非 iframe 资源使用该权限,并可缩短经过身份验证的嵌入内容的延迟时间。

支持通过 Promise<DOMString> 创建 ClipboardItem

ClipboardItem(即异步剪贴板 write() 方法的输入)现在在其构造函数中除了接受 Blob 之外,还接受字符串值。ClipboardItemData 可以是 Blob、字符串或解析为 Blob 或字符串的 Promise。

WebAssembly Memory64

memory64 提案增加了对大小超过 2^32 位的线性 WebAssembly 内存的支持。它不提供任何新指令,而是扩展现有指令,以允许使用 64 位索引来处理记忆和表格。

Web Authentication API:PublicKeyCredential getClientCapabilities() 方法

您可以使用 PublicKeyCredential getClientCapabilities() 方法来确定用户的客户端支持哪些 WebAuthn 功能。该方法会返回一个支持的功能列表,让开发者能够根据客户端的特定功能量身定制身份验证体验和工作流程。

WebGPU:单分量顶点格式(以及 unorm8x4-bgra)

添加了 WebGPU 初始版本中因缺乏支持或旧版 macOS(任何浏览器均不再支持)而未提供的其他顶点格式。借助单分量顶点格式,应用可以仅请求必要的数据,而之前对于 8 位和 16 位数据类型,应用必须请求至少两倍的数据。unorm8x4-bgra 格式可让您在保持相同着色器的同时,更轻松地加载 BGRA 编码的顶点颜色。

Web Cryptography API 的 X25519 算法

“X25519”算法提供了一些工具,用于使用 [RFC7748] 中指定的 X25519 函数执行密钥协商。“X25519”算法标识符可用于 SubtleCrypto 接口,以访问已实现的操作:generateKey、importKey、exportKey、deriveKey 和 deriveBits。

新的源试用

在 Chrome 133 中,您可以选择加入以下新的源试用

选择在节能模式下不冻结应用

此选择停用试用功能可让网站选择停用 Chrome 133 中随附的节能模式冻结行为。

弃用和移除

此版本的 Chrome 引入了以下弃用和移除项。 如需查看计划弃用、当前弃用和之前移除的功能列表,请访问 ChromeStatus.com。

此版本的 Chrome 弃用了一项功能。

弃用 WebGPU maxInterStageShaderComponents 限制

由于多种因素,maxInterStageShaderComponents limit 已被弃用。计划在 Chrome 135 中移除。

  • maxInterStageShaderVariables 的冗余:此限制已达到类似目的,即控制着在着色器阶段之间传递的数据量。
  • 细微的差异:虽然这两个限额的计算方式略有不同,但这些差异很小,可以在 maxInterStageShaderVariables 限额内有效管理。
  • 简化:移除 maxInterStageShaderComponents 可简化着色器接口并降低开发者的复杂性。这样一来,他们就无需管理两个细微差别很大的单独限制,而是可以专注于名称更恰当且更全面的 maxInterStageShaderVariables

此版本的 Chrome 移除了两项功能。

之前,当使用 <link rel=prefetch> 预提取资源时,Chrome 会忽略其缓存语义(即 max-ageno-cache),以便在五分钟内的首次使用时避免重新提取。现在,Chrome 会移除此特殊情况,并使用正常的 HTTP 缓存语义。

这意味着,Web 开发者需要添加适当的缓存标头(Cache-Control 或 Expires),才能从 <link rel=prefetch> 中获益。

这也会影响非标准 <link rel=prerender>

移除通过初始偏好设置首次运行标签页触发的 Chrome 欢迎页面

现在,在 initial_preferences 文件的 first_run_tabs 属性中包含 chrome://welcome 将无效。之所以移除此页面,是因为它与在桌面平台触发的首次运行体验页面重复。