Chrome 129 中的新变化

Pete LePage

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

  • 您可以在长时间运行的任务中让出，以提升性能。
  • 为具有内在尺寸的元素添加动画效果。
  • 锚点定位语法发生了一些变化。
  • 还有许多其他功能。

我是 Pete LePage。我们来深入了解一下 Chrome 129 中面向开发者的新功能。

使用 scheduler.yield() 拆分长任务

耗时较长的任务会延迟浏览器响应用户输入的能力，让人感觉网站速度缓慢，并影响 INP 等关键性能指标。借助 scheduler.yield()，您可以将长任务拆分为更小的部分，通过明确让出主线程来提高响应能力。

借助此属性，您可以告知浏览器：

“嗨！我要完成的工作可能需要一些时间，如果您需要绘制帧、响应用户输入或执行其他重要任务，没关系，我可以等”

一张图片，展示了拆分任务如何促进用户互动。在顶部，长任务会阻止事件处理脚本运行，直到任务完成。在底部，分块任务允许事件处理程序比以往更快地运行。

将下面这行代码经常添加到您的 JavaScript 代码中，为浏览器留出一定的余地，从而避免 INP 问题。

await scheduler.yield();

重要的是，它允许优先执行代码续接，以免因让出执行机会而错失机会。我们建议在任意大型工作块之间的函数中自由使用 scheduler.yield()。

如需了解详情，请参阅优化长时间运行的任务。

具有固有尺寸的动画

CSS 动画非常美观，但它们通常需要明确的大小，您不能使用 auto、min-content 或 fit-content 等固有大小调整关键字。

CSS 属性 interpolate-size 将打开一组新的动画，这些动画在使用固有尺寸调整关键字时无法实现。

如果不使用 interpolate-size，则以下视频中的按钮不会有过渡效果。

添加 interpolate-size: allow-keywords 后，视频中的按钮会获得漂亮的转换动画效果。

在 root 元素上指定 interpolate-size: allow-keywords 会为整个页面设置新行为。只要兼容性不是问题，我们都建议您这样做。

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

为了实现更精细的控制，CSS calc-size() 函数（与 calc() 类似）还支持仅对其中一个受支持的内在尺寸关键字执行操作。执行布局计算时，size 关键字的计算结果为 calc-size-basis 的原始大小。

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

如需了解完整详情，请参阅 CSS 中的“height: auto;”（及其他内在尺寸关键字）动画。

CSS 锚点定位发生的变化

CSS 锚点定位已在 Chrome 125 中推出，但经过与 CSS 工作组进行一些额外的讨论，规范和实现方面有一些变化。如果您已经在使用 CSS 锚点位置，则需要尽快更新您的代码。

首先，inset-area 已重命名为 position-area。这是首选，因为 position- 这个表述有助于您记住此属性应用于定位元素，而不是锚点元素。

其次，position-try-options 已重命名为 position-try-fallbacks。这有助于您记住，这些只是回退到主要位置（由基本样式决定）的选项。

最后，inset-area() 函数语法将从 position-try 中移除。因此，请使用 position-try-fallbacks: top 而不是 position-try-fallbacks: inset-area(top)。

等等！

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

新增了用于设置时长的 Intl 方法，该方法支持多种语言区域。

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

Web GPU 画布现在可以针对 HDR 图片使用显示屏的整个范围。

还有一些弃用和移除操作可能会影响部分开发者。

阅读完整的版本说明。

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 129 中的其他变更，请访问以下链接。

订阅

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

我是 Pete LePage，代替 Adriana 为大家介绍 Chrome 130 中的新功能。Chrome 130 发布后，我们会立即为您介绍其中的新变化！