High Performance Web Graphics

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

Transcript

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