Chrome 发布了 129 正式版本，其中包括了几项值得我们关注的更新，今天一起来学习下。
【Web API】scheduler.yield()
JS 执行耗时较长的任务会让浏览器响应用户输入的能力变得更慢，使人觉得网站卡顿，并影响
INP
等关键性能指标。
借助最新推出的
scheduler.yield()
，我们可以将耗时较长的任务分解为较小的任务块，通过明确返回主线程来提高响应能力。
scheduler.yield()
在
Chrome 115
版本开始推出试用版，并在当前版本正式推出稳定版本。
直白点讲，
scheduler.yield()
的作用就是告诉浏览器：
“我即将要做的工作可能需要很长一段时间，如果你需要渲染页面、响应用户输入或有其他更重要多任务，没关系，我可以等你们做完再继续！”
我们可以模拟一堆需要一定耗时的长任务：
// 示例任务函数
async function validateForm() {
// 模拟任务延迟
return new Promise(resolve => setTimeout(resolve, 500));
}
async function showSpinner() {
return new Promise(resolve => setTimeout(resolve, 500));
}
async function saveToDatabase() {
return new Promise(resolve => setTimeout(resolve, 500));
}
async function updateUI() {
return new Promise(resolve => setTimeout(resolve, 500));
}
async function sendAnalytics() {
return new Promise(resolve => setTimeout(resolve, 500));
}
然后使用
scheduler.yield()
来保持主线程的响应性：
async function saveSettings() {
// 创建任务数组
const tasks = [
validateForm,
showSpinner,
saveToDatabase,
updateUI,
sendAnalytics
];
// 循环执行任务
while (tasks.length > 0) {
// 从任务数组中移除第一个任务
const task = tasks.shift();
// 运行当前任务
await task();
// 记录任务执行
console.log(`${task.name} 已运行`);
// 调用调度器的让出机制以保持主线程的响应性
await scheduler.yield();
}
}
scheduler.yield()
的主要优势是
延续性
，这意味着在一组任务中如果你使用
yield
暂停执行，其他已安排的任务将在
yield
点后继续按顺序执行。这可以避免第三方脚本的代码打乱你代码执行的顺序。
如果我们使用
scheduler.postTask()
且设定
priority: 'user-blocking'
也具有比较好的延续性，因为这种高优先级会让任务尽快执行，减少中断。这种方法可以作为当
scheduler.yield()
不可用时的替代方案。
使用
setTimeout()
（或
scheduler.postTask()
且没有设定优先级或者设定为
priority: 'user-visible'
）会把任务安排到队列的尾部，让其他挂起的任务先运行，这样就不保证任务执行的延续性。
【Web API】Intl.DurationFormat
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"
【CSS】interpolate-size 属性和 calc-size() 函数
CSS 可以实现很多非常酷炫的动画，但我们通常需要明确的指定尺寸，无法使用诸如
auto
、
min-content
或
fit-content
等内置的尺寸关键词。
interpolate-size
CSS 属性可以让我们实现一种新的动画效果，当使用内置的尺寸关键词时，之前是无法实现的。
没有
interpolate-size
时，下面视频中的按钮没有过渡效果。
添加了
interpolate-size: allow-keywords
后，下面视频中的按钮可以拥有丝滑的过渡动画效果。
如果我们在
Root
元素上指定
interpolate-size: allow-keywords
会为整个页面都设置这种新行为。
:root {
interpolate-size: allow-keywords;
}
.item {
height: auto;
@starting-style {
height: 0;
}
}
为了更精细的控制，类似于
calc()
的 CSS
calc-size()
函数也支持对一个内在尺寸关键词进行操作。在执行布局计算时，尺寸关键词会根据
calc-size-basis
评估为原始尺寸。
nav a {
width: 17px;
overflow-x: clip;
transition: width 0.17s ease;
&:hover {
width: calc-size(auto, size);
}
}
【CSS】锚点定位的变更
