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


  1. None
  2. • (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
  3. • 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.)
  4. None
  5. • 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
  6. • 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
  7. • 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
  8. • 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
  9. • 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.
  10. • Tiled (too large to fit a single texture) •

    Composite (3D transforms, canvas, video) • Clipping (overflow: scroll)
  11. • 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
  12. None
  13. • 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
  14. None