v146 · Capabilities · Performance

Adaptive Resource Loader

At startup, read the CPU tier and decide which resources to load eagerly, which to defer, and which to skip entirely. Low-tier devices get a leaner bundle — no ML models, no 3D libraries, no heavy WebGL shaders — while high-tier devices get everything up front.

Feature detection: checking…
Simulate tier:

Resource manifest × tier

Blue=eager · Amber=deferred · Grey=skipped. Click a tier to update.

ResourceCategorySizeLow tierMid tierHigh tier

Simulated load sequence

Load order — — device

Summary

Eager bytes
—
Deferred bytes
—
Skipped bytes
—
vs high tier
—
// Read the CPU Performance API once at startup — no polling
async function detectTier() {
  const rawTier =
    typeof navigator.cpuPerformance === 'number'
      ? navigator.cpuPerformance
      : typeof navigator.cpu?.performance === 'function'
      ? await navigator.cpu.performance()
      : 0;

  const normalized = normalizeCpuTier(rawTier);
  return normalized === 'unknown' ? heuristicTier() : normalized;
}

const tier = await detectTier();

// Load resources according to tier
const config = RESOURCE_MANIFEST.filter(r => {
  if (r.minTier === 'high' && tier !== 'high') return false;
  if (r.minTier === 'mid'  && tier === 'low')  return false;
  return true;
});

// Eager: load now
const eager   = config.filter(r => r.strategy[tier] === 'eager');
// Deferred: import() when needed (lazy)
const deferred = config.filter(r => r.strategy[tier] === 'lazy');
// Skipped: never loaded on this tier

await Promise.all(eager.map(r => import(r.module)));
// Deferred modules loaded on demand:
//   const mlModule = await import(deferred.find(r => r.name === 'ml-model').module);

see also