Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HalfStack fast but not furious

154 views

Published on

As presented at HalfStack 2018 in London

Published in: Internet
  • Be the first to comment

  • Be the first to like this

HalfStack fast but not furious

  1. 1. Front-end Dev & Designer at Lunar Logic Anna Migas Google Developer Expert @szynszyliszys
  2. 2. Anna Migas @szynszyliszys Fast but not furious: Debugging user interaction performance issues
  3. 3. Starability.css Repaintless.css Auroral.css
  4. 4. Perceived performance
  5. 5. Perceived performance First Meaningful Paint Time to interactive
  6. 6. Optimise Critical Rendering Path Use progress bars instead of spinners Have a placeholder content Start upload before user even decides to click the upload button
  7. 7. Perceived Performance
  8. 8. LOADPerceived Performance
  9. 9. ! " Perceived load performance
  10. 10. ! Perceived performance !
  11. 11. Perceived performance First Meaningful Paint Time to interactive Smooth at all times
  12. 12. Agenda 1. Why sometimes interactions feel slow 2. Browser rendering and frames 3. Types of triggered changes in the UI 4. How to test for interaction performance 5. Potentially dangerous user interface patterns
  13. 13. J A N K
  14. 14. zdjęcie krzeseł https://jakearchibald.github.io/jank-invaders/
  15. 15. 60 fps 
 1000/60 = ~16.6ms
  16. 16. 60 fps 
 1000/60 = ~16.6ms 120 fps 
 1000/120 = ~8.3ms iPad Pro, Razer smartphone
  17. 17. If we interact with a page, a browser needs to start serving frames (ideally 60 or 120 per second)
  18. 18. What a frame consists of?
  19. 19. What a browser does during these steps?
  20. 20. Change happens, an event is fired 1
  21. 21. Styles are recalculated 2
  22. 22. Layout is calculated 3
  23. 23. Layout
  24. 24. Everything is rasterised and painted to the layers 4
  25. 25. Paint
  26. 26. Paint
  27. 27. Layers
  28. 28. What creates new layers? 1. 3D or perspective transforms 2. Animated 2D transforms or opacity 3. Being on top/a child of a compositing layer 4. Accelerated CSS filters 5. In special cases <video>, <canvas>, plugins 6. will-change CSS property
  29. 29. .btn { background-color: white; border: 1px solid blue; will-change: transform; } .btn:hover { transform: scale(1.1); }
  30. 30. Every layer consumes memory. Use them wisely.
  31. 31. Compositing 5
  32. 32. Compositing
  33. 33. Compositing
  34. 34. Types of triggered changes
  35. 35. Layout change (Reflow) (width, margin-top, left)
  36. 36. Paint change (Repaint) (background-color, box-shadow, background-image)
  37. 37. Compositing change (transform, opacity)
  38. 38. How to test if we have a problem?
  39. 39. Reflows can be quite obvious…
  40. 40. …but for Repaints we might need better tools
  41. 41. Performance tab (Chrome or Firefox)
  42. 42. Performance tab (Chrome or Firefox)
  43. 43. Layers tab (Chrome)
  44. 44. Rendering tab (Chrome)
  45. 45. Rendering tab (Chrome)
  46. 46. Paint flashing (Firefox)
  47. 47. Performance monitor tab (Chrome)
  48. 48. What are the potentially dangerous UI patterns?
  49. 49. Animations 1
  50. 50. Animations 1. Don’t overuse animations 2. Animate only transform and opacity if possible 3. For 120fps avoid requestAnimationFrame() 4. Don’t animate elements below other nodes (like fixed headers) 5. Don’t animate too many elements
  51. 51. Parallax effect 2
  52. 52. http://davegamache.com/parallax/
  53. 53. Parallax effect 1. Causes Paint Storms 2. Almost always bad 3. Don’t use scroll events 4. Don’t use background-position 5. Use 3D transforms and perspective if you need to: https://developers.google.com/web/updates/ 2016/12/performant-parallaxing
  54. 54. Fixed elements 3
  55. 55. https://jsipsum.lunarlogic.io/
  56. 56. Fixed elements 1. Repaints with every frame when scrolling 2. Use will-change property (or transform: translate3D(0,0,0)) to avoid repainting .fixed-element { position: fixed; will-change: transform; }
  57. 57. Scrolling events 4
  58. 58. Scrolling events 1. Don’t attach wheel or touch listeners to the whole document, use smaller areas instead 2. Take advantage of passive event listeners (use with polyfill): window.addEventListener("scroll", func, {passive: true});
  59. 59. Hover effects 5
  60. 60. Hover effects 1. If they are bound to happen often—you might consider using will-change property 2. Can be deadly if there are too many and can be easily triggered 3. Avoid effects triggering Layout or Paint: https://csstriggers.com/
  61. 61. Appending elements 6
  62. 62. Appending elements 1. Make sure not many elements will be affected 2. Try to separate the area (will-change, contain: layout) 3. Try not to change the size of area (for example use overflow property)
  63. 63. Takeaways 1. Jank happens when the browser doesn’t finish rendering a frame on time 2. Try to offload and optimise the main thread 3. Avoid content Reflows and Repaints 4. Don’t overuse layers 5. Test your website with Performance, Layers and Rendering tabs 6. Use responsibly potentially dangerous UI patterns
  64. 64. Resources 1. http://jankfree.org 2. https://dev.opera.com/articles/css-will-change-property 3. https://www.udacity.com/course/browser-rendering-optimization-- ud860 4. https://www.html5rocks.com/en/tutorials/speed/layers 5. https://www.html5rocks.com/en/tutorials/speed/high-performance- animations 6. https://blog.logrocket.com/eliminate-content-repaints-with-the-new- layers-panel-in-chrome-e2c306d4d752 7. https://dassur.ma/things/120fps/
  65. 65. Thanks! Anna Migas @szynszyliszys

×