1 / 62

Building A Fast Web Experience

Building A Fast Web Experience. Internet Explorer 9 Is All Around Fast. Sandeep J Alur Microsoft India. Expectations are Rising for the Web. The capabilities of the web are increasing every day, but the way we experience the web isn’t keeping up. Agenda.

farica
Download Presentation

Building A Fast Web Experience

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Building A Fast Web Experience Internet Explorer 9 Is All Around Fast Sandeep J Alur Microsoft India

  2. Expectations are Rising for the Web The capabilities of the web are increasing every day, but the way we experience the web isn’t keeping up.

  3. Agenda Case Study - The Wall Street Journal The Browser Subsystems Deep Dive – Network and Caching Subsystem Deep Dive – JavaScript Engine Deep Dive – Hardware Accelerated HTML5

  4. Example Scenario - The Wall Street Journal

  5. Some Markup Has Been Retrieved

  6. Content Starts To Render

  7. Some Images Start To Appear

  8. Mast Head Appears

  9. Right Column Starts To Render

  10. Personalized Content Starts To Appear

  11. Advertisements Load

  12. Done!

  13. Browser Subsystems • Rendering • Layout • Block Building • Formatting • DOM • Marshalling • JavaScript • Collections • CSS • HTML • Networking

  14. Picking Five Popular News Sites Wall Street Journal Chicago Tribune USA Today New York Times Washington Post CNN News Seattle Times MSN News Financial Times Boston Globe News Site #1 News Site #2 News Site #3 News Site #4 News Site #5

  15. Five Popular News Sites JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  16. Five Popular News Sites Variation in Total Size JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  17. Five Popular News Sites Number Elements to Number of CSS Rules JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  18. Five Popular News Sites Number of Images JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  19. Five Popular News Sites Amount of JavaScript JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  20. Five Popular News Sites Amount of JavaScript JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  21. Which sites loads the fastest? JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  22. Which sites loads the slowest? JQuery YUI Prototype MooTools Scriptaculous Other (JS Lib)

  23. Multi-System Performance

  24. Average Distribution Across 5 News Sites

  25. Average Distribution Across Top AJAX Sites

  26. Browser Subsystems • Rendering • Layout • Block Building • Formatting • DOM • Marshalling • JavaScript • Collections • CSS • HTML • Networking

  27. Browser Subsystems • Rendering • Layout Block Building Formatting DOM Marshalling • JavaScript Collections CSS HTML • Networking

  28. Browser Subsystems Rendering Layout Block Building Formatting DOM Marshalling JavaScript Collections CSS HTML • Networking

  29. Quick Caching Overview • First Request GET /images/banner.jpg HTTP/1.1 Host: www.microsoft.com • First Response HTTP/1.1 200 OK Content-Type: image/jpeg Expires: Fri, 30 Sep 2011 00:00:00 GMT • Second Request GET /images/banner.jpg HTTP/1.1 Host: www.microsoft.com No Response Required

  30. Better performance, with the same markup! Caching Improvements • HTTP Caching Improvements • Improve heuristic expiration • Support: crazy-far-futures Expires headers • Support: Vary: Accept-Encoding • Support Vary: Host • Improved scavenger • Redirect caching • Back/forward optimization • Cross-domain HTTPS revalidation mitigation • Parallel Connection Improvements • Increase connections-per-proxy to 12 • Speculatively pre-open additional connection • Improved LCIE connection limiting • DNS Improvements • Pre-fetch based on Link Rel=Prefetch • Pre-fetch based on likely matches in ULV flyout • Pre-fetch addresses based on previous use • Fast-path for IP literals • General Improvements • Shorter User Agent String • Gracefully handle codepage restarts • Autoproxy in the frame • Imgsrc=”” shouldn’t send a request • Issue requests on the wire earlier • Only download requires files (fonts)

  31. Network Optimizations Best Practices

  32. Minify Your JavaScript Minified JavaScript e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('y v(){a=[];b.e=\'\';9 c=1;9 i=D/2-.5;d(9 x=-i;x<=i;x++){d(9 z=-i;z<=i;z++){9 0=l.H(\'0\');0.o("n","p");0.q.s=\'r\';0.m=x;0.f=z;g(h==k){j(c){8 1:0.6=t;c++;7;8 2:0.6=F;c++;7;8 3:0.6=G;c++;7;8 4:0.6=J;c++;7;8 5:0.6=w;c=1;7}}C{0.6=I}b.B(0);a.A(0)}}E.e=a.u}') function CreateBoard() { images = []; board.innerHTML = ''; var c = 1; var i = count / 2 - .5; for (var x = -i; x <= i; x++) { for (var z = -i; z <= i; z++) { varimg = document.createElement('img'); img.setAttribute("name", "rotatingimage"); img.style.left = '5000px'; img.x3d = x; img.z3d = z; if (useBrowserLogos == true) { switch (c) { case 1: img.src = IEIMAGE; c ++; break; case 2: img.src = LOGO2; c ++; break; case 3: img.src = LOGO1; c ++; break; case 4: img.src = LOGO4; c ++; break; case 5: img.src = LOGO3; c = 1; break; } } else { img.src = IMAGE; } board.appendChild(img); images.push(img); } } countimages.innerHTML = images.length; }

  33. Reduce Network Connections <html> <head> <title>Test</title> </head> <body> … <imgsrc="a.gif" /> Item 1 <imgsrc="b.gif" /> Item 2 <imgsrc=“c.gif" /> Item 3 <imgsrc=“d.gif" /> Item 4 <imgsrc=“e.gif" /> Item 5 <imgsrc=“f.gif" /> Item 6 … </body> </html> <imgsrc="a.gif" /> Item 1 <imgsrc="b.gif" /> Item 2 <imgsrc=“c.gif" /> Item 3 <imgsrc=“d.gif" /> Item 4 <imgsrc=“e.gif" /> Item 5 <imgsrc=“f.gif" /> Item 6

  34. Reduce Network Connections Use Image Sprites

  35. Reduce Network Connections <head> <title>Test</title> <style type="text/css"> .a, .b { width: 10; height: 10 } .a, .b { background-image: "abc.gif" } .a { background-position: 0 0 } .b { background-position: 0 -10 } </style> </head> <body> … <div class="a"></div> Item 1 <div class="b"></div> Item 2 … </body> .a, .b { width: 10; height: 10 } .a, .b { background-image: "abc.gif" } .a { background-position: 0 0 } .b { background-position: 0 -10 } <div class="a"></div> <div class="b"></div>

  36. Browser Subsystems Rendering Layout Block Building Formatting DOM Marshalling • JavaScript Collections CSS HTML Networking

  37. The JavaScript Engine Foreground Source Code Parser AST ByteCode Interpreter

  38. New JavaScript Engine – “Chakra” Foreground Source Code Parser AST ByteCode Interpreter Background Compiler Native Code Background Compiled JavaScript In The Background Using Multiple Cores

  39. WebKitSunSpider JavaScript Benchmark Results Version 0.9.1, Results Generated September 4th, 2010

  40. Better performance, with the same markup! New JavaScript Engine – “Chakra” Foreground Source Code Parser AST ByteCode Interpreter Background Compiler Native Code Background Compiled JavaScript In The Background Using Multiple Cores

  41. JavaScript Best Practices

  42. Minimize Symbol Resolution • var foo • obj.foo Global DOM Intermediate Scopes Prototype Chain Cost Local Instance

  43. Minimize Symbol Resolution function WorkOnLocalVariable() { localVariable = 5; return ( localVariable + 1 ); } localVariable localVariable

  44. Minimize Symbol Resolution function WorkOnLocalVariable2() { varlocalVariable = 5; return ( localVariable + 1 ); } varlocalVariable localVariable

  45. Minimize Symbol Resolution function IterateWorkOverCollection2() { varfuncWork = Work; var length = myCollection.length; for(var i = 0; i < length; i++) { funcWork(myCollection[i]); } } varfuncWork = Work; funcWork

  46. Reduce and Remove Duplicate Scripts <html> <head> <title>Test</title> </head> <body> … … <script src=“jquery.js” … ></script> <script src=“prototype.js” … ></script> <script src=“dojo.js” … ></script> <script src=“animater.js” … ></script> <script src=“extjs.js” … ></script> <script src=“yahooui.js” … ></script> <script src=“mochikit.js” … ></script> <script src=“lightbox.js” … ></script> <script src=“jslibs.js” … ></script> <script src=“yahooui.js” … ></script> • <script src=“yahooui.js” … ></script> • <script src=“yahooui.js” … ></script>

  47. Browser Subsystems Rendering • Layout • Block Building • Formatting • DOM • Marshalling • JavaScript • Collections • CSS • HTML Networking

  48. Using The Full Power Of Your PC

  49. Everyone Has a GPU

  50. Windows Experience Index Results - GPU 15% 32% 27% 10% 4% 12% 1 2 3 4 5 6 7 8 Windows Experience Index Graphics Scores of Vista and Win7 Users

More Related