Embed Size (px)
Citation preview
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
@duhroach
+Colt McAnlis
mainroach.blogspot.com
