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

主要观点总结

本文介绍了Chrome 129版本的更新内容，包括Web API的scheduler.yield()、Intl.DurationFormat、CSS的interpolate-size属性和calc-size()函数，以及CSS锚点定位的变更。文章还提到了抖音前端架构团队的招聘信息和如何加入前端交流群的方式。

关键观点总结

关键观点1: Web API的scheduler.yield()的作用

解决JS执行耗时较长的任务导致浏览器响应用户输入变慢的问题，通过将耗时任务分解为小块来提高响应能力，具有延续性。

关键观点2: Intl.DurationFormat的新特性

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

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

实现更酷炫的动画效果，允许使用内置尺寸关键词，并实现更精细的控制。

关键观点4: CSS锚点定位的变更

包括名称更改（如inset-area更名为position-area）、函数语法的更改等，需要更新已使用的代码。

关键观点5: 其他信息

包括抖音前端架构团队的招聘信息和如何加入前端交流群的方式。

文章预览

大家好，我是 ConardLi 。 最近 Chrome 发布了 129 正式版本，其中包括了几项值得我们关注的更新，今天一起来学习下。 【Web API】scheduler.yield() JS 执行耗时较长的任务会让浏览器响应用户输入的能力变得更慢，使人觉得网站卡顿，并影响 INP 等关键性能指标。 借助最新推出的 scheduler.yield() ，我们可以将耗时较长的任务分解为较小的任务块，通过明确返回主线程来提高响应能力。 scheduler.yield() 在 Chrome 115 版本开始推出试用版，并在当前版本正式推出稳定版本。 开始试用时写过一篇关于 scheduler.yield() 的详细介绍，感兴趣可看： 浏览器也拥有了原生的 “时间切片” 能力！ 直白点讲， scheduler.yield() 的作用就是告诉浏览器： “我即将要做的工作可能需要很长一段时间，如果你需要渲染页面、响应用户输入或有其他更重要多任务，没关系，我可以等 ………………………………