CINXE.COM

<!DOCTYPE html> <head> <meta charset="utf-8"> <title>The Rendering Critical Path</title> <link rel="stylesheet" href="/_stylesheets/@docsearch/style.css"> <link rel="stylesheet" href="/_stylesheets/default.css"> </head>   <script async src="https://www.googletagmanager.com/gtag/js?id=G-24XP4PG02H"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-24XP4PG02H'); </script> <header> <a href="/"> <img alt="the Chromium logo" src="/_assets/icon-chromium-96.png" width="48" height="48"> <h2>The Chromium Projects</h2> </a> <div id="search"></div> </header> <div id="main-wrapper"> <nav id="sidebar-left"> <section> <a href="/chromium-projects">Home</a> <a href="/Home">Chromium</a> <a href="/chromium-os">ChromiumOS</a> </section> <section> <h4>Quick links</h4> <a href="/for-testers/bug-reporting-guidelines">Report bugs</a> <a href="/developers/discussion-groups">Discuss</a> </section> <section> <h4>Other sites</h4> <a href="https://blog.chromium.org/">Chromium Blog</a> <a href="https://developer.chrome.com/extensions">Google Chrome Extensions</a> </section> <section id="license" role="complementary"> Except as otherwise <a href="https://developers.google.com/site-policies.html#restrictions">noted</a>, the content of this page is licensed under a <a href="https://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 license</a>, and examples are licensed under the <a href="https://chromium.googlesource.com/chromium/src/+/HEAD/LICENSE">BSD License</a>. </section> <section id="privacy" role="complementary"> <a href="https://policies.google.com/privacy">Privacy</a> </section> <a id="edit-this-page" href="https://edit.chromium.org/edit?repo=chromium/website/main&file=site/developers/the-rendering-critical-path/index.md&ext_google.git=%7B%22repo%22%3A%22chromium%2Fwebsite%22%2C%22ref%22%3A%22main%22%2C%22file%22%3A%22site/developers/the-rendering-critical-path/index.md%22%7D">Edit this page</a> </nav> <main> <div class="breadcrumbs"> <a href="/developers">For Developers</a> > </div> <h1>The Rendering Critical Path</h1> <p>author: wiltzius@</p> <nav class="table-of-contents"><ol><li><a href="#rendering-architecture-in-brief">Rendering Architecture in Brief</a></li><li><a href="#the-critical-rendering-path">The Critical Rendering Path</a></li><li><a href="#browser-thread-architecture">Browser Thread Architecture</a></li><li><a href="#scrolling">Scrolling</a></li><li><a href="#modifying-style-of-existing-dom">Modifying Style of Existing DOM</a></li><li><a href="#adding-new-dom">Adding new DOM</a></li></ol></nav><h3 id="rendering-architecture-in-brief" tabindex="-1"><a class="header-anchor" href="#rendering-architecture-in-brief">Rendering Architecture in Brief</a></h3> <p>To understand the symptoms and potential causes of jank, it's important to have a basic understanding of the browser's rendering pipeline. This article will briefly describe that pipeline assuming knowledge of the web platform but no knowledge of how the rendering engine works, with links to relevant design docs for more info.</p> <p>This article is adapted from a similar section in <a href="/developers/how-tos/trace-event-profiling-tool/using-frameviewer">Using Frame Viewer to Bust Jank</a>. It goes into greater detail, but doesn't cover any examples. See that document for a more illustrated version of this process, which annotates a trace of an example style modification.</p> <p>We'll focus on how the page is rendered <em>after</em> page load -- that is, how the browser handles screen updates in response to user input and JavaScript changes to the DOM. Rendering when loading a page is slightly different, as compromises to visual completeness are often made in order to get some content to appear faster; this is out of scope for this document which will focus on <em>interactive</em> rendering performance.</p> <p>Much more detail about the specifics of how rendering inside of Blink works (i.e. the style, layout, and Blink paint systems), as well as a (somewhat dated) discussion of how it might evolve, can be found in the <a href="https://docs.google.com/a/chromium.org/document/d/1wYNK2q_8vQuhVSWyUHZMVPGELzI0CYJ07gTPWP1V1us/edit#heading=h.6cdy1o585rsa">Rendering Pipeline doc</a>. This document is intended to be more descriptive, higher-level, and include the related input and compositing systems.</p> <h3 id="the-critical-rendering-path" tabindex="-1"><a class="header-anchor" href="#the-critical-rendering-path">The Critical Rendering Path</a></h3> <p>After loading, the page changes in response to two inputs: user interaction mediated by the user agent (default pressed button styles, scrolling, pinch/zooming, etc) and updates to the DOM made by JavaScript. From there, a cascade of effects through several rendering sub-systems eventually produces new pixels on the user’s screen.</p> <p>The main subsystems are:</p> <pre><code>Input handling \[technically not related to graphics per se, but nevertheless critical for many interactions\] Parsing, which turns a chunk of HTML into DOM nodes Style, which resolves CSS onto the DOM Layout, which figures out where DOM elements end up relative to one another Paint setup, sometimes referred to as recording, which converts styled DOM elements into a display list (SkPicture) of drawing commands to paint later, on a per-layer basis Painting, which converts the SkPicture of drawing commands into pixels in a bitmap somewhere (either in system memory or on the GPU if using Ganesh) Compositing, which assembles all layers into a final screen image and, less obviously, the presentation infrastructure responsible for actually pushing a new frame to the OS (i.e. the browser UI and its compositor, the GPU process which actually communicates with the GL driver, etc). </code></pre> <p>As an example, updating the innerHTML of a DOM element that’s visible on-screen will trigger work in every one of the systems above. In bad cases any one of them can cost tens of milliseconds (or more), meaning every one of them can be considered a liability for staying within frame budget -- that is, any one of these stages can be responsible for dropping frames and causing jank.</p> <h3 id="browser-thread-architecture" tabindex="-1"><a class="header-anchor" href="#browser-thread-architecture">Browser Thread Architecture</a></h3> <p>The browser has multiple threads, and because of the dependencies implied in the above pipeline which thread an operation runs on matters a lot when it comes to identifying performance bottlenecks. Style, layout, and some paint setup operations run on the renderer’s main thread, which is the same place that JavaScript runs. Parsing of new HTML from the network gets in own thread (in most cases), as does compositing and painting; however parsing of e.g. innerHTML is currently performed synchronously on the main thread.</p> <p>Keep in mind that JavaScript is single threaded and does not yield by default, which means that JavaScript events, style, and layout operations will block one another. That means if e.g. the style system is running, Javascript can’t receive new events. More obviously, it also means that other JavaScript events (such as a timer firing, or an XHR success callback, etc) will block JS events that may be very timely -- like touch events. NB this essentially means applications responding to touch input must consider the JavaScript main thread the application’s UI thread, and not block it for more than a few milliseconds.</p> <p>The ordering of these events is often unfortunate, since currently Blink has a simple FIFO queue for all event types. The <a href="https://docs.google.com/a/chromium.org/document/d/11N2WTV3M0IkZ-kQlKWlBcwkOkKTCuLXGVNylK5E2zvc/edit">Blink Scheduler project</a> is seeking to add a better notion of priorities to this event queue. The scheduler will never be able to actually shorten non-yielding events, though, so is only part of the solution.</p> <p>It's worth noting here that scrolling is “special” in that it happens outside of the main JavaScript context, and scroll positions are asynchronously reported back to the main thread and updated in the DOM. This prevents janky scrolling even if the page executes a lot of JavaScript, but it can get in the way if the page is well-behaved and wants to respond to scrolling.</p> <p>It's also worth noting that the pipeline above isn’t strictly hierarchically ordered -- that is, sometimes you can update style without needing to re-lay-out anything and without needing to repaint anything. A key example is CSS transforms, which don’t alter layout and hence can skip directly from style resolution (e.g. changing the transform offset) to compositing if the necessary content is already painted. The below sections note which stages are optional. Different types of screen updates require exercising different stages in the pipeline. One way to keep animations inexpensive is to avoid stages of this pipeline altogether. The following sections cover a few common examples.</p> <p>Lastly, note that user interactions that the browser handles, rather than the application, are largely unexceptional: clicking a button changes its style (adding pseudo-classes) and those style changes need to be resolved and later stages of the pipeline run (e.g. the depressed button state needs to be painted, and then the page needs to be re-composited with that new painted content).</p> <h3 id="scrolling" tabindex="-1"><a class="header-anchor" href="#scrolling">Scrolling</a></h3> <p>Updating the viewport's scroll position has been designed to be as cheap as possible, relying heavily on the compositing step and its associated GPU machinery.</p> <p>In the simple case, when the user tries to scroll a page events flow through the browser as follows:</p> <ol> <li>Input events are delivered to the browser process's UI thread</li> <li>The browser's gesture detector processing the input stream decides that the user is attempting to scroll the page content</li> <li>Input events are sent directly from the browser UI thread to the compositor thread in the Renderer process (notably bypassing the Renderer's main thread, where JavaScript and Blink live) <ol> <li>Optionally, if there are touch event or mousewheel handlers registered on the part of the page being scrolled these events are added to Blink's event queue and the compositor will block further work on this frame until it receives an acknowledgment that those events have run and have not been preventDefault'd</li> </ol> </li> <li>The compositor updates layer positions relative to the viewport <ol> <li>Optionally, if newly exposed parts of the page have not been painted in previous frames, the compositor paints them. <ol> <li>Optionally, if newly exposed parts of the page have not been <em>recorded</em> in previous frames, the compositor asks Blink to record new sections of DOM</li> </ol> </li> </ol> </li> <li>The compositor issues GL commands to the GPU process to recomposite painted textures on the GPU with the updated layer positions in step 4</li> <li>The compositor asynchronously sends a message to the Renderer's main thread with updated scroll position information. <ol> <li>Optionally at this point updated JavaScript onScroll events can be fired by Blink</li> </ol> </li> </ol> <p>This flow skips a lot of detail, which is covered in the <a href="/developers/design-documents/gpu-accelerated-compositing-in-chrome">Accelerated Compositing design doc</a> if you're curious.</p> <p>Important notes:</p> <ul> <li>In the common case, only compositing and the GPU infrastructure are exercised in producing a new frame during scrolling; all other steps are skipped.</li> <li>Registering touch event handlers (see step 3.1) add those JavaScript touch event handlers as a synchronous step on the critical scrolling path.</li> <li>The compositor will almost always still produce frames even if its waiting on Blink for new content (e.g. for touch event handler acknowledgments in step 3.1, or for new recordings of DOM content in 4.1.1). Instead of the content it's trying to produce, it'll put up either old content that's already been painted in previous frames <em>or</em> if there's no such content available it'll put up a checkerboard pattern.</li> </ul> <h3 id="modifying-style-of-existing-dom" tabindex="-1"><a class="header-anchor" href="#modifying-style-of-existing-dom">Modifying Style of Existing DOM</a></h3> <p>Modifying the style of existing DOM elements from JavaScript (whether in response to input or not) will exercise most of the rendering pipeline, although it'll skip parsing. Depending on the styles modified, it may also skip layout and painting. Paul Irish and Paul Lewis have written a <a href="http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/">good article on html5rocks</a> covering which styles affect which pipeline stages.</p> <p>Here's an outline of how modifying style propagates through the browser:</p> <ol> <li>JavaScript runs, modifying some style (setting inline style, modifying a class list, etc). This may happen in a requestAnimationFrame callback, in an input event, in a timer callback, or anywhere else.</li> <li>When the compositor next asks Blink to paint part of the document, Blink will optionally recalculate style on any part of the DOM that it may need to paint. <ul> <li>This style recalculation is theoretically scoped to only the part of the DOM tree whose style is dirty, but in practice often includes the entire document (the Dev Tools timeline will show how many DOM nodes were operated on in each recalc style event).</li> </ul> </li> <li>Optionally, if the style recalculation has dirtied the layout of any elements that may need to be painted, layout is run on the relevant DOM subtree(s). <ul> <li>Notice the "may" in that sentence, since before layout is run and final element positions are known it isn't possible to tell what will be where. In practice, layouts often occur on the entire document. The Dev Tools timeline will show the root of the tree under operation for each layout event.</li> </ul> </li> <li>Optionally, if any composited layer properties have changed (new composited layers, or new transforms or opacity of existing composited layers) the main-thread copy of the compositor layer tree is updated.</li> <li>Now whatever part of the document the compositor requested be painted can actually be painted, but note that this doesn't actually fill in pixels -- Blink here paints into a display list (currently an SkPicture). <ul> <li>This is step 6 in the overview of main subsystems above, often called SkPicture recording.</li> </ul> </li> <li>New SkPictures and the updated compositor layer tree are transferred from the main thread to the compositor thread (the so-called "commit")</li> <li>The compositor prioritizes all content tiles and decides if any tiles need to be re-rastered (i.e. actually painted) to put up this new content</li> <li>The compositor then paints these tiles <ol> <li>With software painting, this is done on a software raster worker thread</li> <li>With Ganesh aka GPU rasterization, this is done on the compositor thread itself, converting the display list into GL commands</li> </ol> </li> <li>The compositor then generates the GL commands to produce a new frame and hands this frame's information to its parent compositor in the browser</li> <li>The browser compositor issues the GL commands for a new frame including the browser UI and the child compositor's content</li> </ol> <p>Important notes:</p> <ul> <li>It's possible to trigger style recalculation or layout outside of the rendering pipeline by reading back CSS properties that are lazily computed. In the worst case script can enter a write / read loop where it sets a style, reads a property that forces synchronous layout or style recalculation, and then repeats this process. We call this layout thrashing; Wilson Page has written a <a href="http://wilsonpage.co.uk/preventing-layout-thrashing/">good article on the subject</a>.</li> </ul> <p>This flow summarizes a lot of detail, again covered in the <a href="/developers/design-documents/gpu-accelerated-compositing-in-chrome">Accelerated Compositing design doc</a>.</p> <h3 id="adding-new-dom" tabindex="-1"><a class="header-anchor" href="#adding-new-dom">Adding new DOM</a></h3> <p>Adding new DOM or replacing a DOM subtree requires parsing the new DOM. Whether this parsing happens synchronously on the main thread or asynchronously off-thread depends on how the DOM is inserted. An incomplete listing:</p> <ul> <li>XHR responses are currently processed on the main thread; crbug.com/402261 tracks work to make it asynchronous</li> <li>Setting the srcdoc of an iframe is asynchronous, see crbug.com/308321 for the work that made this possible</li> <li>data: URLs are always asynchronously parsed; https://codereview.chromium.org/210253003 for the work that made this possible</li> <li>During page load, most parsing is done asynchronously using the threaded parser</li> </ul> <p>After parsing, rendering proceeds roughly as above in "modifying style of existing DOM"</p> </main> </div> <script> // Configure Algolia search. let s = document.createElement('script'); s.src = '/_scripts/@docsearch/index.js'; document.head.append(s); window.addEventListener('load', () => { // Add the Algolia search widget. docsearch({ container: '#search', appId: 'RZDQYCCABX', apiKey: '98b0eabafeb13fe3e1af693d5713d8b4', indexName: 'chromium' }); }); // Configure Google Universal Analytics (the predecessor to GA4, we should // delete this when we don't need it any more). s = document.createElement('script'); s.src = 'https://www.googletagmanager.com/gtag/js?id=UA-5484340-1' s.async = true; document.head.append(s) window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-5484340-1'); // Configure consent bar. s = document.createElement('script'); s.src = 'https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js' s.dataset.autoloadCookieConsentBar = true; s.dataset.autoloadCookieContentBarIntlCode = ''; document.head.append(s);</script>