How to Render and Select Seats for 100k‑Scale Venues: Front‑End Strategies

I am Peng Su from Alibaba's Entertainment Business Group, now working on front‑end development at Damai. I will share the technology behind drawing and selecting seats for venues with up to 100,000 seats.

Background

Large venues such as the Bird’s Nest stadium have over 80,000 fixed seats and can reach 110,000 temporary seats. In 2019, nearly 50 million visitors attended events across more than 5,000 venues, generating a market of over 20 billion CNY. Damai has provided ticketing services for major events like the 2019 Basketball World Cup and the 2022 Asian Games.

Drawing Seats (10 万绘座)

The drawing editor is a core tool that must be fast and accurate. Three typical challenges are:

Whether the editor can reuse component‑based approaches used for other pages.

Canvas erasing and re‑drawing cause flicker and performance issues.

Handling irregular, curved sections such as the Bird’s Nest’s elliptical stands.

We split the venue into multiple focus stands; each stand is edited while other stands are shown as Canvas snapshots.

Because a single stand rarely exceeds 3,500 seats, we solve the “100 k” problem by processing each stand separately and using Canvas snapshots for the overall view.

Batch Operations

Initially, moving a batch of seats required erasing each seat and redrawing it, leading to low FPS when handling thousands of seats. We introduced a “temp‑canvas‑layer” so that a batch move triggers only a single Canvas redraw.

For deformation, each seat’s slope ratio is calculated and moved along a Bézier curve, enabling smooth rotation and scaling of irregular blocks.

Selecting Seats (10 万选座)

Selection requires handling both static seat geometry and dynamic ticket attributes. To reduce payload, we split data into static seat info and dynamic attribute tags, caching the former locally.

We switched from JSON to Google Protocol Buffers, achieving a 27 % size reduction and a 47 % faster deserialization after compression.

A DataProxy layer decouples business data from the view, making the system agnostic to frameworks like React or Vue.

Performance Optimizations

Key improvements include:

Optimizing low‑level component instantiation.

Using Service Workers to parallelize data loading for surrounding stands.

Caching loaded regions to avoid repeated rendering.

These changes reduced the total interaction time by 70 %, achieving 3–4 seconds from initial load to full navigation.

We also partitioned the Canvas into grid blocks to limit the canvas size and improve GPU utilization.

Future Outlook

We plan to integrate intelligent features, VR/AR previews, WebGL‑based 3D visualizations, and WebAssembly for performance‑critical modules. Although the project is not open‑source, we continue to evolve the version control, plugin ecosystem, and cross‑platform capabilities to support the entertainment industry’s digital transformation.