JavaScript Performance Fundamentals, Tools & Techniques Max Cutler WordCamp NYC 2014 

Performance – multi-faceted Server-side response handling Delivery over network Client-side parsing, rendering, and interactivity 

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 

Agenda – a whirlwind tour Browser critical rendering path JavaScript execution environment Tools & techniques 

Goals Fast initial page render Buttery smooth 60 frames per second for all user interactions 

Critical Rendering Path 

Browser render path HTML CSS JavaScript Render tree Layout Paint Composite DOM CSSOM Network 

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 

Cause & effect http://csstriggers.com/ 

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/ 

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/ 

Scrolling • Modern browsers attempt smooth scrolling by offloading to compositor thread & GPU • Onscroll event handlers block compositor @aerotwist 

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 

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 

JavaScript execution environment 

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 

Execution environment JavaScript VM JIT-compiled or interpreted JavaScript code DOM and native APIs C++ implementation in browser Foo() Bar() DOMElement.offsetWidth Fast Slower 

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 

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 

When in doubt, measure it When not in doubt, measure it anyway http://aerotwist.com/blog/dont-guess-it-test-it/ 

Browser developer tools – Chrome https://developer.chrome.com/devtools/index 

Browser developer tools – IE11 http://msdn.microsoft.com/en-us/library/ie/bg182632.aspx 

Browser developer tools – Firefox https://developer.mozilla.org/en-US/docs/Tools 

Timeline/responsiveness https://developer.chrome.com/devtools/docs/timeline http://msdn.microsoft.com/en-us/library/ie/dn255009.aspx 

Continuous paint mode https://developer.mozilla.org/en-US/docs/Tools/Paint_Flashing_Tool https://developer.chrome.com/devtools/docs/rendering-settings 

CPU profiler http://msdn.microsoft.com/en-us/library/ie/dn255005.aspx https://developer.chrome.com/devtools/docs/cpu-profiling 

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 

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 

jsperf.com • JS microbenchmarks • Community-generated test cases 

Heap snapshots http://msdn.microsoft.com/en-us/library/ie/dn255003.aspx https://developer.chrome.com/devtools/docs/javascript-memory-profiling 

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 

Demos 

Takeaways Performance matters, especially on mobile JS micro-optimizations often dwarfed by render path optimizations Know your tools, use them early and often 

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