Measure the Pi profile on the Pi, and keep only what helped
The first cut of ?pi=1 switched off the two things that look most expensive - the backdrop-filter glass blur and the decorative CSS animation loops - and made the device slower, not faster: 53.5% of a core idle became 118%. Measured on musicdolphin, sum of the Firefox process tree, idle on the browse screen, 15s average: full app 53.5% + ambient canvas at half resolution 25.0% <- the whole win + 30fps cap on top of that 25.0% (no idle change) + decorative CSS animation loops off 24.6% (noise; left on) + backdrop-filter glass blur off 118.1% <- 5x worse The blur is what promotes each glass panel to its own compositing layer. Without it the animated canvas and the whole album grid above it collapse into one layer and every canvas frame repaints all of it. The most expensive-looking CSS in the app is what was keeping the rest of it cheap. SHOW_GLASS_BLUR and SHOW_DECORATIVE_ANIMATIONS therefore go back to unconditionally on, in both the music app and the typing game, with the numbers written down next to them so the next person does not repeat this. What is left is one real change - paint a quarter of the pixels - plus three caps that only bite while something is playing and so are not in the table above: 30fps on the canvas, 60 bubbles alive at once, and ten progress-bar re-renders a second. Those three are unmeasured; measuring them means playing audio. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -4,24 +4,21 @@
|
||||
* through components. The hue lives in styles/app.css because CSS is where it is used;
|
||||
* it is repeated here only for the canvas, which cannot read a custom property. */
|
||||
|
||||
import { LOW_POWER } from "../lowPower";
|
||||
|
||||
/** The turquoise lagoon. Music is 210, Hörbücher 55, "Mein Zimmer" 300. */
|
||||
export const HUE = 175;
|
||||
|
||||
/** Frost the glass panels with a real backdrop blur. Expensive on weak GPUs, and the
|
||||
* on-screen keyboard frosts every single key - off under `?pi=1`, like the music app's
|
||||
* matching toggle. */
|
||||
export const SHOW_GLASS_BLUR = !LOW_POWER;
|
||||
/** Frost the glass panels with a real backdrop blur. Looks like the first thing to cut
|
||||
* on a weak GPU; on the Pi it measured five times worse with it off, because the blur is
|
||||
* what gives each panel its own compositing layer. Same finding as the music app's
|
||||
* matching toggle - see the table in ../lowPower.ts. */
|
||||
export const SHOW_GLASS_BLUR = true;
|
||||
|
||||
/** The decorative rising bubbles behind everything. A dozen elements animating forever,
|
||||
* carrying no information, so `?pi=1` drops them. */
|
||||
export const SHOW_BUBBLES = !LOW_POWER;
|
||||
/** The decorative rising bubbles behind everything. A dozen elements on a CSS transform
|
||||
* loop; measured as noise on the Pi, so they stay. */
|
||||
export const SHOW_BUBBLES = true;
|
||||
|
||||
/** The earned pets swimming behind every screen. The reward that is always in view - off
|
||||
* only to rule it out when chasing a performance problem. Kept on even under `?pi=1`: a
|
||||
* handful of images moved by writing `transform`, and taking away what she earned to save
|
||||
* a few frames is the wrong trade. */
|
||||
* only to rule it out when chasing a performance problem. */
|
||||
export const SHOW_AQUARIUM_CREATURES = true;
|
||||
|
||||
/** Fade screens in on entry. */
|
||||
|
||||
Reference in New Issue
Block a user