Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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