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
Tweet

More Decks by Klemen Slavič

Other Decks in Programming

Transcript

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  7. • Created under special circumstances:
    – overlapping content;
    – position: fixed, -webkit-overflow-scroll: touch;
    – , ;
    – 3D transforms: translate3d, rotate3d, translateZ;
    – filters, masks, reflections, opacity, transitions,
    animations.

    View full-size slide

  8. • Tiled (too large to fit a single texture)
    • Composite (3D transforms, canvas, video)
    • Clipping (overflow: scroll)

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide