CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer...
Transcript of CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer...
![Page 1: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/1.jpg)
![Page 2: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/2.jpg)
CSS and GPU Cheat SheetSupercharge your page rendering with the GPU
Colt McAnlisDeveloper Advocate - Chrome #perfmatters
![Page 3: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/3.jpg)
How does a web page get drawn?More importantly, why hasn't it drawn my cat photos yet?
![Page 4: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/4.jpg)
Software Rasterization
#perfmatters
![Page 5: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/5.jpg)
Scrolling & Rasterization
#perfmatters
![Page 6: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/6.jpg)
Scrolling & Rasterization
#perfmatters
![Page 7: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/7.jpg)
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/
![Page 8: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/8.jpg)
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
![Page 9: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/9.jpg)
#perfmatters
![Page 10: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/10.jpg)
Tiling Textures = Memory Win
#perfmatters
![Page 11: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/11.jpg)
New Tiles added
#perfmatters
Still in Cache, Not visible
Still in Cache, Visible
Caching Tiles
![Page 12: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/12.jpg)
Tiles Recycled
#perfmatters
![Page 13: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/13.jpg)
Relative Position Animation
![Page 14: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/14.jpg)
Relative Position Animation
![Page 15: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/15.jpg)
"Layering"
![Page 16: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/16.jpg)
Controlling Layers with CSSHow developers can use all this.
![Page 17: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/17.jpg)
4 types of layer control
Load-time Layer Promotion
Assign-time Layer Promotion
Animation BasedLayer Promotion
Stacking Context &Relative Scrolling
![Page 18: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/18.jpg)
Load-time layer promotion
PluginiFrameVideo
CanvasWebGL
#perfmatters
![Page 19: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/19.jpg)
Assign-time layer promotion
TranslateZScaleZ
RotateXRotateYRotateZ
Translate3DScale3D
Rotate3Dbackface-visibility: hidden
#perfmatters
![Page 20: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/20.jpg)
#perfmatters
![Page 21: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/21.jpg)
Animation start /stopLayer Promotion / Demotion
transform : translatetransform : opacity
#perfmatters
![Page 22: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/22.jpg)
CSS AnimationsOPACITY and TRANSFORM
#perfmatters
![Page 23: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/23.jpg)
Stacking Context &Relative Scrolling
position : fixedz-index : 0
overflow : scrollz-index : 0
#perfmatters
![Page 24: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/24.jpg)
#perfmatters
CSS<style>#staticHeader { position: fixed z-index: 0}</style>
![Page 25: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/25.jpg)
Input and scrollbars
Place overflow:scroll elements in their own layer by adding z-index:0
overflow:scroll
#perfmatters
![Page 26: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/26.jpg)
Tradeoffs and consequencesThe GPU is not a silver bullet!
![Page 27: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/27.jpg)
The cost of too many layers : Additional Memory
#perfmatters
X X
GPU
Tile Cache
![Page 28: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/28.jpg)
Pre-Painting
Visible tiles
Not yet-visible, but pre-painted
#perfmatters
![Page 29: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/29.jpg)
display:none invalidates pre-painting
Gambling on potential usage
#perfmatters
display:none display:blockTriggers Paint
display:block translateZ(0)Load-time Paint
![Page 30: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/30.jpg)
The trouble with Images "responsive design"Image resizes = lots of lost time
#perfmattersgoo.gl/dq2Vr
![Page 31: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/31.jpg)
1680x1050 image resized to 128x128Image resizes = Double taxation
#perfmattersgoo.gl/dq2Vr
51ms to decode 29ms to resize22ms
![Page 32: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/32.jpg)
Tooling.The GPU is not a silver bullet!
![Page 33: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/33.jpg)
How to see what layers you haveTurn on "show layer borders" in devtools options
#perfmatters
![Page 34: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/34.jpg)
Continuous paint mode
![Page 35: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/35.jpg)
● 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
![Page 36: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/36.jpg)
</Thank You!>
#perfmattersgoo.gl/webperf
@duhroach
+Colt McAnlis
mainroach.blogspot.com
![Page 37: CSS and GPU Cheat Sheettopic.it168.com/factory/velocity2013/13.pdf · Animation Based Layer Promotion Stacking Context & Relative Scrolling. Load-time layer promotion Plugin iFrame](https://reader036.fdocuments.in/reader036/viewer/2022081607/5ed6963a843ed9152066a939/html5/thumbnails/37.jpg)