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:
@@ -11,7 +11,6 @@
|
||||
|
||||
import type { CSSProperties } from "react";
|
||||
|
||||
import { LOW_POWER } from "./lowPower";
|
||||
import type { Group } from "./search";
|
||||
import type { UiState } from "./keyboard";
|
||||
|
||||
@@ -35,13 +34,14 @@ export const ROW_SPACING = 25;
|
||||
* container, not per card, so cost stays flat regardless of grid size. */
|
||||
export const ANIMATE_VIEW_TRANSITIONS = true;
|
||||
|
||||
/** Frost the glass panels/cards/rows with a real backdrop blur. `backdrop-filter` is
|
||||
* one of the most GPU-expensive CSS effects in the app - a live backdrop copy+blur
|
||||
* per element, repeated for every album card in the unvirtualized grid - and unlike
|
||||
* the canvas there is no cheaper version of it to fall back to, so `?pi=1` switches
|
||||
* it off outright: a plain translucent background, no blur. This is the one visible
|
||||
* cost of the Pi profile. */
|
||||
export const SHOW_GLASS_BLUR = !LOW_POWER;
|
||||
/** Frost the glass panels/cards/rows with a real backdrop blur.
|
||||
*
|
||||
* The obvious thing to cut on weak hardware, and on the Pi that is exactly wrong: it
|
||||
* measured five times *worse* with the blur off (118% of a core against 25%). The blur
|
||||
* is what promotes each panel to its own compositing layer; without it the animated
|
||||
* canvas and the whole album grid above it share one layer and every canvas frame
|
||||
* repaints all of it. See the table in lib/lowPower.ts before touching this. */
|
||||
export const SHOW_GLASS_BLUR = true;
|
||||
|
||||
/** Render the play view's animated canvas background (gradient + bubbles, both
|
||||
* redrawn every frame at 60fps). Off falls back to `.stage`'s own static CSS
|
||||
@@ -53,10 +53,10 @@ export const SHOW_GLASS_BLUR = !LOW_POWER;
|
||||
export const SHOW_AMBIENCE = true;
|
||||
|
||||
/** Run the purely decorative CSS animation loops: the room page's bubble field and
|
||||
* the dolphin mascot's bob/swim. Individually cheap (opacity/transform only), but
|
||||
* a couple of dozen elements animating forever still means a repaint every frame on
|
||||
* a machine compositing in software, and they carry no information. */
|
||||
export const SHOW_DECORATIVE_ANIMATIONS = !LOW_POWER;
|
||||
* the dolphin mascot's bob/swim. Left on even under `?pi=1`: switching them off on the
|
||||
* Pi moved the idle figure by 0.4 percentage points, which is noise, and they are the
|
||||
* kind of detail this app is for. */
|
||||
export const SHOW_DECORATIVE_ANIMATIONS = true;
|
||||
|
||||
// ------------------------------------------------------------------ colors --
|
||||
|
||||
|
||||
Reference in New Issue
Block a user