Web performance: light animation, gestures on a compositor layer, no forced layouts
Deploy web Studio / deploy (push) Successful in 3m46s
Deploy web Studio / deploy (push) Successful in 3m46s
Measured with the new tools/bench_web.py on the web Studio's house demo, CPU slowed 6x:
- Idle: running CSS animations repainted the whole drawing every frame (99% of the main
thread in a window). Animations now step on about ten times a second by default
("light", 5% idle); the new toolbar button switches light / smooth / off and the browser
remembers it; [build] animation sets the default for built pages; view.animation().
Pan and zoom gestures pause them. Status LEDs pause off-screen and with the rest now.
- Pan 28 -> 10 ms, zoom 69 -> 11 ms per step: gestures move the drawing as one compositor
layer (transform) and set the viewBox once they end; --iso-k is set on the tags group
only and only when it changes; the stage box is read once per frame.
- Hover 22 -> 15 ms per move: the tooltip is placed once per frame on its own layer and
measured only when its text changes; the Studio's x/y readout updates ten times a second
in a contained box; hover work in the Studio runs once per frame.
- Long object lists skip layout of rows out of sight (content-visibility).
- WASM built with opt-level 3: engine render 11.7 -> 9.4 ms for 10% more download.
Checks: Studio 102/102 (animation modes, pan as a layer, contained readout), web 87/87.
This commit is contained in:
1 parent
19f4c83ae8
commit
a202283a60
15 files changed
+476
-31
No files matched your search
@@ -61,6 +61,11 @@ input[type=checkbox] { accent-color: var(--accent); }
|
||||
.st-hint { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--accent); border-radius: 16px; padding: 4px 14px; z-index: 5; pointer-events: none; }
|
||||
.st-status { display: flex; align-items: center; gap: 14px; padding: 4px 10px; background: var(--panel); border-top: 1px solid var(--stroke); color: var(--mute); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
|
||||
.st-status select { padding: 1px 4px; }
|
||||
/* the pointer readout changes on every move: a fixed box, so the page around it is not laid out again */
|
||||
#cursor, #stats { display: inline-block; contain: strict; will-change: transform; height: 1.4em; line-height: 1.4em; white-space: nowrap; overflow: hidden; }
|
||||
#cursor { width: 15ch; }
|
||||
#stats { width: 36ch; text-align: right; }
|
||||
.st-status { contain: layout style; }
|
||||
.st-ver { color: var(--mute); font-size: 11px; text-decoration: none; white-space: nowrap; }
|
||||
.st-ver:hover { color: var(--fg); text-decoration: underline; }
|
||||
.st-link { background: none; border: 0; color: var(--danger); padding: 0; text-decoration: underline; }
|
||||
@@ -162,6 +167,8 @@ input[type=checkbox] { accent-color: var(--accent); }
|
||||
/* the selection box (Shift / Ctrl + drag on the map) */
|
||||
.st-band { position: fixed; z-index: 30; pointer-events: none; border: 1px dashed var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
|
||||
#objects { user-select: none; }
|
||||
/* long object lists: rows out of sight are not laid out or painted */
|
||||
#objects li { content-visibility: auto; contain-intrinsic-size: auto 28px; }
|
||||
|
||||
/* previews while placing: footprints, wall planes, where a window lands */
|
||||
.iso-svg .st-ghosts { pointer-events: none; }
|
||||
|
||||
Reference in new issue
Block a user