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.
Performance beyond
Page Load
Apoorv Saxena
@apoorv_saxena
Kickstart the talk!
Let the data speak!
Not impressed ?
At EdgeConf 2012,
Facebook confirmed this when it
mentioned that in an A/B test, it slowed
down scrolling from 60fps to 30...
What is smooth interaction?
Devices refresh their screen 60 times a second.
Thus, frame budget for smooth interaction is 1...
Jank
When failing to meet the frame budget of
10ms, we come across
Rendering Performance
Let’s build smooth interaction experiences
16ms isn’t a lot of time
In a Nutshell..
Pixel Pipeline
Layout
width overflow height
padding font-family margin
display vertical-align border-width
border clear top
position bottom font...
Painting
color border-style
visibility background
text-decoration background-image
background-position background-repeat
outline-co...
Composting
Tools at hand
FPS meter
Profiling with Timeline
Show Paint Rectangles
Things we intend to achieve
Smooth Scrolling
What can cause Jank during scroll?
Processing that consumes more than 16ms:
● Time consuming operations e.g. Garbage Colle...
Smooth Animation
What can cause Jank during animation?
Triggering any other operation that can
cause the animation to exceed its frame
budg...
Smooth Interaction
What can cause Jank during interaction with page?
Synchronous operation(s) inside the event
handler that exceeds the curre...
Best practices related to
Rendering Performance
Avoid Memory Leaks
Reducing DOM calls
Writing / Reading frequently to/from DOM is a bad
practice
Forced Synchronous Layout
DOM write operation followed by a DOM read operation
for a layout property of a DOM element
Layout Thrashing
Forced synchronous layout in quick succession
Demo: Animations example
How to avoid
Layout Thrashing
Library: FastDom
Eliminates layout thrashing by batching DOM
read/write operations,
Potential Scroll Bottlenecks
Demo: Repaint on Scroll
Debounce Input Handlers
Reduce Paint Areas
Avoid Paint Storms
How to run Animations at
60fps ?
GPU Acceleration
Canvas is
hardware accelerated
JS Animations
CSS Animations
Demo: SnowFlake Animation
Style Calculations
Reference: CSSTriggers.com
Web Animations API
Demo: SnowFlake Animation
GIFs and Performance
Performance Audit
Materialup
Performance Audit
Time
Thank you.
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)
Performance beyond page load (jQuery Conference)
Upcoming SlideShare
Loading in …5
×

Performance beyond page load (jQuery Conference)

1,439 views

Published on

Talk to be presented at jQuery Conference on 24th July. It discusses the potential issues that hamper the rendering performance, and also their respective remedies.

Published in: Internet
  • Be the first to comment

Performance beyond page load (jQuery Conference)

  1. 1. Performance beyond Page Load Apoorv Saxena
  2. 2. @apoorv_saxena
  3. 3. Kickstart the talk!
  4. 4. Let the data speak!
  5. 5. Not impressed ?
  6. 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. 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. 8. Jank When failing to meet the frame budget of 10ms, we come across
  9. 9. Rendering Performance Let’s build smooth interaction experiences
  10. 10. 16ms isn’t a lot of time
  11. 11. In a Nutshell..
  12. 12. Pixel Pipeline
  13. 13. Layout
  14. 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. 15. Painting
  16. 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. 17. Composting
  18. 18. Tools at hand
  19. 19. FPS meter
  20. 20. Profiling with Timeline
  21. 21. Show Paint Rectangles
  22. 22. Things we intend to achieve
  23. 23. Smooth Scrolling
  24. 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. 25. Smooth Animation
  26. 26. What can cause Jank during animation? Triggering any other operation that can cause the animation to exceed its frame budget.
  27. 27. Smooth Interaction
  28. 28. What can cause Jank during interaction with page? Synchronous operation(s) inside the event handler that exceeds the current frame budget.
  29. 29. Best practices related to Rendering Performance
  30. 30. Avoid Memory Leaks
  31. 31. Reducing DOM calls Writing / Reading frequently to/from DOM is a bad practice
  32. 32. Forced Synchronous Layout DOM write operation followed by a DOM read operation for a layout property of a DOM element
  33. 33. Layout Thrashing Forced synchronous layout in quick succession Demo: Animations example
  34. 34. How to avoid Layout Thrashing
  35. 35. Library: FastDom Eliminates layout thrashing by batching DOM read/write operations,
  36. 36. Potential Scroll Bottlenecks Demo: Repaint on Scroll
  37. 37. Debounce Input Handlers
  38. 38. Reduce Paint Areas
  39. 39. Avoid Paint Storms
  40. 40. How to run Animations at 60fps ?
  41. 41. GPU Acceleration
  42. 42. Canvas is hardware accelerated
  43. 43. JS Animations
  44. 44. CSS Animations Demo: SnowFlake Animation
  45. 45. Style Calculations Reference: CSSTriggers.com
  46. 46. Web Animations API Demo: SnowFlake Animation
  47. 47. GIFs and Performance
  48. 48. Performance Audit Materialup
  49. 49. Performance Audit Time
  50. 50. Thank you.

×