Technical Practice of Baidu Live‑Streaming Interactive Framework: Performance and Stability Optimization

In Baidu’s live‑streaming “song‑session” activities, a novel "music + red‑packet" interaction model was built by deeply integrating red‑packet engagement with high‑quality content. The framework upgrades and systematic optimizations significantly improved concurrent capacity, real‑time interaction latency, and user satisfaction, while producing reusable technical solutions for future large‑scale live events.

Objectives : Enhance live‑stream content quality and user stickiness by diversifying content, expanding influence through activity‑driven viral growth, and establishing a robust interactive experience framework that supports a "music + red‑packet" mixed mode.

Key Improvement Areas :

General foundation – component reuse, large‑image compression, page‑exception, performance, white‑screen monitoring, BFF service orchestration and stability monitoring.

Access guarantee – multi‑domain disaster recovery, strong caching for static assets (fonts, images, CSS, JS) with multi‑level CDN.

Red‑packet performance – page pre‑static generation, data pre‑loading, document pre‑fetch, resource pre‑fetch, view pre‑rendering, animation downgrade.

Development experience – one‑stop front‑end development, standardized workflow, high‑efficiency R&D environment.

Page Division & Volume Reduction : The team split the product into more than 10 MPA pages, 20+ SPA pages, 19+ component states, and 30+ standardized capabilities, reducing bundle size and improving cross‑page resource caching.

Performance Optimizations :

Page Pre‑Static Generation (SSG) : Static content such as activity rules and main page layout is generated at build time, while CSR handles dynamic parts.

Server‑Side Rendering (SSR) : Critical pages like the program list are rendered on the server for fast first‑paint, then enhanced with client‑side JavaScript.

Incremental Static Regeneration (ISR) : Real‑time red‑packet status updates are delivered without full page reload, supporting task progress, round switching, and social sharing.

Data Prefetch : Configuration, skin assets, and progress data are prefetched by the native layer and cached, eliminating wait time when the user triggers a red‑packet.

Standard Large Page Prefetch (Prefetch HTML) : Frequently used HTML documents are downloaded in advance, reducing first‑click latency from seconds to sub‑second.

Resource Prefetch : Animation files and high‑resolution images are cached before the activity starts, cutting resource loading time by ~46.7% on Android and ~86.1% on iOS.

View Prerender (Prerender WebView) : The red‑packet page is rendered in a hidden WebView ahead of user interaction, enabling instant display upon click.

Stability Measures :

One‑handshake health check – JavaScript notifies the native side when H5 takes over, preventing premature WebView destruction.

Dual fallback – native fallback page for HTML request failures and H5 fallback page for component or API errors.

Animation downgrade – high‑end devices see full Lottie/AFX animations, while low‑end devices receive simplified CSS or static images to avoid jank.

Component Responsiveness : Components adapt to five runtime states – SSG (build‑time static), SSR (server‑side), ISR (client‑side), visibility‑based rendering, and dynamic animation level based on device performance.

Results : After optimization, Android first‑screen load dropped from ~3 s to 0.5 s, iOS from ~2.5 s to 0.5 s. Resource loading times improved dramatically, and the overall interactive experience became smoother and more reliable, providing a reusable framework for future live‑stream activities.