1 / 56

Internet Explorer 9: Faster Websites with IE9

Internet Explorer 9: Faster Websites with IE9. Aditee Rele Architect Evangelist. Agenda. IE9 – a quick look Performance Improvement Network optimization JavaScript engine Layout & Rendering.

dash
Download Presentation

Internet Explorer 9: Faster Websites with IE9

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. Internet Explorer 9: Faster Websites with IE9 Aditee Rele Architect Evangelist

  2. Agenda • IE9 – a quick look • Performance Improvement • Network optimization • JavaScript engine • Layout & Rendering

  3. The capabilities of the web are increasing every day, but the way we experience the web isn’t keeping up.

  4. Some Markup Has Been Retrieved

  5. Content Starts To Render

  6. Some Images Start To Appear

  7. Mast Head Appears

  8. Right Column Starts To Render

  9. Personalized Content Starts To Appear

  10. Advertisements Load

  11. Done!

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

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

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

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

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

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

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

  19. Multi-System Performance

  20. Average Distribution Across 5 News Sites

  21. Average Distribution Across Top AJAX Sites

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

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

  24. 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

  25. 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)

  26. JavaScript Best Practices

  27. 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; }

  28. 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

  29. Reduce Network Connections Use Image Sprites

  30. 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>

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

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

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

  34. Chakra – The New JavaScript engine • JavaScript Background Compilation • Compiles JavaScript source code into native machine code • A new interpreter for executing script on traditional web pages • Type optimizations • Type Representations • Polymorphic inline caching • Fast interpreter – • Register based layout, • Efficient opcode • Library optimizations • Tons of improvements to the JavaScript runtime and libraries

  35. WebKitSunSpider JavaScript Benchmark Results

  36. JavaScript Best Practices

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

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

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

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

  41. 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>

  42. Flying Images – One Animation IE8 IE9

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

  44. Using The Full Power of Your PC

  45. Understanding GPU Acceleration Images & video are downloaded, decoded & transferred into intermediate GPU buffers Complex page elements (incl. canvas & SVG) are drawn into intermediate GPU buffers Simple page elements are drawn directly to Web page buffer Intermediate GPU buffers are composited with directly-drawn content to form the visible Web page Windows Desktop Windows Manager composes the final screen 1 2 3 4 5 Content Rendering Page Composition Desktop Composition

  46. Full vs. Partial Acceleration Internet Explorer 9 provides full hardware acceleration

  47. Building Better Experiences With The GPU Don’t be afraid of high resolution images Use the GPU to scale and resize images Use lots of alpha to create beautiful compositions

  48. Layout & Rendering Best Practices

  49. Encoding Video

More Related