High Performance Kick Ass Web Apps (JavaScript edition)

download High Performance Kick Ass Web Apps (JavaScript edition)

of 87

  • date post

    08-Sep-2014
  • Category

    Technology

  • view

    36
  • download

    2

Embed Size (px)

description

Slides from JSConf 2009 presentation "High Performance Kick Ass Web Apps" with focus on JavaScript.

Transcript of High Performance Kick Ass Web Apps (JavaScript edition)

  • High-Performance Kick-Ass Web Apps (with focus on JavaScript)Stoyan Stefanov, @stoyanstefanov April 25, 2009 JSConf, Washington, D.C.

About me Yahoo! Search Yahoo! ExceptionalPerformance YSlow 2.0 architect http://smush.it Books, articles http://phpied.com Importance of performance 500 ms slower = 20% drop in traffic (Google) Importance of performance 500 ms slower = 20% drop in traffic (Google) 400 ms slower = 5-9% drop in full-page traffic (Yahoo!) Importance of performance 500 ms slower = 20% drop in traffic (Google) 400 ms slower = 5-9% drop in full-page traffic (Yahoo!) 100 ms slower = 1% drop in sales (Amazon) Importance of performance Self-regulating system Slow down = lose users Its about user experience The premature optimization is the root of all evil Knuth Make it right before you make it fast Crockford Pick your battles measure profile monitor On trade-offs everything has its drawbacks, as the man said when his mother-in-law died, and they came upon him for the funeral expenses.Jerome K. Jerome Three Man in a Boat The Life of Page 2.0HTMLpagerequest onloadsettles requestsentmarriage? R.I.P. conception birthgraduationUser perceivedonload happenssomewhere here The waterfall The Waterfall 1. Less stuff 2. Smaller stuff 3. Out of the way 4. Start early The Waterfall 1. Less stuff 2. Smaller stuff 3. Out of the way 4. Start early Less HTTP requests Combine components Less HTTP requests Before: Less HTTP requests After: Less HTTP requests You just saved 3 HTTP requests Less HTTP requests repeat for CSS: Less HTTP requests Inline images:CSS spriteswith data: URI scheme Less HTTP requests data: URI scheme$phprquot;echobase64_encode(file_get_contents('my.png')); iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4 DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC Less HTTP requests data: URI schemebackgroundimage:url(quot;data:image/png;base64,iVBORw0KG...quot;); Less HTTP requests data: URI scheme Less HTTP requests data: URI scheme works in IE!... Less HTTP requests data: URI scheme works in IE8! Less HTTP requests data: URI scheme MHTML for IE < 8 http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/ http://www.hedgerwow.com/360/dhtml/base64-image/demo.php Less stuff? Cache Cache is less universal than we think You can help http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ never expire policy Static components with far- future Expires header JS, CSS, imgExpiresActiveOn ExpiresByTypeimage/pngquot;accessplus10yearsquot; Inline vs. external a.k.a. less http vs. more cache how about both? Inline vs. external First visit: 1. Inline 2. Lazy-load the external file 3. Write a cookie Inline vs. external Later visits: 1. Read cookie 2. Refer to the external file The Waterfall 1. Less stuff 2. Smaller stuff 3. Out of the way 4. Start early The Waterfall 1. Less stuff 2. Smaller stuff 3. Out of the way 4. Start early GzipSource: Bill Scott, Netflix Minify Before /** *Thedommoduleprovideshelpermethodsfor *manipulatingDomelements. *@moduledom * */(function(){ varY=YAHOO.util,//internalshorthand getStyle,//forloadtimebrowserbranching setStyle,//ditto propertyCache={},//forfasterhyphenconverts reClassNameCache={},//cacheregexesforclassName document=window.document;//cacheforfasterlookupsYAHOO.env._id_counter=YAHOO.env._id_counter||0; Minify After (function(){var B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.en v._id_counter||0; Minify YUI Compressor Minifies JS and CSS Tolerates * and _ hacks More than minification Minify Minify inline code too Gzip or minification? 62,885 bytes - original jQuery (back in Aug 2007) 31,822 - minified with the YUI Compressor 19,758 - original gzipped 10,818 - minified and gzippedFTW http://www.julienlecomte.net/blog/2007/08/13/ 204 The worlds smallest component? 204 No Contenthttp://www.phpied.com/204-no-content/ The Waterfall 1. Less stuff 2. Smaller stuff 3. Out of the way 4. Start early The Waterfall 1. Less stuff 2. Smaller stuff 3. Out of the way 4. Start early Free-falling waterfalls Less DNS lookups fetchcomponents from not morethan 2-4 domains Less redirects Blocking JavaScript Not free-falling JavaScript rocks! But also blocks html jspng png Non-blocking JavaScript Include via DOMhtml jspngpng varjs=document.createElement('script'); js.src='myscript.js'; varh=document.getElementsByTagName('head')[0]; h.appendChild(js); Non-blocking JavaScript And what about my inlinescripts? Setup a collection (registry)of inline scripts Step 1 Inline in the :varmyapp={ stuff:[] }; Step 2 Add to the registryInstead of: Do: Step 3 Execute allvarl=myapp.stuff.length; for(vari=0,i