Upgrade to Pro — share decks privately, control downloads, hide ads and more …

High Performance Web Graphics

High Performance Web Graphics

A quick summary dispelling myths about how GPU compositing in WebKit works and what to look for when optimising performance.

Klemen Slavič

April 15, 2013

More Decks by Klemen Slavič

Other Decks in Programming


  1. • (Almost) every DOM element is represented by one or

    more RenderObjects • There are several different RenderObjects, depending on type of element and CSS properties • RenderObjects are organised into RenderTrees
  2. • RenderTrees are updated each time the DOM changes and

    during each animation frame • RenderObjects that are not visible are removed from the rendering tree for performance reasons • Each RenderObject has its own renderer implementation (Text, Image, Video, Canvas, etc.)
  3. • The DOM is mapped into RenderTrees and RenderObjects •

    First measurement pass walks the RenderTrees to calculate and layout boxes • Layers are created according to specific rules from subtrees (Tiling, Composite, etc.) • Layers are converted to textures and transferred to the GPU for compositing
  4. • Any operations not requiring rasterisation will not require texture

    transfer to GPU • CSS3 transitions and animations only send compositing geometry updates to the GPU (layers are rasterised before animation) • Any changes to the layout or content will force rasterisation of the layer and subsequent texture transfer to the GPU
  5. • When animating without transitions and animations, avoid the following:

    – calls to getComputedValue, – changing any layout and content-related CSS properties, – reading offset, offsetParent, etc. – if required to read status, do it before modifications, not during. Ideally, treat the DOM as write-only. http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
  6. • Without transitions and animations, setting transforms on elements rasterises

    layers and sends them to the GPU on each frame draw • As a result, animating scaling and rotation using JavaScript is slow (textures are rendered and transferred on each frame) • translate and opacity are non-destructive operations
  7. • Created under special circumstances: – overlapping content; – position:

    fixed, -webkit-overflow-scroll: touch; – <canvas>, <video>; – 3D transforms: translate3d, rotate3d, translateZ; – filters, masks, reflections, opacity, transitions, animations.
  8. • Tiled (too large to fit a single texture) •

    Composite (3D transforms, canvas, video) • Clipping (overflow: scroll)
  9. • When animating, consider creating separate compositing layers for each

    animated element • Turn on debugging borders in Chrome to check layer boundaries • Watch repaint geometry in the Timeline profiles • Avoid changing RenderLayer types
  10. • CPU/GPU combination matters • iOS rasterisation is sometimes slower

    than Android, but outperforms Android when using pure GPU geometry updates • Android 2.x works better with large layers, buggy 3D implementation • Android 4 rasterizes 3D layers across CSS pixels, not device pixels