stick-to-finger fast 60fps websites / -apps - GDG DevFest Hamburg 2015

My slides for the talk at GDG DevFest Hamburg 2015
http://devfest.de/
So our pages load fast now, PageSpeed Insights loves us and we tweeted #perfmatters with pride, but we're not done yet! If we miss our 60fps goal, interacting with websites and -apps can become pure pain - especially on mobile. In this talk I will first explain in short how browsers turn our code into pixels each frame. And with the help of Chrome's DevTools we will make scrolling and transitions jank free without giving up our eye candy features e.g. fixed header, off-canvas menu and parallax scrolling. Let’s create some fancy rich but silky smooth stick-to-finger user experiences!

Transcript

1. stick-to-finger 60fps [web] Kim Hogeling shopping24 internet group
2. @KimHogeling • Happy web developer • Work for shopping24 internet group in Hamburg • Crazy about performance (everywhere) • developer.s24.com • @shopping24
3. @KimHogeling • Happy web developer • Work for shopping24 internet group in Hamburg • Crazy about performance (everywhere) • developer.s24.com • @shopping24
4. @KimHogeling • Happy web developer • Work for shopping24 internet group in Hamburg • Crazy about performance (everywhere) • developer.s24.com • @shopping24
5. @KimHogeling • Happy web developer • Work for shopping24 internet group in Hamburg • Crazy about performance (everywhere) • developer.s24.com • @shopping24
6. @KimHogeling • Happy web developer • Work for shopping24 internet group in Hamburg • Crazy about performance (everywhere) • developer.s24.com • @shopping24
7. @KimHogeling • Happy web developer • Work for shopping24 internet group in Hamburg • Crazy about performance (everywhere) • developer.s24.com • @shopping24
8. What is performance?
9. GZIP, server-caching, browser-caching, CDN, SSL handshakes, TCP slow start, start render, speed index, doc ready, window load, amount requests, waterfall bottlenecks, prioritize content, critical render path, above the fold, lazy loading, compress images, uglify HTML/JS/CSS, garbage collection, pure functions, scopes, closures, remove unused CSS, prevent redirects, DB queries, DB indexes, persistent connection, reuse Curl for APIs, memcached, varnish, content proxy, refresh cron jobs, build tools, continuous integration, sitespeed. io, webpagetest.org, Google pagespeed insights, New Relic custom metrics, custom dashboards, app index, RUM vs synthetics, third party scripts, R CSSom, render tree mo What is performance?
10. soasta.com/blog/page-bloat-average-web-page-2-mb
11. soasta.com/blog/page-bloat-average-web-page-2-mb
12. RAIL Jank Pixel Pipeline Demos Garbage Collection Efficient JavaScript
13. RAIL www.smashingmagazine. com/2015/10/rail-user-centric-model- performance/
14. meetup.com/de/sfhtml5/
15. meetup.com/de/sfhtml5/
16. smashingmagazine.com/2015/10/rail-user-centric-model-performance
17. Response < 100ms RAIL
18. Animation < 16ms (one frame) R AIL
19. Idle < 50ms RA IL
20. Load < 1000ms RAI L
24. smashingmagazine.com/2015/10/rail-user-centric-model-performance/
25. smashingmagazine.com/2015/10/rail-user-centric-model-performance/
26. 60Hz = 60fps = 16.66 ms/Frame samsung.com apple.com
27. Jank aka jitter / gutter / stutter / ...
28. Is my browser dying?!!
30. incredible marketing slide
31. Pixel Pipeline
32. JavaScript Style Layout Paint Composite Pixel Pipeline
33. JavaScript read / write style alter DOM Style Layout Paint Composite Pixel Pipeline
34. Event :hover, scrolling, device orientation Style Layout Paint Composite Pixel Pipeline
35. Event read / write style alter DOM Style Calculate Style - Find & apply CSS rules for matching selectors to each element Layout Paint Composite Pixel Pipeline
36. DOM
37. html5rocks.com/en/tutorials/internals/howbrowserswork
38. CSSOM DOM
39. html5rocks.com/en/tutorials/internals/howbrowserswork
40. CSSOM DOM
41. html5rocks.com/en/tutorials/internals/howbrowserswork
42. Render Tree CSSOM DOM
43. DOM CSSOM Render Tree Recalculate Style
44. Event read / write style alter DOM Style Calculate Style - Find & apply CSS rules for matching selectors to each element Layout Paint Composite Pixel Pipeline
45. Event read / write style alter DOM Style Calculate Style - Find & apply CSS rules for matching selectors to each element Layout Calculate used space and position of each element Paint Composite Pixel Pipeline
46. html5rocks.com/en/tutorials/internals/howbrowserswork
47. Layout
48. html5rocks.com/en/tutorials/internals/howbrowserswork
49. Event read / write style alter DOM Style Calculate Style - Find & apply CSS rules for matching selectors to each element Layout Calculate used space and position of each element “Doc, this is heavy!” Paint Composite Pixel Pipeline
50. Event read / write style alter DOM Style Calculate Style - Find & apply CSS rules for matching selectors to each element Layout Calculate used space and position of each element “Doc, this is heavy!” Paint Draw pixels onto multiple layers for everything visual e.g. text, images, borders Composite Pixel Pipeline
51. Event read / write style alter DOM Style Calculate Style - Find & apply CSS rules for matching selectors to each element Layout Calculate used space and position of each element “Doc, this is heavy!” Paint Draw pixels onto multiple layers for everything visual e.g. text, images, borders Composite Sort the layers into correct order and place them in position Pixel Pipeline
52. Hasslerics Looking for freedom One morning in June some twenty years ago I was born a rich man's son. I had everything that money could buy, but freedom I had none ☰
53. Hasslerics Looking for freedom One morning in June some twenty years ago I was born a rich man's son. I had everything that money could buy, but freedom I had none ☰
54. Hasslerics Looking for freedom One morning in June some twenty years ago I was born a rich man's son. I had everything that money could buy, but freedom I had none Looking for freedom One morning in June some twenty years ago I was born a rich man's son. I had everything that money could buy, but freedom I had none ☰
55. Hasslerics Looking for freedom One morning in June some twenty years ago I was born a rich man's son. I had everything that money could buy, but freedom I had none ☰ Hasslerics ☰ Looking for freedom One morning in June some twenty years ago I was born a rich man's son. I had everything that money could buy, but freedom I had none
56. distancetomars.com
57. Hasslerics Looking for freedom One morning in June some twenty years ago I was born a rich man's son. I had everything that money could buy, but freedom I had none ☰ Hasslerics ☰ Looking for freedom One morning in June some twenty years ago I was born a rich man's son. I had everything that money could buy, but freedom I had none
58. Event Style Layout Paint Composite Pixel Pipeline width, height, margin, padding, left, top, border, clear, cursor, display, font-size, ... background-*, box- shadow, color, clip, opacity (default), text- shadow, z-index, ... transform, opacity (only at update), perspective.
59. Event Style Layout Paint Composite Pixel Pipeline width, height, margin, padding, left, top, border, clear, cursor, display, font-size, ... background-*, box- shadow, color, clip, opacity (default), text- shadow, z-index, ... transform, opacity (only at update), perspective. dot!
60. csstriggers.com by Paul Lewis
61. STOP!! Demo time!
62. udacity. com/course/browser- rendering- optimization--ud860
63. animationMotion / SVG Motion Path developer.mozilla.org/en- US/docs/Web/SVG/Element/animateMotio n M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110 Does not block Browser :-)
70. “Writing Fast, Memory-Efficient JavaScript” By Addy Osmani smashingmagazine.com/2012/11/writing- fast-memory-efficient-javascript
71. “Let’s Write Fast JavaScript A few interesting JavaScript benchmarks and tips” By Mahdi Dibaiee medium.com/the-javascript-collection/lets- write-fast-javascript-2b03c5575d9e
74. Dirty change-checking
75. Object.observe(obj, callback[, acceptList]) developer.mozilla.org/en- US/docs/Web/JavaScript/Reference/Global _Objects/Object/observe
76. clean Arrays
77. integer index for faster iterating over Objects/Arrays
79. Thank you for your time :) "10"+3/4-2