Runtime performance evaluation of Javascript Applications

Runtime performance evaluation of Javascript Applications

Optimising for faster page loads is just one part of providing users with a great web experience. For the complete and perfect experience, the web application has to be fast, reliable and performant at both load and run times.

In this session, we'll learn about tools and strategies to identify and fix common problems that slow down runtime performance.
We'll learn how to speed up JavaScript execution, the best practices to writing code that does not introduce performance bottlenecks, and most importantly how to profile and get rid of runtime performance issues from our web applications.

Db8cae6201e0cf535406e6c78e603ede?s=128

Kati Frantz

November 09, 2019
Tweet

Transcript

  1. None
  2. Runtime performance evaluation of JavaScript applications Writing better JavaScript to

    optimize runtime user experience
  3. Frantz Kati @bahdcoder katifrantz.com nesabox.com

  4. Performance matters more than ever before

  5. Performance concerns Loading performance Runtime performance

  6. Why runtime performance matters Retain users Better user experience Better

    usage of device resources
  7. How the browser renders at runtime - the pixel pipeline

  8. How the browser renders at runtime - the pixel pipeline

  9. How the browser renders at runtime - the pixel pipeline

  10. How the browser renders at runtime - Frame rates 60fps

    is required for a non janky , silky smooth UI The browser takes ~16ms to make a frame We have ~12ms on our part to make a frame
  11. JAVASCRIPT Analyse JavaScript performance with devtools Offload long running tasks

    to web workers Write memory efficient applications Demos here runtime-talk.katifrantz.com
  12. RECALCULATING STYLES AND LAYOUT Use better selector matching. Use BEM

    The less elements affected, the better. Demos here runtime-talk.katifrantz.com
  13. RECALCULATING STYLES AND LAYOUT ➔Watch out for forced synchronous layout

    Demos here runtime-talk.katifrantz.com
  14. PAINT AND COMPOSITE Avoid paint when you can. It’s expensive

    Promote elements with will-change Stick to transform and opacity for animations
  15. RESOURCES Udacity free courses on web performance Google web fundamentals

    Me
  16. THANK YOU