Front‑End Architecture and Performance Optimization for a Large‑Scale Chinese New Year Interactive Activity

This article presents front‑end engineering practices from a recent Chinese New Year interactive activity, covering project architecture, data management, animation rendering, performance optimization, high concurrency handling, fault tolerance, and development workflow.

Background & Challenges

Fast iteration: 2‑week testing, 5‑week release, diverse developer backgrounds.

Complex interactions: >100 animation elements (spine, Lottie, CSS, video) across multiple sub‑games.

High concurrency: peak QPS during live broadcast and promotional periods.

Dynamic degradation: support for >140 device models with tiered downgrade strategies.

Core Architecture

Business layer: wish, upgrade, reward, Spring Festival performance, Alipay Five‑Fortune, mini‑games, sharing, idle.

Abstraction layer: unified data management, animation sequence, configuration, event bus, logging, audio.

Engine layer: interactive components (hd‑base), animation engines (Eva.js, Lottie, CSS, WebGL, Video), engineering capabilities (MT config, CSR snapshot, pre‑fetch), client utilities (zcache, mtop pre‑fetch, uniapi, tlog).

Data Management

Implemented a unified data mechanism to handle multi‑module collaboration, with interface contracts defined by enums:

export enum Phase { WARM_UP='WARM_UP', GAME_PERIOD='GAME_PERIOD', WAIT_AWARD='WAIT_AWARD', AWARD='AWARD', WAIT_OFFLINE='WAIT_OFFLINE', OFFLINE='OFFLINE' }

export enum UserLifecycle { NEW='NEW', IMPORT='IMPORT', GROWTH='GROWTH', GROWTH_MAX='GROWTH_MAX' }

Provides incremental updates and async refresh to reduce main‑API QPS.

Animation Rendering

Technology selection: WebGL for pseudo‑3D scenes, Lottie/AE for complex vector animations, CSS transitions for simple effects, Video/VideoX for video clips.

Supported >100 animations with a dynamic downgrade system (DOM/CSS, static images, FPS reduction).

State machine for lantern animation and an animation queue to ensure ordered execution of heterogeneous animation types.

High Concurrency & QPS Optimization

Incremental data updates and async refresh to lower main‑API load.

Call negotiation and interface review to avoid unnecessary downstream requests.

Component Upgrades

Enhanced share component with custom animations.

Improved popup component with flexible timing and crash‑proof handling.

Resilience Strategies

Dual data fallback (server + CDN) for critical configs.

Interface reuse and graceful degradation for rate‑limited scenarios.

Exception handling with user‑friendly messages.

Performance Optimizations

CSR‑first rendering with ZCache pre‑loading and pre‑fetch of secondary pages.

Bundle size reduction (~75%) via lazy loading and dependency pruning.

Visual stability via snapshot caching, loading placeholders, and container background.

Runtime optimizations: dynamic frame‑rate control per device tier and animation state.

Development Process & R&D Management

Modular division of responsibilities based on team expertise.

Clear code layering and logging standards (business logs, tlog, monitoring).

Pre‑plan and post‑mortem documentation for critical scenarios.

Future Outlook

Standardize animation design specifications and automate quality checks.

Intelligent downgrade strategies driven by performance metrics.

Further encapsulation of reusable front‑end capabilities to boost development efficiency.

Team Introduction

The author belongs to the Taobao User Interaction Front‑End team, responsible for high‑traffic interactive products such as "Gold Town", "Baba Farm", and "Red‑Envelope Sign‑In". The team focuses on large‑scale marketing interactions and welcomes engineers passionate about front‑end technology.