How Reducing Draw Calls Supercharges Web Rendering Performance

Hello, I am Cangdong from AntV. This presentation discusses improving rendering performance by reducing draw calls, covering optimization scenarios, the meaning of draw calls, their impact on performance, and methods using Canvas2D and WebGL.

In typical graph scenes, thousands of simple 2D shapes—nodes, edges, and text—must be rendered, leading to high draw call counts.

We aim to maintain smooth interactions (e.g., pan, zoom, highlight) even with tens of thousands of elements, targeting fluid frame rates above 60 FPS after optimization.

Draw calls represent the commands sent from CPU to GPU; the browser invokes system‑level rendering APIs (OpenGL, Vulkan, etc.) to draw graphics on the screen.

When using Canvas2D or WebGL, the browser calls low‑level rendering libraries (e.g., Skia) that translate drawing commands into GPU draw calls.

In complex scenes, many draw calls increase CPU preparation time, extending the rendering timeline and reducing frame rates.

Optimizing involves reducing the number of draw calls so the CPU spends less time preparing them, allowing the GPU to render faster and keep the pipeline full.

We propose three draw‑call‑reduction techniques: culling, dirty‑rectangle rendering, and batch rendering.

We measure optimization impact using two metrics: draw call count and CPU intersection tests, aiming to minimize both.

First, culling skips rendering objects outside the viewport by testing bounding‑box intersections, reducing draw calls but adding intersection checks.

Using scene‑graph hierarchy and spatial indexes (e.g., R‑tree) further accelerates culling by grouping nearby objects, decreasing intersection tests.

Second, dirty‑rectangle rendering updates only the changed region (e.g., highlighted nodes), reducing draw calls by limiting redraw to affected objects.

Third, batch rendering merges many identical primitives (e.g., thousands of circles) into a single draw call using WebGL, dramatically cutting draw calls from thousands to one.

Additional techniques include level‑of‑detail (LOD) and GPU‑driven computations (GPGPU) to offload work from the CPU, such as parallelizing transformation matrix calculations in shaders.

These optimizations are integrated into AntV's rendering engine, offering developers practical ways to achieve smoother, high‑performance graph visualizations.