bevyengine / bevyengine/bevy-website
Make live demos in the example webpages click-to-load to limit resource usage
- Dominant language
- JavaScript
- Stars
- 249
- Forks
- 450
- Avg merge
- 16h 20m
- Merged PRs (30d)
- 6
Description
Some of the examples over on https://bevyengine.org/examples/ use quite a lot of system resources when rendering live in the browser. Sometimes I just want to read the text and code on the page, but I can hear my fans start spinning up.
I think it'd be nice if the embedded examples were behind a button action labeled 'click to load live demo', I think this would have several benefits:
- Save on bandwidth as the Wasm binaries are quite large. Especially useful for users with a slow internet connection or expensive data plans.
- Reduce jank when scrolling through the page. I Noticed on mobile Firefox that some examples overwhelm the browser or its process for that page, making rendering of the entire page janky: text doesn't pop in on time after scrolling.
- Preserve battery life on mobile devices and laptops, especially when the tab is open for a longer period of time, like when someone's keeping the example code open next to their editor as a reference.
- Allow keyboard input to browser after page load without having to click out of the embedded example, since they capture the keyboard on load.
On a positive note, it does look like the examples stop running (or rather, run very slowly, like a single frame every so often? some examples have bouncing entities clumping up together when you switch tabs and back again which implies they're still running, just with very very long timesteps) when you switch tabs, so even with many examples open in different tabs, only the visible ones will use resources. I wonder if that's decided by the browser or intentional design for the site, but either way it's quite nice
Contributor guide
Research direction
Start by tracing how the example webpages embed and load their live Wasm demos. Add a button labeled "click to load live demo" so the embedded demo does not load until activated, then verify that the page text and code remain usable before activation and that the demo loads after clicking.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, wasm
- Domain
- frontend, performance, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100