Composite

Web Page Design With The GPU in Mind Supercharge your page rendering with the GPU

Grace Kloba

Colt McAnlis

Tech Lead - Chrome for Android

Developer Advocate Chrome

#perfmatters

How does a web page get drawn? More importantly, why hasn't it drawn my cat photos yet?

Software Rasterization

#perfmatters

Scrolling & Rasterization

#perfmatters

Scrolling & Rasterization

#perfmatters

Animation & Rasterization

Must paint old rectangle and new rectangle

#perfmatters

High DPI = High amounts of work Device

px/inch

iPad Mini

~ 160

Kindle Fire

~ 170

Nexus 7

~ 216

Macbook + Retina

~ 220

Chromebook Pixel

~ 239

Nexus 10

~ 300

HiDPI screes require 4x pixels! Which means 4x the amount of work to paint!

#perfmatters

Hardware Compositing Using the GPU to make even faster websites

Graphics Processing Unit

#perfmatters

GPU To the rescue!

GPU

Woot! FRAME 1

CPU

FRAME 2 FRAME 3

#perfmatters

Tiling Textures = Memory Win

#perfmatters

Caching Tiles

#perfmatters

Caching Tiles Still in Cache, Not visible

Still in Cache, Visible

New Tiles added

#perfmatters

Tiles Recycled

#perfmatters

Pre-Painting Visible tiles

Not yet-visible, but pre-painted #perfmatters

Tiling and Animation

#perfmatters

Animation & Rasterization

GPU Layer 1

GPU Layer 2 #perfmatters

Tiling and Animation

Woot!

#perfmatters

Controlling Layers with CSS How developers can use all this.

Hands-Free layer promotion Plugins

Video

Canvas

#perfmatters

3D Transform = Auto layer promotion ● ● ● ● ● ● ● ● ●

TranslateZ ScaleZ RotateX RotateY RotateZ Translate3D Scale3D Rotate3D backface-visibility: hidden

2D Transforms do NOT create layer #perfmatters

CSS Animations OPACITY and TRANSFORM

#perfmatters

Tradeoffs and consequences The GPU is not a silver bullet!

The cost of too many layers :

Additional Memory

#perfmatters

GPU Tile Cache

X X

Sorting

The cost of too many layers :

#perfmatters

Additional Processing

Layering & Animation tradeoffs

translateZ(0) ==> Layer promotion ==> Memory Usage

#perfmatters

display:none invalidates pre-painting display:none display:block Triggers Paint

display:block translateZ(0) Load-time Paint

Gambling on potential usage

#perfmatters

Input with Threaded Compositing We should be able to render w/o needing to be blocked by input

Responding to paint requests TIME

paint

composite

paint

composite

paint

BLINK thread

16ms

VBLANK

#perfmatters

VBLANK

composite

Single threaded event queue

parsing

layout

VBLANK

#perfmatters

paint

Composite

JS EVENT

setInterval

VBLANK

layout

paint

Composite

Outta Time 2ms Touch Events

2ms JS EVENT

8ms onLoad() callback

3ms layout

6ms paint

16MS

"Multi Threaded Painting" #perfmatters

2ms composite

Threaded compositing - Multithreaded parsing

layout

paint

JS EVENT

layout

BLINK thread

!

Composite Needed

Compositor thread composite

VBLANK

#perfmatters

paint

Let the browser scroll

onload

audio

JS EVENT

layout

setInterval

BLINK thread

composite Compositor thread

! #perfmatters

Composite Needed

composite

composite

Don't use custom scroll libraries MOUSEWHEEL EVENT

layout

paint

BLINK thread

!

Composite Needed composite

Compositor thread

MISSED FRAMES

Custom scroll handler == Slow Performance #perfmatters



#perfmatters

CSS

Tooling and insight Tips and tools navigating Accelerated compositing.

How to see what layers you have Turn on "show layer borders" in devtools options

#perfmatters

chrome://tracing

51ms to decode

#perfmatters

29ms to resize

22ms

Browser-driven scroll

COMPOSITE!

1

#perfmatters

2

3

4

JS driven Scroll

COMPOSITE!

1

#perfmatters

2

33 ms

3

Webpage design with the GPU in mind ● GPU + Layers = faster rendering ● Too many layers = seriously bad time ● Let browser handle scrolling = steady frame rate ● Use tooling to show off how many layers you have #perfmatters

#perfmatters goo.gl/webperf

klobag@google.com

colton@google.com

+Grace Kloba

+Colt McAnlis