Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

• (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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

• 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

Slide 6

Slide 6 text

• 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

Slide 7

Slide 7 text

• 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

Slide 8

Slide 8 text

• 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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

• 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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

• 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

Slide 14

Slide 14 text

No content