Chrome RenderingNG: Overview of the Next‑Generation Rendering Architecture

Recently, Chris Harrelson (head of the Blink rendering engine) introduced Chrome's next‑generation rendering architecture, RenderingNG , on the official Chrome blog.

In 2021, the design, construction, and delivery of RenderingNG will be completed, representing a true next‑generation rendering architecture that far surpasses its predecessor. Developed over at least eight years, it brings unlimited potential for fast, smooth, reliable, responsive, and interactive web experiences, setting a new baseline for all web rendering engines.

Core Features

Cross‑platform core functionality across devices and operating systems.

Predictable and reliable performance.

Maximum utilization of hardware capabilities (CPU, GPU, screen resolution, refresh rate, low‑level rasterization APIs).

Only work required to display visible content is performed.

Built‑in support for common visual design, animation, and interaction patterns.

APIs that let developers easily manage rendering overhead.

Extension points in the rendering pipeline for developer plugins.

Additional optimizations for HTML, CSS, 2D Canvas, 3D Canvas, images, video, and fonts.

Gecko and WebKit have already implemented many of the architectural features described in the blog, some even before Chromium .

This is great! While any single browser becoming faster and more reliable is worth celebrating, the ultimate goal is to raise the baseline for all browsers so developers can rely on it—something no previous rendering engine has achieved.

Philosophy

The philosophy of RenderingNG is to first achieve reliability, then scalable performance, and finally scalability.

Stability

Providing a rock‑solid platform is a prerequisite for rich, complex user experiences. All core functions and foundations must work correctly and remain stable over long periods, with well‑combined features and no strange edge‑case bugs.

Therefore, stability is the most important aspect of RenderingNG .

To illustrate its importance, the Chromium team spent most of the past eight years addressing it: learning from bug reports, fixing weaknesses, conducting extensive testing, understanding site performance needs, and designing key patterns and data structures.

Testing and Metrics

Over the past eight years, the Chromium team added tens of thousands of unit, performance, and integration tests, and built comprehensive metrics to evaluate rendering in local tests, benchmark suites, and real‑world sites with real users and devices.

Regardless of how excellent RenderingNG (or any other browser engine) becomes, large discrepancies between browsers make web development difficult. To mitigate this, the team maximized the use of Web Platform Tests, each verifying behavior that all browsers should support.

Scalable Performance

Achieving outstanding speed, memory usage, and power efficiency is the next most important goal for RenderingNG . The engine aims for smooth, responsive interactions on all sites without sacrificing device stability.

But RenderingNG seeks not just performance, but scalable performance—a design that runs reliably on both low‑end and high‑end machines across operating systems.

This is called upward scaling—leveraging all hardware capabilities—and downward scaling—maximizing efficiency and reducing system demands when needed.

To achieve this, RenderingNG maximizes the use of caches, performance isolation, and GPU hardware acceleration.

Caching

In dynamic, interactive UI platforms like the web, caching is the single most important way to boost performance. Beyond the well‑known HTTP cache, rendering uses many caches, especially GPU texture and display‑list caches that enable fast scrolling, lower battery consumption, and good performance across devices.

Caches improve battery life and animation frame rates, and more importantly they decouple rendering from the main thread.

Performance Isolation

Modern computers use preemptive multitasking, which isolates tasks so they don’t slow each other down. On the web, the best example of performance isolation is scrolling: even on pages with heavy JavaScript , scrolling remains smooth because it runs on a separate thread, independent of the JavaScript and rendering threads.

RenderingNG ensures every possible scroll is threaded, using caches and extending beyond display lists to more complex cases. Examples include code for fixed and sticky positioned elements, passive event listeners, and high‑quality text rendering.

GPU Acceleration

GPU dramatically speeds up pixel generation and drawing to the screen—many pixels can be rendered in parallel, greatly increasing speed.

A key component of RenderingNG is GPU raster and draw‑anywhere. It uses the GPU on all platforms and devices to accelerate rendering and animation of web content, which is crucial for both low‑end and high‑end devices where the GPU often outperforms other components.

Scalability

RenderingNG combines strong stability and scalable performance with developer‑friendly features that help extend built‑in parts of HTML , CSS , and Canvas without sacrificing performance or stability.

This includes advanced APIs exposed to JavaScript for responsive design, progressive rendering, smoothness, responsiveness, and threaded rendering.

content-visibility : Allows sites to easily skip rendering off‑screen content and provides view‑cache rendering for single‑page applications.

OffscreenCanvas : Enables canvas rendering (2D Canvas API and WebGL) on its own thread, greatly improving performance. It is also the first Web API that allows JavaScript (or WebAssembly ) to render a single document from multiple threads.

Container queries : A new responsive layout architecture.

Origin isolation : Allows sites to choose stronger performance isolation between iframes.

Off‑main‑thread paint worklets : Provides developers a way to extend element painting by running code on the compositor thread.

Beyond explicit Web API s, RenderingNG provides several important automatic features that are enabled by default for all sites:

Site isolation: Places cross‑origin iframes in separate CPU processes for better security and performance isolation.

Vulkan, D3D12, and Metal: Low‑level APIs that use the GPU more efficiently than OpenGL.

More compositing animations: SVG, background colors.

Reference: https://developer.chrome.com/blog/renderingng