Supercharge your page rendering with the GPU. Grace Kloba. Tech Lead - Chrome for Android. Colt McAnlis. Developer Advoc
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
[email protected]
[email protected]
+Grace Kloba
+Colt McAnlis
