Slide 1

Slide 1 text

CSS Animation with GPU

Slide 2

Slide 2 text

Translate 3-D!

Slide 3

Slide 3 text

Best Practices Under the Hood Experiments

Slide 4

Slide 4 text

Demo ariya.github.io/kinetic

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

User Interface Browser Engine Graphics Stack Rendering Engine JavaScript Engine Networking I/O

Slide 7

Slide 7 text

HTML Parser DOM CSS Parser HTML Style Sheets DOM Tree Style Rules Render Tree Render Layout Paint http://www.html5rocks.com/en/tutorials/internals/howbrowserswork

Slide 8

Slide 8 text

HTMLDocument HTMLBodyElement HTMLParagraphElement RenderRoot RenderBody RenderText • metrics (box model) • hit testing

Hello, SF Web Perf!

DOM Tree vs Render Tree

Slide 9

Slide 9 text

Anti-aliasing

Slide 10

Slide 10 text

Curve Approximation Polygon

Slide 11

Slide 11 text

Font Atlas Bye Buffer

Slide 12

Slide 12 text

When I don’t know what happened, it just bothers me, gets under my skin, and I need to write about it. Taylor Swift

Slide 13

Slide 13 text

Graphics Processing Unit (GPU) Central Processing Unit (CPU)

Slide 14

Slide 14 text

Optimized for Games

Slide 15

Slide 15 text

Predictable contents (assets) ✔ Mostly text ✔ Mostly images ✔

Slide 16

Slide 16 text

CSS 3-D (Transformation) http://ariya.github.io/css/spinningcube/

Slide 17

Slide 17 text

Compositing

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Layer Compositing Background Foreground

Slide 20

Slide 20 text

Same foreground layer, Different transformation matrix Layer Compositing

Slide 21

Slide 21 text

Render Object to Layer

Slide 22

Slide 22 text

Render Object to Layer 3-D transformation, CSS animation, …

Slide 23

Slide 23 text

Debugging in Safari $ defaults write com.apple.Safari IncludeInternalDebugMenu 1 https://ariya.io/2013/06/optimizing-css3-for-gpu-compositing

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool

Slide 26

Slide 26 text

Available Layer Operations Opacity Transformation Filter

Slide 27

Slide 27 text

Initialize: Texture Upload “Hey, this is good stuff. Keep it around as texture #42.” .... ....

Slide 28

Slide 28 text

Animation Step: Texture Operation “Apply [operation] to texture #42.”

Slide 29

Slide 29 text

Mechanics of Optimized Animation Completed? STOP Create a layer Apply layer operation

Slide 30

Slide 30 text

Traffic Matters http://calendar.perfplanet.com/2014/hardware-accelerated-css-the-nice-vs-the-naughty/

Slide 31

Slide 31 text

Terrible Animation Completed? STOP Create a layer Send a layer update Another texture upload

Slide 32

Slide 32 text

Texture Reupload = Bad http://codepen.io/ariya/full/xuwgy translate3d ???

Slide 33

Slide 33 text

Pablo Picasso

Slide 34

Slide 34 text

Let’s Cheat: Color Transition http://codepen.io/ariya/full/ofDIh

Slide 35

Slide 35 text

https://ariya.io/2014/02/tricks-for-gpu-composited-css

Slide 36

Slide 36 text

Let’s Cheat Again! https://ariya.io/2014/02/tricks-for-gpu-composited-css

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Steve Jobs, MacWorld 2007

Slide 39

Slide 39 text

Drag-and-Scroll Technique Intercept browser events Track position + apply CSS transform Illusion of scrolling

Slide 40

Slide 40 text

http://ariya.github.io/kinetic/2/ Momentum Effect Flick List Kinetic Scrolling https://ariya.io/2013/11/javascript-kinetic-scrolling-part-2

Slide 41

Slide 41 text

Steady touchstart Pressed Manual Scrolling Automatic Scrolling touchend touchmove touchend and zero speed timer tick decelerate to zero speed touchstart timer tick touchend and positive speed

Slide 42

Slide 42 text

time Scroll offset Deceleration

Slide 43

Slide 43 text

Deceleration time velocity Exponential decay

Slide 44

Slide 44 text

Model-View Event Handler Kinetic Model View Touch events Scroll offset

Slide 45

Slide 45 text

Model-View Event Handler Kinetic Model View Touch events CSS transform

Slide 46

Slide 46 text

Cover Flow Wireframe

Slide 47

Slide 47 text

No transformation translateX(-110px) translateZ(-150px) rotateY(60deg) translateX(110px) translateZ(-150px) rotateY(-60deg)

Slide 48

Slide 48 text

Perspective 3-D translateX(-110px) translateX(-110px) translateZ(-150px) translateX(-110px) translateZ(-150px) rotateY(60deg)

Slide 49

Slide 49 text

https://ariya.io/2014/01/javascript-kinetic-scrolling-part-5-cover-flow-effect

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

TELL ME … DO YOU EVEN?

Slide 52

Slide 52 text

Best Practices Under the Hood Experiments

Slide 53

Slide 53 text

Thank You shapesecurity.com Some artworks are from http://openclipart.org. speakerdeck.com/ariya @ariyahidayat