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.

Transcript

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