Chrome 129 Brings Native Time‑Slicing, Intl.DurationFormat, and New CSS Features

Web API: scheduler.yield()

Long‑running JavaScript tasks can degrade user‑input responsiveness and hurt metrics such as INP. Chrome 115 shipped an experimental scheduler.yield(), and Chrome 129 makes it stable. The call tells the browser that the current task can be paused, allowing the main thread to handle rendering or higher‑priority work.

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)); }

Using scheduler.yield() in a loop keeps the main thread responsive:

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();
  }
}

The main advantage is continuity : after a yield pause, remaining tasks resume in order, preventing third‑party scripts from reordering execution. When scheduler.yield() is unavailable, scheduler.postTask() with priority: 'user-blocking' offers similar continuity. By contrast, setTimeout() or scheduler.postTask() without a high priority (or with priority: 'user-visible') queues tasks at the end, losing continuity.

Web API: Intl.DurationFormat

The Intl object now includes DurationFormat, enabling locale‑aware duration formatting. Example:

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 and calc-size()

Traditional CSS animations require explicit dimensions; keywords like auto, min-content, or fit-content could not be animated. The new interpolate-size property (e.g., interpolate-size: allow-keywords) enables smooth transitions when such keywords are used.

Applying the property on :root makes the behavior global:

:root { interpolate-size: allow-keywords; }
.item { height: auto; @starting-style { height: 0; } }

The new calc-size() function works like calc() but operates on intrinsic size keywords, using calc-size-basis to evaluate the original size during layout.

nav a {
  width: 17px;
  overflow-x: clip;
  transition: width 0.17s ease;
  &:hover { width: calc-size(auto, size); }
}

CSS: Anchor Positioning Changes

Chrome 125 implemented anchor positioning, and the CSS Working Group has refined the spec: inset-area is renamed to position-area to clarify its role in positioning elements. position-try-options becomes position-try-fallbacks, emphasizing that these are alternative fallback positions.

The function syntax inset-area() is removed; use position-try-fallbacks: top instead of position-try-fallbacks: inset-area(top).

Details: https://developer.chrome.com/blog/anchor-syntax-changes

References

https://developer.chrome.com/release-notes/129

https://developer.chrome.com/blog/anchor-syntax-changes