How Alipay Boosted Mini‑Game Performance with Multithreading and Rendering Optimizations
This article explains how Alipay’s mini‑games platform was optimized through multithreading, independent audio and rendering threads, file‑system and text‑rendering improvements, and an iOS high‑performance mode, resulting in dramatically higher frame rates and lower latency across a range of games.
Introduction
Every Chinese New Year, Alipay’s "collect‑fortune" event becomes a nationwide online carnival, and mini‑games have been a core interactive component for two consecutive years. This article dives into the technical optimizations behind those games.
How Mini‑Games Run on Alipay
Developers integrate game logic, engine code, and Alipay‑specific adaptation into a single game engine, export the bundle, and compile it with the Mini‑Program IDE to produce an Alipay‑compatible app package. After publishing on the Open Platform, the unified container downloads the package, initializes the rendering engine, processes RAF and rendering tasks, and responds to user input.
The execution model combines JSC/V8, native rendering, and container‑provided capabilities, allowing mini‑games to run lightweight and quickly.
Optimization Overview
To improve runtime experience, six key areas were targeted: multithreading, independent audio thread, file‑system optimization, text‑rendering optimization, independent rendering thread, and a high‑performance mode (JIT) for iOS.
Multithreading
Problem: The single‑threaded model requires each frame to finish within 16 ms (60 fps). Complex JavaScript calculations often exceed the 10 ms budget, causing frame drops.
Solution: Offload heavy JavaScript tasks to Web Workers, allowing parallel execution while keeping the main thread free for rendering.
Result: Using Cannon.js to simulate 200 falling objects on an iPhone 12, frame rates improved from 5 fps to 55 fps when physics calculations were moved to a worker.
Independent Audio Thread
Problem: Games may trigger 1–20+ simultaneous sound effects, leading to audio‑related stalls and frame drops when audio processing shares the main thread.
Solution: Decouple audio from rendering by introducing a proxy audio player and replacing the platform’s default AudioPlayer with OpenAL, adding resource sharing, streaming, and dynamic task dropping.
Result: Audio latency was reduced to under 30 ms, and FPS for a roguelike game increased noticeably after the audio thread separation.
File‑System Optimization
Problem: Mini‑games perform over 100 file operations per second during loading, far exceeding typical Mini‑Program usage and causing high API scheduling overhead.
Solution: Implement a recycle‑bin, file staging area, and in‑memory size caching; parallelize lock‑free file writes/deletes; enforce a main‑document thread lock for consistency; and move critical I/O to memory‑based handling via plugins.
Result: Benchmarks showed up to 19× speed‑up for setStorageSync, 3.8× for readFileSync, and similar gains for writeFileSync, copyFileSync, and large‑file appends.
Text‑Rendering Optimization
Problem: Custom text rendering dominates UI frame cost, especially during chat or scene switches, due to expensive font matching and high‑frequency draw calls.
Solution: Introduce a two‑level cache for characters and font styles, and split text rendering into batches based on font usage.
Result: MeasureText became 26× faster, fillText/strokeText 40× faster, and overall font rendering improved by 1.6× in test cases.
Independent Rendering Thread
Problem: Heavy graphics API calls can block the main thread, causing missed frames and visible stutter.
Solution: Move Render tasks to a dedicated rendering thread using a producer‑consumer queue; employ double‑queue swapping each frame and resource‑proxy objects to avoid blocking on API return values.
Result: Enabling the independent rendering thread raised average frame rates by over 20 % in the Aquarium demo.
iOS High‑Performance Mode
Problem: On iOS, JavaScriptCore cannot use JIT, making logic execution 2–5× slower than browsers, leading to overheating and stutter.
Solution: Replace JavaScriptCore with WKWebView (the “high‑performance mode”) and further optimize the communication protocol by using binary serialization, command batching, and async‑ified calls.
Result: Over 90 % of top mini‑games now use this mode, reducing load time from 8 s to 5 s, decreasing stall rate from 4.9 % to 0.5 %, and cutting 5‑minute power consumption by 27.8 %.
Conclusion
In the past year, Alipay’s mini‑game host has been optimized across high‑frequency I/O, execution environment, and rendering compatibility, delivering substantial performance gains and a smoother user experience while expanding the ecosystem’s commercial potential.
Alipay Experience Technology
Exploring ultimate user experience and best engineering practices
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.
