Chrome 129：正式推出原生的 “时间切片” 能力！

主要观点总结

本文介绍了Chrome 129版本的几个重要更新，包括Web API中的scheduler.yield()的正式推出，Intl.DurationFormat的新的格式化持续时间方法和CSS中的interpolate-size属性和calc-size()函数的使用，以及CSS锚点定位规范的一些更改。文章还提供了相关链接和示例代码。

关键观点总结

关键观点1: Chrome 129的Web API更新

介绍了scheduler.yield()的正式推出，用于解决JS执行耗时任务导致的浏览器响应缓慢问题，并提高了主线程的响应能力。

关键观点2: Intl.DurationFormat的新方法

支持多种语言环境的格式化持续时间方法。

关键观点3: CSS的interpolate-size属性和calc-size()函数

介绍了这两个新特性在CSS动画中的应用，以及如何使用它们实现更丰富的动画效果。

关键观点4: CSS锚点定位规范的更改

详细说明了CSS锚点定位规范在Chrome 129版本中的一些变化，包括属性名称和函数语法的更改，并提供了相应的更新建议。

文章预览

最近 Chrome 发布了 129 正式版本，其中包括了几项值得我们关注的更新，今天一起来学习下。 【Web API】scheduler.yield() JS 执行耗时较长的任务会让浏览器响应用户输入的能力变得更慢，使人觉得网站卡顿，并影响 INP 等关键性能指标。 借助最新推出的 scheduler.yield() ，我们可以将耗时较长的任务分解为较小的任务块，通过明确返回主线程来提高响应能力。 scheduler.yield() 在 Chrome 115 版本开始推出试用版，并在当前版本正式推出稳定版本。 直白点讲， scheduler.yield() 的作用就是告诉浏览器： “我即将要做的工作可能需要很长一段时间，如果你需要渲染页面、响应用户输入或有其他更重要多任务，没关系，我可以等你们做完再继续！” 我们可以模拟一堆需要一定耗时的长任务： // 示例任务函数 async   function   validateForm ( )  {    // 模拟任务延迟    ………………………………