Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Full Stack Web Performance

Full Stack Web Performance

Modern users expect more than ever from web applications. Unfortunately, they are also consuming applications more frequently from low bandwidth and low power devices – which strains developers not only to nail the user experience, but also the application’s performance.

Join Nik Molnar, co-founder of the open source debugging and diagnostics tool Glimpse, for an example-driven look at strategies and techniques for improving the performance of your web application all the way from the browser to the server.

We’ll cover how to use client and server side profiling tools to pinpoint opportunities for improvement, solutions to the most common performance problems, and some suggestions for getting ahead of the curve and actually surpassing user’s expectations.

This session covers a wide array of topics, most of which would be classified within the 200 level.

Nik Molnar

June 05, 2014
Tweet

More Decks by Nik Molnar

Other Decks in Technology

Transcript

  1. NIKMD23 #PERFMATTERS physiological safety belonging esteem self-actualization functional reliable usable

    “performant” pleasurable humans users http://bit.ly/userNeedsHierarchy
  2. NIKMD23 #PERFMATTERS physiological safety belonging esteem self-actualization functional reliable usable

    “performant” pleasurable humans users http://bit.ly/userNeedsHierarchy
  3. <SCRIPT ASYNC> + <IMG LAZYLOAD> <script async src="http://3rd-party.com/some.js"></script> <img lazyload="1"

    src="http://3rd-party.com/some.png"/> NIKMD23 #PERFMATTERS http://bit.ly/resourcePriorities
  4. NETWORK FEWER REQUESTS • COMBINE TEXT ASSETS • SPRINT IMAGES

    • ENABLE HTTP CACHING SMALLER PAYLOADS • MINIFY TEXT ASSETS • OPTIMIZE IMAGES • ENABLE COMPRESSION PROCRASTINATE • ASYNC SCRIPTS • MIND THE FOLD ANTICIPATE • PRERESOLVE • PRERENDER • PREFETCH • STREAM/FLUSH HTML NIKMD23 #PERFMATTERS
  5. SERVER STAY LOCAL • STAY IN PROCESS IF POSSIBLE ITERATE

    LESS • LOWERING HIT COUNT IS USUALLY EASIER CACHE LIBERALLY • DON‘T DO WORK IF YOU DON’T HAVE TO STREAM • LOADING LOTS OF DATA AT ONCE IS SLOW MISCELLANEOUS • USE STRING BUILDER • EXCEPTIONS SHOULD BE EXCEPTIONAL • BUILD IN RELEASE MODE • AND MANY MORE… NIKMD23 #PERFMATTERS http://bit.ly/dotnetOptimization
  6. COMPUTE SCOPE MANAGEMENT • FAVOR LOCAL VAR’S • AVOID with()

    STATEMENT • CAREFUL W/ CLOSURES LOOPING • AVOID for…in LOOPS AVOID DOM! • LET’S DIG INTO THIS ONE… NIKMD23 #PERFMATTERS
  7. ▪ NETWORK ACTIVITY ▪ JAVASCRIPT ▪ RECALCULATE STYLE & LAYOUT

    ▪ PAINT SETUP, PAINT & COMPOSITE LAYERS ▪ UN-INSTRUMENTED ACTIVITY IDLE TIME NIKMD23 #PERFMATTERS http://bit.ly/howBrowsersWork
  8. NIKMD23 #PERFMATTERS 16 ms 16 ms 16 ms 16 ms

    16 ms rAF JS Paint requestAnimationFrame()
  9. NIKMD23 #PERFMATTERS 16 ms 16 ms 16 ms 16 ms

    16 ms rAF JS Paint rAF JS Paint rAF JS Paint dropped frame rAF
  10. REQUEST ANIMATION FRAME function onScroll (evt) { lastScrollY = window.scrollY;

    // Store the scroll value for later. if (scheduledAnimationFrame) return; // Prevent multiple rAF callbacks. scheduledAnimationFrame = true; requestAnimationFrame(updateLeagueBadge); } NIKMD23 #PERFMATTERS
  11. LAYOUT THRASHING for (var i = 0; p < paragraphs.length;

    i++) { var para = paragraphs[i], width = div.offsetWidth; para.style.left = width + 'px'; } NIKMD23 #PERFMATTERS
  12. LAYOUT THRASHING var width = div.offsetWidth; for (var i =

    0; p < paragraphs.length; i++) { var para = paragraphs[i]; para.style.left = width + 'px'; } NIKMD23 #PERFMATTERS
  13. LAYER PROMOTION • -webkit-transform:translateZ(0); • <video> ELEMENT • <canvas> ELEMENT

    • COMPOSITED PLUGINS • CSS OPACITY ANIMATION • ANIMATED WEBKIT TRANSFORM • ACCELERATED CSS FILTERS • ELEMENTS ON TOP OF ANOTHER LAYER • WILL-CHANGE SPEC? NIKMD23 #PERFMATTERS
  14. CAUSE + EFFECT .items div { width: 60px; color: #FFF;

    opacity: 0.4; } NIKMD23 #PERFMATTERS ▪ Recalculate Style ▪ Layout ▪ Paint ▪ Composite http://bit.ly/highPerfPaints