Skip to content

Instantly share code, notes, and snippets.

@pcwalton

pcwalton/webrender-benefits.md

Created January 17, 2019 00:18
Show Gist options
  • Save pcwalton/33bd1049d6e3b686d59fbba76fc3575a to your computer and use it in GitHub Desktop.
Save pcwalton/33bd1049d6e3b686d59fbba76fc3575a to your computer and use it in GitHub Desktop.
Download ZIP
WebRender benefits
Raw
webrender-benefits.md

WebRender benefits

Fundamentally, WebRender is designed to render CSS with better performance on modern hardware than what the traditional combination of a legacy painting API like Skia and a compositor can offer. It does so by merging the painting and compositing steps together into a single API, avoiding the performance pitfalls associated with CSS properties that don't run on the compositor. Instead of an immediate mode API in which objects are rendered back-to-front, WebRender uses a retained mode API that can render objects in any order. Ultimately, WebRender works more like a game engine than a legacy PostScript-like 2D API, which is beneficial because GPUs are optimized for the patterns that game engines use, such as aggressive batching and out-of-order rendering.

Examples of common workloads that should have improved frame rate with WebRender include:

  1. Animations that don't use the transform or opacity properties, such as those that jQuery produces.

  2. Animations of colors and backgrounds, such as animated gradients. (Large solid colors and gradients are popular in flat design.)

  3. Animated images that aren't video.

  4. Pinch zooming of borders and backgrounds.

Examples of common workloads that should have reduced "checkerboarding" include:

  1. Complex borders and shadows, such as those used to create certain special effects.

  2. Complex gradients.

  3. Special visual effects such as blurs.

WebRender also fixes various long-standing bugs in Gecko's 3D transforms. It also paves the way for moving portions of image decoding to the GPU.

Pathfinder benefits

Pathfinder is designed to bring the same performance benefits as WebRender to SVG, fonts, and canvas. The approach of Pathfinder is similar to that of WebRender, but vector graphics present a more difficult problem space, so Pathfinder is a more ambitious project. While WebRender adopts techniques that have been standard in the game industry for decades, Pathfinder represents an original approach to the problem of rendering vector graphics that is the culmination of approximately two years of Mozilla research.

As far as Gecko is concerned, Pathfinder should ultimately be regarded as a component of WebRender. This is because browsers don't render vector graphics alone; rather, vector graphics are simply one part of a Web page styled with CSS. (Additionally, the SVG specification features special effects such as blur and drop shadow that CSS also supports; it would be a needless duplication of effort to try to implement these effects in Pathfinder when WebRender already has high-quality implementations of these filters.)

Examples of workloads that benefit from Pathfinder's approach in terms of frame rate include:

  1. Pixel-perfect pinch zooming of pages with no blurriness.

  2. Viewing text and SVG in 3D, such as in VR.

  3. 2D canvas games.

  4. Interactive charts and infographics, such as those produced by the popular d3.js library used by the New York Times and others.

Examples of workloads that benefit from Pathfinder in terms of reduced "checkerboarding" include:

  1. PDF documents.

  2. Large complex fonts.

  3. Complex SVG graphics.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment