How Firefox's WebRender Uses Your GPU to Draw Web Pages

This article explains how Mozilla Firefox's WebRender engine revolutionizes web page rendering by shifting the drawing workload from the CPU to the GPU. By treating web pages much like 3D video games, WebRender translates standard HTML and CSS elements into specialized GPU instructions called shaders, executing them in massive parallel batches. Below is a straightforward breakdown of how this architecture processes layout data, utilizes graphics hardware, and ultimately delivers a consistently smooth browsing experience.

Shifting from CPU Painting to GPU Rendering

Traditionally, web browsers relied heavily on the Central Processing Unit (CPU) to "paint" elements of a web page into flat layers, only using the Graphics Processing Unit (GPU) at the very end to stitch those layers together. This created a major bottleneck on high-resolution displays and complex websites. WebRender eliminates the CPU painting step entirely. Instead, it sends raw structural descriptions of the page directly to the GPU, allowing the graphics card to draw every pixel directly to the screen for every single frame.

The Display List

The rendering process begins with Firefox’s layout engine, Gecko. Gecko calculates the size and position of all elements on the screen and packages this information into a structure called a Display List. This list does not contain pixels; rather, it contains basic geometric primitives—such as rectangles, borders, box shadows, and text runs—along with rules on how they are stacked. Gecko then hands this Display List over to WebRender.

Frame Building and Culling

Once WebRender receives the Display List, it prepares the data for the GPU in a phase called Frame Building. During this step, WebRender performs "culling," an optimization technique borrowed directly from 3D video game engines. It analyzes the Display List and immediately discards any elements that are outside the user's current view (off-screen) or completely hidden behind other solid elements. This ensures the GPU never wastes time or power drawing pixels the user cannot see.

Custom Shaders for CSS Elements

GPUs are built to render 3D triangles, meaning they do not naturally understand web concepts like CSS gradients, box shadows, or rounded corners. To bridge this gap, WebRender uses a suite of custom-built GPU programs called "shaders." WebRender has specific shaders designed exclusively for drawing text, complex borders, drop shadows, and solid colors. Because GPUs have thousands of cores designed to run shaders in parallel, they can mathematically calculate and draw these complex CSS effects significantly faster than a CPU ever could.

Batching Draw Calls

Even with a powerful GPU, sending drawing instructions one by one creates a communication bottleneck. To maximize efficiency, WebRender groups similar visual elements together in a process called batching. For example, if a web page has fifty different paragraphs of text, WebRender groups all that text into a single "batch" and instructs the GPU to draw all fifty paragraphs at the exact same time using the text shader. By minimizing the number of "draw calls" sent to the hardware, WebRender easily maintains a smooth 60 frames-per-second (or higher) refresh rate.

Caching Text and Images

While geometric shapes and shadows are calculated and redrawn from scratch on every frame, recalculating complex font characters (glyphs) and decoding images every millisecond would overwhelm even a modern GPU. WebRender solves this using a GPU Texture Cache. The first time a specific font character or image is needed, it is prepared and saved directly into the GPU's high-speed memory (VRAM). For all subsequent frames, the GPU simply copies the pre-drawn text or image from its own memory, making scrolling and zooming effortless.