demo · v146

Tier policy router

A real product needs a routing table, not just a tier number. This demo encodes a policy table that maps navigator.cpuPerformance levels onto product-level feature flags — what gets compiled in, what gets pre-loaded, what gets server-rendered. Drag the tier and watch a JSON config recompute live.

Behind a flag: navigator.cpuPerformance ships behind chrome://flags/#enable-experimental-web-platform-features in Chrome 146. The fallback path runs a coarse synthetic benchmark plus hardwareConcurrency and deviceMemory heuristics.

Read the tier once at boot, run the policy, dispatch features. Re-reading on every frame is anti-pattern — the value is stable across the page lifetime.

Pretend my device is…

Detected

cpuPerformance tier:
high
hardwareConcurrency:
—
deviceMemory:
—
sieve bench (ms):
—
final tier (after blend):
high

Policy routing

Effective config dispatched to the rest of the app


    

  


  
The policy table that drives the demo

  
const POLICY = [
  { feature: "animationStyle",      low: "css-only",   mid: "css+canvas",     high: "webgl"          },
  { feature: "imagePipeline",       low: "thumb-only", mid: "thumb-then-hi",  high: "hi-res-direct"  },
  { feature: "ml.tokenizerWorker",  low: "off",        mid: "lazy",           high: "preload"        },
  { feature: "physicsEngine",       low: "rigid-2d",   mid: "rigid-3d",       high: "soft-body-3d"   },
  { feature: "particleBudget",      low: 200,          mid: 2000,             high: 20000            },
  { feature: "shadowQuality",       low: "off",        mid: "low",            high: "high"           },
  { feature: "audioReverb",         low: "off",        mid: "mono-ir",        high: "stereo-ir"      },
  { feature: "telemetry.flushMs",   low: 30000,        mid: 10000,            high: 5000             },
];
const config = Object.fromEntries(
  POLICY.map(({ feature, ...row }) => [feature, row[tier]])
);


  

    
see also