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

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

Example Scenario - The Wall Street Journal 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 Collections JavaScript Marshalling HTML CSS DOM Layout Formatting Block Building Rendering Networking

Picking Five Popular News Sites 14 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 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb ,216 News Site #2961kb ,812 News Site #3300kb ,481 News Site #41462kb ,988 News Site #52981kb ,722 Five Popular News Sites JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

Variation in Total Size 16 Five Popular News Sites Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb ,216 News Site #2961kb ,812 News Site #3300kb ,481 News Site #41462kb ,988 News Site #52981kb ,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

Number Elements to Number of CSS Rules 17 Five Popular News Sites Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb ,216 News Site #2961kb ,812 News Site #3300kb ,481 News Site #41462kb ,988 News Site #52981kb ,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

Number of Images 18 Five Popular News Sites Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb ,216 News Site #2961kb ,812 News Site #3300kb ,481 News Site #41462kb ,988 News Site #52981kb ,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

Amount of JavaScript 19 Five Popular News Sites Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb ,216 News Site #2961kb ,812 News Site #3300kb ,481 News Site #41462kb ,988 News Site #52981kb ,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

Amount of JavaScript 20 Five Popular News Sites Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb ,216 News Site #2961kb ,812 News Site #3300kb ,481 News Site #41462kb ,988 News Site #52981kb ,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

21 Which sites loads the fastest? Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb ,216 News Site #2961kb ,812 News Site #3300kb ,481 News Site #41462kb ,988 News Site #52981kb ,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

22 Which sites loads the slowest? Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #13280kb ,216 News Site #2961kb ,812 News Site #3300kb ,481 News Site #41462kb ,988 News Site #52981kb ,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI

23 Multi-System Performance

24 Average Distribution Across 5 News Sites

Average Distribution Across Top AJAX Sites 25

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

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

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

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

Better performance, with the same markup! Caching Improvements 30 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 Img src=”” shouldn’t send a request Issue requests on the wire earlier Only download requires files (fonts)

Network Optimizations Best Practices

32 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++) { var img = 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; } Minify Your JavaScript e=function(c){return(c 35?String.fromCharCode(c+29):c.to String(36))};if(!''.replace(/^/,String)){whi le(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}') Minified JavaScript

33 Test … Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 … Reduce Network Connections Item 1 Item 1 Item 2 Item 2 Item 3 Item 3 Item 4 Item 4 Item 5 Item 5 Item 6 Item 6 Item 1 Item 1 Item 2 Item 2 Item 3 Item 3 Item 4 Item 4 Item 5 Item 5 Item 6 Item 6

Reduce Network Connections Use Image Sprites 34

35 Test.a,.b { width: 10; height: 10 }.a,.b { background-image: "abc.gif" }.a { background-position: 0 0 }.b { background-position: } … Item 1 Item 2 … Reduce Network Connections.a,.b { width: 10; height: 10 }.a,.b { background-image: "abc.gif" }.a { background-position: 0 0 }.b { background-position: }.a,.b { width: 10; height: 10 }.a,.b { background-image: "abc.gif" }.a { background-position: 0 0 }.b { background-position: }

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

The JavaScript Engine 37 Source Code ParserASTInterpreterByteCode Foreground

Source Code ParserASTInterpreterByteCode Foreground New JavaScript Engine – “Chakra” 38 Background Background Compiler Native Code Compiled JavaScriptIn The BackgroundUsing Multiple Cores

WebKit SunSpider JavaScript Benchmark Results Version 0.9.1, Results Generated September 4 th,

Better performance, with the same markup! New JavaScript Engine – “Chakra” Source Code ParserASTInterpreterByteCode Foreground 40 Background Background Compiler Native Code Compiled JavaScriptIn The BackgroundUsing Multiple Cores

JavaScript Best Practices

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

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

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

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

46 Test … Reduce and Remove Duplicate Scripts

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

Using The Full Power Of Your PC 48

Everyone Has a GPU 49

Windows Experience Index Results - GPU 50 Windows Experience Index Graphics Scores of Vista and Win7 Users 4% 15%32%27% 12% 10%

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

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

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

Layout & Rendering Best Practices

Encoding Video 55

56 Using Script To Determine If A Video Code Is Supported try { var v = document.createElement("video"); if (v && v.canPlayType && v.canPlayType("video/mp4").match(/^(probably|maybe)$/i)) { // Browser can likely play MPEG-4 video } else { // Browser cannot play MPEG-4 video } catch (e) { // Exception when testing for MPEG-4 Playback } Providing Multiple Video Sources To Support Multiple Browsers Providing Video

57 function BuildUI() { var elm = document.getElementById('ui'); // Clear existing contents elm.innerHTML = ''; // Generate UI elm.innerHTML += BuildTitle(); elm.innerHTML += BuildBody(); elm.innerHTML += BuildFooter(); } Batch Visual Changes +=+=+= = 7 innerHTML References 3 Visual Changes

58 function BuildUI2() { var elm = document.getElementById('ui'); // Generate UI var contents = BuildTitle() + BuildBody() + BuildFooter(); // Replace existing contents with UI elm.innerHTML = contents; } Batch Visual Changes = 1 innerHTML Reference 1 Visual Update

Internet Explorer 9 59 Network and CachingChakra, the new JavaScript Engine Hardware Accelerated Graphics

Internet Explorer 9 Beta: Now Available 60 Migrate your applications off Internet Explorer 6 Develop for standards first! Download and install the Internet Explorer 9 Beta and test your site! Learn more at… 60

Questions

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Internet Explorer and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.