Browser Performance - Fundamentals, Tools & Techniques

Presentation from WordCamp NYC 2014

1. JavaScript Performance Fundamentals, Tools & Techniques Max Cutler WordCamp NYC 2014
2. Performance – multi-faceted Server-side response handling Delivery over network Client-side parsing, rendering, and interactivity
3. I thought we were at WordCamp? Rich interactivity – WordPress admin Single page applications – built on WP-API or WP.com JSON API Jank-free & mobile experiences
4. Agenda – a whirlwind tour Browser critical rendering path JavaScript execution environment Tools & techniques
5. Goals Fast initial page render Buttery smooth 60 frames per second for all user interactions
6. Critical Rendering Path
7. Browser render path HTML CSS JavaScript Render tree Layout Paint Composite DOM CSSOM Network
8. JavaScript interactivity • Manipulate DOM or CSSOM • Browser recalculates necessary part(s) of render pipeline • Lazy recalculation • When ready to render frame • When info requested from DOM
9. Cause & effect http://csstriggers.com/
10. Layout thrashing // Read var h1 = element1.clientHeight; // Write (invalidates layout) element1.style.height = (h1 * 2) + 'px'; // Read (triggers layout) var h2 = element2.clientHeight; // Write (invalidates layout) element2.style.height = (h2 * 2) + 'px'; // Read (triggers layout) var h3 = element3.clientHeight; // Write (invalidates layout) element3.style.height = (h3 * 2) + 'px'; http://wilsonpage.co.uk/preventing-layout-thrashing/
11. Layout thrashing // Read var h1 = element1.clientHeight; var h2 = element2.clientHeight; var h3 = element3.clientHeight; // Write (invalidates layout) element1.style.height = (h1 * 2) + 'px'; element2.style.height = (h2 * 2) + 'px'; element3.style.height = (h3 * 2) + 'px'; http://wilsonpage.co.uk/preventing-layout-thrashing/
12. Scrolling • Modern browsers attempt smooth scrolling by offloading to compositor thread & GPU • Onscroll event handlers block compositor @aerotwist
13. Debounce/throttle events • Scroll, mousemove, touchmove events fire dozens of times per second • Event handlers must finish quickly to avoid blocking rendering • Use timeout to debounce or throttle your real logic invocation
14. CSS animations & transitions • GPU-accelerated • transform: scale(__) • transform: translate(__px, __px) • transform: rotate(__deg) • opacity: 0 … 1 • Not accelerated • Everything else: top, left, color, font-size, height, width, … • requestAnimationFrame for manual animation or batching work • Beware jQuery.animate which uses timers by default
15. JavaScript execution environment
16. Single-threaded event loop • Browser maintains a queue of callbacks • Events (network, storage, UI, etc.) enqueue callback of their handlers in the queue • Browser iterates through queue, allowing each callback to run to completion before invoking the next one • Slow code blocks handling of other callbacks http://bit.ly/1ksi97h https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/EventLoop
17. Execution environment JavaScript VM JIT-compiled or interpreted JavaScript code DOM and native APIs C++ implementation in browser Foo() Bar() DOMElement.offsetWidth Fast Slower
18. Garbage collection • JS heap – long-lived objects • Objects kept in heap while other objects have references to them • Event loop & script execution paused during GC pass • Common causes of leaks • Never unsubscribe from event • Hold reference to detached DOM elements • Dispose pattern • Each object is responsible for disposing itself and any children it created during its lifetime https://developer.chrome.com/devtools/docs/ javascript-memory-profiling
19. Tools & analysis techniques Browser engines are constantly changing, so it’s better to know how to profile and analyze than to rely on dogmatic rules
20. When in doubt, measure it When not in doubt, measure it anyway http://aerotwist.com/blog/dont-guess-it-test-it/
21. Browser developer tools – Chrome https://developer.chrome.com/devtools/index
22. Browser developer tools – IE11 http://msdn.microsoft.com/en-us/library/ie/bg182632.aspx
23. Browser developer tools – Firefox https://developer.mozilla.org/en-US/docs/Tools
24. Timeline/responsiveness https://developer.chrome.com/devtools/docs/timeline http://msdn.microsoft.com/en-us/library/ie/dn255009.aspx
25. Continuous paint mode https://developer.mozilla.org/en-US/docs/Tools/Paint_Flashing_Tool https://developer.chrome.com/devtools/docs/rendering-settings
26. CPU profiler http://msdn.microsoft.com/en-us/library/ie/dn255005.aspx https://developer.chrome.com/devtools/docs/cpu-profiling
27. CPU profiler – console API • console.profile(name) + console.profileEnd(name) • console.time(name) + console.timeEnd(name) • console.timeStamp() • Chrome console API docs: https://developer.chrome.com/devtools/docs/console-api • IE console API docs: http://msdn.microsoft.com/en-us/library/ie/dn265020.aspx • Firefox console API docs: https://developer.mozilla.org/en-US/docs/Tools/Web_Console
28. HTML5 User Timing API • performance.now() – high-resolution timestamps • performance.mark(name) • performance.measure(name, mark1, mark2) • http://www.html5rocks.com/en/tutorials/webperformance/usertiming/ • See also, Navigation Timing and Resource Timing APIs
29. jsperf.com • JS microbenchmarks • Community-generated test cases
30. Heap snapshots http://msdn.microsoft.com/en-us/library/ie/dn255003.aspx https://developer.chrome.com/devtools/docs/javascript-memory-profiling
31. Memory leak investigation • Perform scenario once • Take snapshot • Perform scenario 1-3 times • Take another snapshot • Compare the two snapshots • Diff count • Object retention paths
32. Demos
33. Takeaways Performance matters, especially on mobile JS micro-optimizations often dwarfed by render path optimizations Know your tools, use them early and often
34. Resources • http://jankfree.org/ • http://csstriggers.com/ • https://developers.google.com/web/fundamentals/performance/ • http://calendar.perfplanet.com/ • http://calendar.perfplanet.com/2013/the-runtime-performance-checklist/ • #perfmatters