More Related Content

Performance beyond page load (jQuery Conference)

  1. Performance beyond Page Load Apoorv Saxena
  2. @apoorv_saxena
  3. Kickstart the talk!
  4. Let the data speak!
  5. Not impressed ?
  6. At EdgeConf 2012, Facebook confirmed this when it mentioned that in an A/B test, it slowed down scrolling from 60fps to 30fps, causing engagement to collapse.
  7. What is smooth interaction? Devices refresh their screen 60 times a second. Thus, frame budget for smooth interaction is 16ms (1 second / 60 frames = 16.66 ms / frame) Though, browser has got some householding work as well, which leaves us with about 10ms in total.
  8. Jank When failing to meet the frame budget of 10ms, we come across
  9. Rendering Performance Let’s build smooth interaction experiences
  10. 16ms isn’t a lot of time
  11. In a Nutshell..
  12. Pixel Pipeline
  13. Layout
  14. width overflow height padding font-family margin display vertical-align border-width border clear top position bottom font-size float left text-align overflow-y right line-height font-weight white-space min-height
  15. Painting
  16. color border-style visibility background text-decoration background-image background-position background-repeat outline-color outline outline-style border-radius background-size box-shadow
  17. Composting
  18. Tools at hand
  19. FPS meter
  20. Profiling with Timeline
  21. Show Paint Rectangles
  22. Things we intend to achieve
  23. Smooth Scrolling
  24. What can cause Jank during scroll? Processing that consumes more than 16ms: ● Time consuming operations e.g. Garbage Collection event. ● JavaScript triggered operations that consume lot of time e.g. Layout Thrashing ● Loads of repainting on the screen, reason can be attributed to JS / CSS or both.
  25. Smooth Animation
  26. What can cause Jank during animation? Triggering any other operation that can cause the animation to exceed its frame budget.
  27. Smooth Interaction
  28. What can cause Jank during interaction with page? Synchronous operation(s) inside the event handler that exceeds the current frame budget.
  29. Best practices related to Rendering Performance
  30. Avoid Memory Leaks
  31. Reducing DOM calls Writing / Reading frequently to/from DOM is a bad practice
  32. Forced Synchronous Layout DOM write operation followed by a DOM read operation for a layout property of a DOM element
  33. Layout Thrashing Forced synchronous layout in quick succession Demo: Animations example
  34. How to avoid Layout Thrashing
  35. Library: FastDom Eliminates layout thrashing by batching DOM read/write operations,
  36. Potential Scroll Bottlenecks Demo: Repaint on Scroll
  37. Debounce Input Handlers
  38. Reduce Paint Areas
  39. Avoid Paint Storms
  40. How to run Animations at 60fps ?
  41. GPU Acceleration
  42. Canvas is hardware accelerated
  43. JS Animations
  44. CSS Animations Demo: SnowFlake Animation
  45. Style Calculations Reference: CSSTriggers.com
  46. Web Animations API Demo: SnowFlake Animation
  47. GIFs and Performance
  48. Performance Audit Materialup
  49. Performance Audit Time
  50. Thank you.