This mail is a part of a series on the Chromium rendering engine. Check out the rest of the series to learn more about the RenderingNG architecture, cardinal data structures, VideoNG, LayoutNG and BlinkNG. I ‘m Chris Harrelson, the engineer leave for Rendering ( transforming HTML and CSS to pixels ) in Blink. I ‘ve been trench in the trenches of rendering performance on the web for over eight years, with a personal goal of doing whatever I can to make deliver excellent UX on the world wide web faster, easier, and more reliable. I ‘m excite for us to tell you about what we ‘ve done in that prison term to build a newfangled, up-to-date Chromium rendering engine computer architecture. To achieve this has been an enormous undertaking of love, and I hope you enjoy hearing about it ! In 2021, we will largely complete the work of designing, building and transportation this architecture. Let ‘s call it RenderingNG, since it is rightfully a next-generation rendering architecture that greatly outperforms what came earlier. RenderingNG has been in progress for at least eight years, and represents the collective oeuvre of many dedicate chromium developers. It unlocks a huge come of likely for the adjacent generation of fast, fluent, dependable, reactive and synergistic web capacity. It ‘s besides a baseline that I believe defines a new minimum standard for all web rendering engines that developers can rely on .Sketch of the different elements of RenderingNGRenderingNG 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 :

  • 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 .Pyramid with labels Reliability at the base, Performance in the middle, extensibility at the top As with a real-life pyramid, each degree provides a necessarily-solid foundation for the charge above .Sketch showing how with RenderingNG features can be added without a large increase in frustration 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 .Sketch shows circular nature of adding features, getting feedback, improving reliability 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 .Sketch graph shows reliability, performance, and extensibility improving over time 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 !Tests passing in different enginesFrom, 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.

# 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 .Sketch shows that with RenderingNG performance stays solid even when JavaScript is very slow.

# 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 .Sketch shows that with RenderingNG performance does not degrade so much. 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 :

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.
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.
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 :

A next-generation IPC subsystem for Chromium.
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 .

Leave a Reply

Your email address will not be published.