How Kola2d’s WebGL Engine Achieves 50+ FPS for Million‑Cell Spreadsheets

Background

Docs online spreadsheet is a collaborative office product used internally at Kuaishou, facing extremely high performance demands due to real‑time multi‑user collaboration, massive data volumes, and rich Excel‑like features such as formulas, charts, and permission management.

Why WebGL?

Canvas2D quickly reaches its performance ceiling when rendering large data sets. WebGL, built on OpenGL ES, leverages GPU hardware acceleration and parallel processing, allowing far higher frame rates. Benchmarks show WebGL delivering 60 FPS for both 100 k and 1 M cells, while Canvas2D drops to 10 FPS or freezes.

Kola2d Architecture

The system is divided into a business layer and a rendering layer. The business layer converts raw table data into a "display object tree" composed of view, decoration, and plugin nodes. The rendering layer (Kola2d) consumes this tree and renders it with WebGL.

Business layer produces a display object tree.

Rendering layer handles only rasterization; layout and text measurement remain in the business layer.

Display Object Tree

The tree is organized as a Grid, which contains a view layer and a decoration layer. Each layer can host multiple views or decorations, and each view/decoration can embed multiple plugins. Content is either built‑in (generated from the view model) or injected via plugins.

Rendering Pipeline

Kola2d renders only the cells inside the viewport. Cells outside the viewport are either omitted or rasterized lazily when they become visible. A resource manager tracks GPU memory for each fragment (tile) and releases low‑priority resources based on distance from the viewport.

Raster Management

Fragments are rasterized into bitmap tiles, stored in a resource manager, and composed into draw quads that are submitted to the GPU. The manager prioritizes resources near the viewport and cleans up unused tiles each animation frame.

Additional Optimizations

Object reuse via a recycle pool to avoid costly creation and destruction of cells.

Object merging to reduce the size of the display tree when multiple objects share the same style.

Precise dirty‑region tracking to limit layout work to only the parts that actually changed.

Asynchronous fragment processing splits layout work into rows and runs it during idle time, reducing frame stalls during scrolling.

Text layout cache (FormattedText) stores measurement results and reuses them for identical styles, dramatically cutting text‑measurement time.

Token‑based text measurement and pre‑tokenization cache word widths, especially effective for long Chinese strings where single characters are monospaced.

Results

With these techniques, Kola2d consistently renders tables at over 50 FPS even when displaying a million cells, while keeping CPU work under 10 ms per frame and supporting smooth multi‑user collaboration.