What Chrome 87 Brings: Major Performance Boosts and New Web APIs

On November 17, 2020 Chrome 87 (M87) was released, described by Chrome product director Matt Waddell as the biggest performance improvement in years.

Tag throttling

Chrome limits background tab work by throttling JavaScript timers: tasks with nesting depth less than 5 run once per second, deeper tasks run once per minute, reducing CPU usage to one‑fifth and extending laptop battery life by up to 1.25 hours without affecting music playback or notifications.

Occlusion tracking

The new feature detects truly visible windows and tabs, ignoring minimized or occluded ones, allowing Chrome to speed up startup by 25 % and page loads by 7 % while lowering memory usage.

Forward/Back cache

Chrome on Android now supports the Back‑Forward Cache (bfcache), caching pages for forward and back navigation, currently covering about 20 % of cases with a goal to reach 50 %.

WebAuthn debugging

Since Chrome 87 developers can simulate and debug WebAuthn in DevTools via the new panel: More options → More tools → WebAuthn.

Camera PTZ

Chrome 87 allows control of pan, tilt, and zoom on cameras that support these constraints after user permission, enabling richer video experiences.

Feature detection example:

const supports = navigator.mediaDevices.getSupportedConstraints();
if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

Adjust PTZ parameters via videoTrack.applyConstraints():

function enablePan(capabilities, settings) {
  const input = document.getElementById('rangePan');
  input.min = capabilities.pan.min;
  input.max = capabilities.pan.max;
  input.step = capabilities.pan.step;
  input.value = settings.pan;
  input.addEventListener('input', async () => {
    const opts = { advanced: [{ pan: input.value }] };
    await videoTrack.applyConstraints(opts);
  });
}

Range requests and Service Worker

HTTP Range Requests allow servers to send partial responses, useful for large media files. Starting with Chrome 87, range requests can be made inside a Service Worker and the HTTP headers are transparently forwarded.

New trial features

Font access API

Chrome 87 introduces a trial Font Access API that lets sites enumerate locally installed fonts. Example usage:

// Query for all available fonts and log metadata.
const fonts = navigator.fonts.query();
try {
  for await (const metadata of fonts) {
    console.log(`${metadata.family} (${metadata.fullName})`);
  }
} catch (err) {
  console.error(err);
}

Developers can also retrieve the raw font data:

const fonts = navigator.fonts.query();
try {
  for await (const metadata of fonts) {
    const sfnt = await metadata.blob();
    makeMagic(metadata.family, sfnt);
  }
} catch (err) {
  console.error(err);
}

Deprecated & removed features

iframe allow attribute commas

Previously the allow attribute on iframe could use commas as separators; Chrome 87 deprecates this in favor of semicolons.

-webkit-font-size-delta

Blink no longer supports the -webkit-font-size-delta property; developers should use the standard font-size property instead.

Reference 1

Reference 2

https://blog.chromium.org/2020/10/chrome-87-beta-webauthn-in-devtools.html

https://blog.chromium.org/2020/11/tab-throttling-and-more-performance.html

https://developers.google.com/web/updates/2020/11/nic87