Chrome 129 中的新变化

Pete LePage

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

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

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

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

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

“嗨！I'm about to do the work which may take a while, if you need to paint a frame, respond to user input, or have other important tasks, it's OK, I can wait"

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

请经常在 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。这有助于您记住，这些只是回退到主要位置（由基本样式决定）的选项。

最后，position-try 中移除了 inset-area() 函数语法。因此，请使用 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 发布后，我们会立即为您介绍其中的新功能！