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