RenderingNG This blog mail is the first in a series, where we ‘ll explain what we built, why we built it, and how it works. In this beginning post, I ‘ll start with :
Reading: RenderingNG – Chrome Developers
- Our north star goal.
- The pyramid of success: principles that guide our work, and examples of those principles in practice.
- The features and capabilities that RenderingNG makes possible.
- A high-level overview of the major project components of RenderingNG.
# North star
The north asterisk goal motivating RenderingNG is that the browser engine implementation, and the affluence of its interpretation APIs, should not be a limit factor of UX on the vane. You should not need to worry about browser bugs making features treacherous, or breaking your site ‘s rendition. There should be no mysterious performance cliffs. And, you should not need to work around missing built-in features. It should just work. I believe RenderingNG is a huge footprint towards this north headliner goal. Before RenderingNG, we could ( and did ) add rendering features and improve performance, but struggled to make those features reliable for developers, and there were many performance cliffs. now we have an architecture that systematically squashes many of those problems, and besides unblocks advanced features that were not considered feasible ahead. It :
- Has rock-solid core features across different platform, device, and operating system combos.
- Has predictable and reliable performance.
- Maximizes usage of hardware capabilities (cores, GPU, screen resolution, refresh rates, low-level raster APIs).
- Performs only the work that’s needed to display visible content.
- Has built-in support for common visual design, animation and interaction design patterns.
- Provides developer APIs to easily manage rendering costs.
- Provides rendering pipeline extension points for developer add-ins.
- Optimizes all content—HTML, CSS, 2D Canvas, 3D canvas, images, video, and fonts.
# Comparison with other browser rendering engines
Gecko and Webkit have besides implemented most of the same architectural features described in these web log posts, and in some cases tied added them before Chromium. Which is great ! While any one browser getting faster and more reliable is lawsuit for celebration and has real impact, the ultimate goal is to advance the baseline for all browsers, so that developers can rely on it .
# The pyramid of success
My philosophy is that achiever is the result of first achieving dependability, then scalable performance, and ultimately extensibility .
As with a real-life pyramid, each degree provides a necessarily-solid foundation for the charge above .
If rich and complex user experiences are to be potential at all, the first thing we need is a rock-solid platform. The core features and underpinnings must work correctly, and keep working over prison term. And it ‘s good a authoritative that those features compose well and do n’t have foreign edge-case behavior or bugs .
For this reason, dependability is the single most important part of RenderingNG. And dependability is the result of good examination, quality feedback loops, metrics, and software design patterns. To give a sense of how authoritative I think dependability is, we spent most of the last eight years nailing barely this part. First, we built a deep cognition of the system—learning from wiretap reports where the decrepit points were and fixing them, bootstrapping comprehensive examination tests, and understanding the performance needs of sites and limitations of Chromium ‘s performance. then we carefully and incrementally designed and rolled out keystone design patterns and data structures. lone then were we ready to add sincerely next-generation primitives for responsive design, scalability and customization of hand over .
This is not to say that nothing was improved over that time in Chromium. In fact, the opposite is true ! Those years saw a steady and confirm increase in dependability and performance as we refactored and rolled out each improvement bit-by-bit .
# Testing and metrics
Over the by 8 years, we have added tens of thousands of unit, performance and integration tests. In accession, we have developed comprehensive metrics measuring many aspects of how Chromium ‘s rendering behaves in local testing, in performance benchmarks, and in the wild on real sites, with real users and devices. But no matter how big RenderingNG ( or another browser ‘s try engine, for that topic ) is, it still wo n’t be easy to develop for the web if there are lots of bugs or differences in behavior between browsers. To address this, we besides maximize habit of Web Platform Tests. Each of these tests verifies a usage traffic pattern of the web platform that all browsers should aim to pass. We besides closely monitor metrics for passing more tests over time and increasing core compatibility. Web Platform Tests are a collaborative feat. For example, Chromium engineers have added merely about 10 % of the total WPT tests for features of CSS ; other browser vendors, independent contributors, and specification authors contribute the rest. It takes a greenwich village to raise the interoperable world wide web !
From wpt.fyi/compat2021, measuring pass rate of WPTs for core features
# Good software design patterns
faithfully delivering timbre software is, in turn, a whole set easier if the code is easy to understand, and designed in a room that minimizes the likelihood of bugs. We ‘ll have a batch more to say about RenderingNG ‘s software design in subsequent blog posts .
# Scalable performance
Achieving capital performance—across the dimensions of speed, memory, and ability use— is the adjacent most significant aspect of RenderingNG. We want interactions with all world wide web sites to be polish and responsive, however not sacrifice the constancy of the device. But we do n’t merely want performance, we want scalable performance—an architecture that performs faithfully well on low-end and high-end machines, and across OS platforms. I call this scale up—taking advantage of all that the hardware device can achieve, and scaling down—maximizing efficiency and reducing demand on the system when needed .
To get there, we needed to make maximum habit of hoard, performance isolation, and GPU hardware acceleration. Let ‘s consider each in turn. And to make it concrete, let ‘s think about how each of them contributes to the performance of one extremely significant interaction on world wide web pages : scroll. In a dynamic, synergistic UI chopine such as the web, hoard is the individual most significant way to dramatically improve performance. The most long-familiar kind of caching in a browser is the HTTP hoard, but rendering besides has many caches. The most significant hoard for scrolling is cached GPU textures and expose lists, which allow scrolling to be extremely firm while minimizing barrage drain and working good across a diverseness of devices. Caching helps battery biography and liveliness frame pace for scroll, but even more important is that it unblocks operation isolation from the chief ribbon.
Read more: A Few Thoughts on Cryptographic Engineering
# Performance isolation
On modern desktop computers, you never have to worry about setting applications slowing down the one you ‘re working in. That ‘s because of preemptive multitasking, which is in turn a human body of performance isolation : hold certain independent tasks do n’t slow each other down. On the network, the best model of performance isolation is scrolling. tied on websites that have lots of slow JavaScript, scrolling can be very smooth, because it runs on a different thread that does n’t have to depend on the JavaScript and layout weave. We put a long ton of attempt into RenderingNG to make surely that every potential scroll is threaded, through caching that goes well beyond just a display list to more complex situations. Examples include code to represent fixed- and sticky-positioned elements, passive voice event listeners, and high-quality textbook render .
# GPU acceleration
A GPU makes generating pixels and drawing to the screen dramatically faster—in many cases, every pixel can be drawn in parallel with every other pixel, resulting in an enormous speed increase. A winder part of RenderingNG is GPU raster and trace everywhere. This uses the GPU on all platforms, and all devices, to hyper-accelerate the interpretation and animate of web content. This is specially crucial on low-end devices or very high-end ones, which often have a much more capable GPU than other parts of the device .
once we have dependability and scalable operation, we ‘re nowadays ready to build on top a host of tools to help developers extend the built-in parts of HTML, CSS and Canvas, and in ways that do not sacrifice any of that hard-won performance and dependability. This includes built-in plus JavaScript-exposed APIs for advanced manipulation cases of responsive purpose, progressive try, smoothness and responsiveness, and threaded give. The comply open web APIs, championed by Chromium, were made possible by RenderingNG, and were previously considered impracticable. All of them were developed with candid specifications and collaboration with open web partners—engineers at other browsers, experts, and web developers. In subsequent web log posts, we will dive into each of these and explain how RenderingNG makes them possible .
- content-visibility: allows sites to easily avoid rendering work for offscreen content, and cache rendering for not-currently-shown single page application views.
- OffscreenCanvas: allows canvas rendering (both the 2D canvas API and WebGL) to run on its own thread for reliably excellent performance. This project is also another major milestone for the web—it’s the very first web API that allows JavaScript (or WebAssembly!) to render a single web page document from multiple threads.
- Container queries: allows a single component to responsively lay itself out, unblocking a whole universe of plug-and-play components (currently an experimental implementation).
- Origin isolation: allows sites to opt into more performance isolation between iframes.
- Off-main-thread paint worklets: gives developers a way to extend how elements are painted, with code that runs on the compositor thread.
In addition to explicit world wide web APIs, RenderingNG allowed us to ship several identical significant “ automatic features ” that benefit all sites :
- Site Isolation: puts cross-origin iframes in different CPU processes, for better security and performance isolation.
- Vulkan, D3D12, and Metal: takes advantage of lower-level APIs that use GPUs more efficiently than OpenGL.
- More composited animations: SVG, background color.
Additional approaching features unblocked by RenderingNG that we ‘re excited about include :
# Key projects that make up RenderingNG
Below is a list of the key projects within RenderingNG. Subsequent blog posts will deep-dive into each of them. Disentangles compositing from style, layout and paint, allowing much-improved dependability and predictable performance, increased throughput, and using less memory without sacrificing performance. It began in 2014 and will finish this year .
| Year | Progress |
|---|---|
| 2015 | Ship display lists. |
| 2017 | Ship new invalidation. |
| 2018 | Ship property trees part 1. |
| 2019 | Ship property trees part 2. |
| 2021 | Completed shipping the project. |
A ground-up rewrite of all layout algorithm, for greatly improved dependability and more predictable performance. It began in 2016 and is planned to finish this year .
| Year | Progress |
|---|---|
| 2019 | Ship block flow. |
| 2020 | Ship flex, editing. |
| 2021 | Ship everything else. |
A taxonomic cleaning and refactoring of the Blink rendering engine into flawlessly separated pipeline phases. This allows for better hoard, higher dependability, and re-entrant or delayed-rendering features such as content-visibility and container queries. It began in 2014, and incremental improvement and has been ongoing since. It will complete in 2021 .
# GPU Acceleration everywhere
A long-run effort to roll out GPU rasterization, pull and animation on all platforms, all of the fourth dimension. GPU acceleration provides an enormous acceleration for most content, because every pixel can be processed in twin. It is besides an effective method for improving performance on low-end devices, which tend to still have a GPU. It began in 2014 and completed in 2020 .
| Year | Progress |
|---|---|
| 2014 | Canvas support. Shipped on opt-in content on Android. |
| 2016 | Ship on Mac. |
| 2017 | GPU is used on over 60% of Android page views. |
| 2018 | Ship on Windows, ChromeOS, and Android Go. |
| 2019 | Threaded GPU rasterization. |
| 2020 | Ship remaining Android content. |
# Threaded scrolling, animations, and decode
A long-run feat to move all scroll, non-layout-inducing animations, and prototype decoding off of the main weave. It began in 2011 and is ongoing .
| Year | Progress |
|---|---|
| 2011 | Initial support for threaded scroll and animation. |
| 2015 | Layer squashing. |
| 2016 | Universal overflow scrolling. |
| 2017 | Image decodes on compositor thread. |
| 2018 | Image Animations on compositor thread. |
| 2020 | Always composite fixed-position. |
| 2021 | Percentage transform animations, SVG animations. |
A centralize raster and withdraw procedure for Chromium that increases throughput, optimize memory, and allows optimum use of hardware capabilities. It besides has other benefits less visible to web developers but very visible to users, such as unblock Site Isolation and decoupling the rendering pipeline from browser UI render. It began in 2016 and will complete in 2021 .
| Year | Progress |
|---|---|
| 2018 | OOP-R shipped on Android, Mac and Windows. |
| 2019 | OOP-D shipped. OOP-R shipped everywhere (except Canvas). SkiaRenderer shipped on Linux. |
| 2020 | SkiaRenderer shipped on Windows & Android. Vulkan shipped on Android. |
| 2021 | SkiaRenderer shipped on Mac (and ChromeOS soon). |
Definitions of terms in the chart above :
- OOP-D
- Out of process display compositor. Display compositing is the same kind of activity as an OS compositor. Out of process means doing it in the Viz process instead of the web page’s render process or the browser UI process.
- OOP-R
- Out of process raster. Raster is converting display lists into pixels. Out of process means doing it in the Viz process instead of the web page’s render process.
- SkiaRenderer
- A new display compositor implementation that can support execution on a range of different underlying GPU APIs such as Vulkan, D3D12 or Metal.
# Threaded and accelerated canvas rendering
This is the project that put in place the architectural pieces that made OffscreenCanvas possible. It began in 2015 and will finish in 2021 .
| Year | Progress |
|---|---|
| 2018 | Ship OffscreenCanvas. |
| 2019 | Ship ImageBitmapRenderingContext. |
| 2021 | Ship OOP-R. |
A long-run campaign to provide effective, dependable, and high quality video playback on the web .
| Year | Progress |
|---|---|
| 2014 | Introduced a Mojo-based rendering framework. |
| 2015 | Shipped Project Butter and video overlays for smoother video rendering. |
| 2016 | Shipped unified Android and desktop decoding and rendering pipelines. |
| 2017 | Shipped HDR and color-corrected video rendering. |
| 2018 | Shipped Mojo-based video decoding pipeline. |
| 2019 | Shipped Surface-based video rendering pipeline. |
| 2021 | Shipped 4K protected content rendering support on ChromeOS. |
Definitions of terms in the graph above :
- Mojo
- A next-generation IPC subsystem for Chromium.
- Surface
- A concept that is part of the Viz project design.
I could n’t be more aroused about the rate of improvement of rendering on the web and Chromium. I expect the pace will continue to accelerate in derive years as we are able to build on top of the solid basis of RenderingNG.
Stay tuned for many more future posts that will go into a fortune more detail about the new architecture, how it came to be, and how it works. Devices photograph by Eirik Solheim on Unsplash Illustrations by Una Kravets .