CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer...

CSS and GPU Cheat SheetSupercharge your page rendering with the GPU

Colt McAnlisDeveloper 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

CSS Paint times are not free

0.84ms

box-shadow: 1px 1px

box-shadow : 1px 2px 3px black

box-shadow: 1px 2px 3px 4px

#perfmattersgoo.gl/dq2Vr

1.09ms

box-shadow

border-radius-stroke

box-shadow & border-radius-stroke

0.27ms

0.22ms0.31ms

0.19ms

http://www.html5rocks.com/en/tutorials/speed/css-paint-times/

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

#perfmatters

Tiling Textures = Memory Win

#perfmatters

New Tiles added

#perfmatters

Still in Cache, Not visible

Still in Cache, Visible

Caching Tiles

Tiles Recycled

#perfmatters

Relative Position Animation

Relative Position Animation

"Layering"

Controlling Layers with CSSHow developers can use all this.

4 types of layer control

Load-time Layer Promotion

Assign-time Layer Promotion

Animation BasedLayer Promotion

Stacking Context &Relative Scrolling

Load-time layer promotion

PluginiFrameVideo

CanvasWebGL

#perfmatters

Assign-time layer promotion

TranslateZScaleZ

RotateXRotateYRotateZ

Translate3DScale3D

Rotate3Dbackface-visibility: hidden

#perfmatters

#perfmatters

Animation start /stopLayer Promotion / Demotion

transform : translatetransform : opacity

#perfmatters

CSS AnimationsOPACITY and TRANSFORM

#perfmatters

Stacking Context &Relative Scrolling

position : fixedz-index : 0

overflow : scrollz-index : 0

#perfmatters

#perfmatters

CSS<style>#staticHeader { position: fixed z-index: 0}</style>

Input and scrollbars

Place overflow:scroll elements in their own layer by adding z-index:0

overflow:scroll

#perfmatters

Tradeoffs and consequencesThe GPU is not a silver bullet!

The cost of too many layers : Additional Memory

#perfmatters

X X

GPU

Tile Cache

Pre-Painting

Visible tiles

Not yet-visible, but pre-painted

#perfmatters

display:none invalidates pre-painting

Gambling on potential usage

#perfmatters

display:none display:blockTriggers Paint

display:block translateZ(0)Load-time Paint

The trouble with Images "responsive design"Image resizes = lots of lost time

#perfmattersgoo.gl/dq2Vr

1680x1050 image resized to 128x128Image resizes = Double taxation

#perfmattersgoo.gl/dq2Vr

51ms to decode 29ms to resize22ms

Tooling.The GPU is not a silver bullet!

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

#perfmatters

Continuous paint mode

● GPU + Layers = faster rendering

● Too many layers = seriously bad time

● Be aware of your CSS tags impact on CPU & GPU perf

● Use tooling to show off how many layers you have

Webpage design with the GPU in mind

#perfmatters

</Thank You!>

#perfmattersgoo.gl/webperf

colton@google.com

@duhroach

+Colt McAnlis

mainroach.blogspot.com