· EN

How to Build a High-Performance Mini-Game Container — The Evolution & Tech Behind Helio

This is an immersive long-form essay — best read in its dedicated layout → Open the full version

Helio is a mini-game container running across a suite of music apps. One year, from kickoff in 2023 to surpassing WebView in 2024 — this is the engineering retrospective in full, with 44 hand-built visualizations, 5 real-world case studies, and ~14K words.

Three main threads

  • Load optimization: first paint 31s → 5s (−83.8%). The full path through subpackages, streaming, three-tier caching, and call tuning.
  • Render optimization: from 6.8× behind WebView to 4.8× ahead. GFX lowered into C++ cut same-frame GL commands from 500 to 37.
  • Business engineering: a full-chain debug system (5 layers of breakpoint traversal), build templates, attribution case studies — pushing crash rate to 0.0015%.

Key numbers

MetricImprovement
First paint↓ 83.8% (31s → 5s)
Big Jank4.8× smoother than WebView
GL commands/frame500 → 37
Crash rate0.0015% (≈ 1 per 67,000)
Conversion+4% · D1 retention +3%

Why a dedicated immersive page?

44 visualizations (SVG / CSS / procedural scatter) need a full-page layout to breathe. Two-level collapsible TOC, bilingual switch, scroll progress, inline data highlights — all rely on a standalone page.

Open the immersive version

Comments

0 comments