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
@@ -78,6 +78,7 @@ label = "Animation"
|
||||
[build]
|
||||
out = "dist/index.html"
|
||||
budget = 4000
|
||||
# animation = "light" # built pages: "light" (about 10 steps a second), "smooth" or "off"
|
||||
"#;
|
||||
|
||||
pub const NEW_DOC: &str = r#"{
|
||||
|
||||
@@ -83,6 +83,10 @@ pub struct BuildOpts {
|
||||
/// Node budget per view for `isokit check`.
|
||||
#[serde(default = "budget")]
|
||||
pub budget: usize,
|
||||
/// How built pages animate until the viewer picks otherwise: "light"
|
||||
/// (stepped about ten times a second, the default), "smooth" or "off".
|
||||
#[serde(default, skip_serializing_if = "Option::is_none")]
|
||||
pub animation: Option<String>,
|
||||
}
|
||||
|
||||
fn budget() -> usize {
|
||||
@@ -94,6 +98,7 @@ impl Default for BuildOpts {
|
||||
BuildOpts {
|
||||
out: None,
|
||||
budget: budget(),
|
||||
animation: None,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,6 +32,7 @@ pub fn static_page(p: &Project) -> Result<String, ScriptError> {
|
||||
},
|
||||
"views": views,
|
||||
"cfg": p.cfg(None),
|
||||
"animation": p.manifest.build.animation,
|
||||
});
|
||||
let css = format!(
|
||||
"{}\n{}",
|
||||
|
||||
Reference in new issue
Block a user