Successfully reported this slideshow.
Your SlideShare is downloading. ×

Deep dive into Front end Performance

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Performance Deep Dive

YouTube videos are no longer supported on SlideShare

View original on YouTube

Profiling
Loading in …3
×

Check these out next

1 of 66 Ad

Deep dive into Front end Performance

Download to read offline

Talk presented at JSChannel Conf 2015, discusses rendering performance and issues related to it. Performance Audits in the start discussed the networking performance of the web applications, which was followed by the issues / approaches related to rendering performance and a performance audit of a janky web application.

Talk presented at JSChannel Conf 2015, discusses rendering performance and issues related to it. Performance Audits in the start discussed the networking performance of the web applications, which was followed by the issues / approaches related to rendering performance and a performance audit of a janky web application.

Advertisement
Advertisement

More Related Content

Similar to Deep dive into Front end Performance (20)

Recently uploaded (20)

Advertisement

Deep dive into Front end Performance

  1. 1. Performance Deep Dive
  2. 2. Profiling
  3. 3. Show Paint Rectangles
  4. 4. FPS meter
  5. 5. Performance Audits
  6. 6. Google.com
  7. 7. SmashingMagazine.com 99/100 PageSpeed score
  8. 8. Google I/O 2015
  9. 9. Concepts related to Rendering Performance
  10. 10. Let’s review a pull request https://github.com/toamitkumar/jschannel2015/pull/10/files
  11. 11. Critical Rendering Path
  12. 12. Style Calculations Reference: CSSTriggers.com
  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. What are the different Performance bottlenecks?
  19. 19. Memory Leaks
  20. 20. Avoid Forced Synchronous Layouts
  21. 21. Layout Thrashing Forced synchronous layout in quick succession Demo: Animations example
  22. 22. How to avoid Layout Thrashing
  23. 23. Reducing DOM calls Consecutive DOM read/write operations trigger layout thrashing
  24. 24. Library: FastDom Eliminates layout thrashing by batching DOM read/write operations,
  25. 25. Potential Scroll Bottlenecks Demo: Repaint on Scroll
  26. 26. Debounce Input Handlers
  27. 27. Reduce Document Reflows
  28. 28. Simplify Paint Complexity
  29. 29. Reduce number of elements styled
  30. 30. Reduce complexity of CSS selectors
  31. 31. .box:nth-last-child(-n+1) .title { /* Slow selector */ } .final-box-title { /* Performant implementation */ }
  32. 32. Reduce Paint Areas
  33. 33. Avoid Large & Complex Layout
  34. 34. GPU Acceleration
  35. 35. Canvas is hardware accelerated
  36. 36. Avoid Paint Storms
  37. 37. How to perform Animation at 60fps ?
  38. 38. JS Animations
  39. 39. CSS Animations Demo: SnowFlake Animation
  40. 40. Web Animations API Demo: SnowFlake Animation
  41. 41. GIFs and Performance
  42. 42. Promote Fast performers
  43. 43. .moving-element { will-change: transform; transform: translateZ(0); }
  44. 44. So, why not Promote everyone?
  45. 45. * { will-change: transform; transform: translateZ(0); }
  46. 46. Performance Audit Materialup
  47. 47. Apoorv Saxena @apoorv_saxena
  48. 48. Thank you.

×