Special Agent You: Jank Detective

some resources:

Check out this course, seriously https://www.udacity.com/course/browser-rendering-optimization--ud860

Other links:
http://jankfree.org/
https://csstriggers.com/
http://wilsonpage.co.uk/preventing-layout-thrashing/

Transcript

1. wtf confused why so janky works on my machine SPECIAL AGENT YOU: JANK DETECTIVE SPECIAL AGENT YOU: JANK DETECTIVE rachsmithtweets
2. SPECIAL WEB ANIMATIONS UNIT
3. YOU
4. look different? mmmm
5. CSS bug again boo
6. here’s fix I love 2 pair wit you
7. CASE CLOSED !
8. Web animations are… dynamic dependent on runtime environment
9. Web animations are… complex difficult to debug
10. active theory work slide
12. animating “expensive” CSS properties
13. layout thrashing
14. using memory
17. The real problem Code or content that causes issues for: - the browser rendering engine. - the hardware (CPU, GPU)
18. Let’s learn how the browser renders content. It will make us better designers and developers!
19. Code goes in Website comes out ???
20. Code goes in Website comes out
21. How a browser renders a frame STEP 1: Use HTML & CSS rules to create a render tree.
22. How a browser renders a frame STEP 2: Calculate layout.
24. How a browser renders a frame STEP 3: Paint pixels to screen.
25. How a browser renders a frame STEP 3.5: Composite layers.
27. How a browser renders a frame STYLES LAYOUT PAINT 
 COMPOSITE less than 16ms
28. When animating - Some CSS properties are more “expensive” than others.
29. width STYLES LAYOUT PAINT 
 COMPOSITE
30. background-image STYLES LAYOUT PAINT 
 COMPOSITE
31. opacity STYLES LAYOUT PAINT 
 COMPOSITE
33. Blink: Chrome (desktop & Android) Webkit: All Safari (and iOS Chrome) Gecko: Firefox EdgeHTML: Edge Trident: Internet Explorers disclaimer: not all browsers render the same way!!!
34. Blink: Chrome (desktop & Android) Webkit: All Safari (and iOS Chrome) Gecko: Firefox EdgeHTML: Edge Trident: Internet Explorers disclaimer: not all browsers render the same way!!!
35. http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
36. “hardware acceleration”
37. what does that even mean tho
38. STYLES LAYOUT PAINT 
 COMPOSITE CPU (main thread) GPU
39. STYLES LAYOUT PAINT 
 COMPOSITE CPU (main thread) GPU
40. Avoid: • animating expensive CSS properties • layout thrashing
41. Did you know? Reading a CSS property can trigger a layout.
42. STYLES LAYOUT PAINT 
 COMPOSITE JavaScript can cause the layout step to run over and over again
44. read write
45. reads together writes together
46. read on resize event writes in rAF loop
47. When updating the DOM with JavaScript: • group reads and writes together • read & store values on events (resize, scroll, mousemove) • write property changes to DOM in requestAnimationFrame
48. I kno its you border-radius lol as if
49. we gotta send this to the lab
51. STYLES LAYOUT PAINT 
 COMPOSITE Some properties cause more expensive paints than others
54. animating text-shadow
58. If you see a framerate drop/ jank: • record it in the timeline • check for CPU activity causing frames to take longer than 16ms
59. still janks on iPad :( but hardware acceleration!
60. Debugging hardware related problems is not an exact science. It is also pretty frustrating.
61. mfw someone asks me to debug an Android device
62. New or expensive device = good performance
63. New or expensive device != good performance (sometimes)
64. Watch out for devices with very high resolutions. They may not have the GPU power to render all the pixels.
65. Samsung Note 5 1st generation retina MBP (13inch) Macbook Air (hooked up to epically large screen)
66. Other factors: • device battery left • how many tabs/apps are open • available memory on the device
67. If animation is a core part of your website/app: Test on real devices. Test early and test often.
68. devices image I see jank on this one dammit
69. How can we progressively enhance animation on different hardware? currently: user agent + touch events + screen size + pixel density (AKA the franken-sniff) Lets be real: we can’t really.
70. (barba)
71. If the web really wants to keep up with the native world we’ll have to work out a way to provide optimal animated experiences to all devices.
72. Browser rendering engines will continue to improve.
73. Maybe some day: access to device hardware specs through a browser API.
75. Well done detectives!
76. u r under arrest parallax plugin I will be back
77. Thanks Chrome dev rels! Follow up with this free Udacity course! https://www.udacity.com/course/ browser-rendering-optimization-- ud860 I’ll tweet the link @rachsmithtweets
79. b