High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft
Session Objectives 1)Best Practices to Improve Performance Inside look at browser performance Specific things that you can do today Principles behind the optimizations 2)Preview Internet Explorer 9 Performance Hardware Accelerated HTML5 GPU Powered Graphics Compiled JavaScript
I have a lot of content…
Section #1: Best Practices for Improving Performance
Example Scenario – Wall Street Journal Starting with Bing
Example Scenario – Wall Street Journal Blank Background
Example Scenario – Wall Street Journal Initial HTML
Example Scenario – Wall Street Journal Heading Appears
Example Scenario – Wall Street Journal Initial Content
Example Scenario – Wall Street Journal Right Column Lays Out
Example Scenario – Wall Street Journal Media Appears
Example Scenario – Wall Street Journal Customized Content
Example Scenario – Wall Street Journal Advertisements
Example Scenario – Wall Street Journal Interacting with Website
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 15 News Site #1 News Site #2 News Site #3 News Site #4 News Site #5
Five Popular News Sites 16 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb ,216 News Site #2 961kb ,812 News Site #3 300kb ,481 News Site #4 1462kb ,988 News Site #5 2981kb ,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI
Five Popular News Sites Variation in Total Size 17 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb ,216 News Site #2 961kb ,812 News Site #3 300kb ,481 News Site #4 1462kb ,988 News Site #5 2981kb ,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI
Five Popular News Sites Number Elements to Number of CSS Rules 18 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb ,216 News Site #2 961kb ,812 News Site #3 300kb ,481 News Site #4 1462kb ,988 News Site #5 2981kb ,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI
Five Popular News Sites Number of Images 19 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb ,216 News Site #2 961kb ,812 News Site #3 300kb ,481 News Site #4 1462kb ,988 News Site #5 2981kb ,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI
Five Popular News Sites Amount of JavaScript 20 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb ,216 News Site #2 961kb ,812 News Site #3 300kb ,481 News Site #4 1462kb ,988 News Site #5 2981kb ,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI
Five Popular News Sites Amount of JavaScript 21 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb ,216 News Site #2 961kb ,812 News Site #3 300kb ,481 News Site #4 1462kb ,988 News Site #5 2981kb ,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI
Which sites loads the fastest? 22 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb ,216 News Site #2 961kb ,812 News Site #3 300kb ,481 News Site #4 1462kb ,988 News Site #5 2981kb ,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI
Which sites loads the slowest? 23 Total Size Number Elements CSS Rules Image Files Script Files Script Lines Script Libs News Site #1 3280kb ,216 News Site #2 961kb ,812 News Site #3 300kb ,481 News Site #4 1462kb ,988 News Site #5 2981kb ,722 JQueryPrototypeMooToolsScriptaculousOther (JS Lib)YUI
Internet Explorer 8 Subsystem Distribution 24
Average Distribution Across 5 News Sites 25
Average Distribution Across Top AJAX Sites 26
27 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems
28 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems
Request GET / HTTP/1.1 Accept: */* Accept-Language: en-us UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible…) Host: Response HTTP/ OK Content-Length: 3479 Expires: -1 Date: Sun, 14 Mar :30:46 GMT Content-Type: text/html; charset=utf-8 Pragma: no-cache Content-Encoding: gzip Accept-Encoding: gzip, deflate Content-Encoding: gzip
First Request GET /images/banner.jpg HTTP/1.1 Host: First Response HTTP/ OK Content-Type: image/jpeg Expires: Fri, 19 Mar :00:00 GMT Second Request GET /images/banner.jpg HTTP/1.1 Host: No Response Required
Request GET /images/banner.jpg HTTP/1.1 Host: If-Modified-Since: Sun, 14 Mar :30:46 GMT Response HTTP/ Not Modified Content-Type: image/jpeg Last-Modified: Sun, 14 Mar :30:46 GMT If-Modified-Since: Sun, 14 Mar :30:46 GMT If-Modified-Since: Sun, 14 Mar :30:46 GMT Last-Modified: Sun, 14 Mar :30:46 GMT Last-Modified: Sun, 14 Mar :30:46 GMT
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; } e=function(c){return(c 35?String.fromChar Code(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}') Original JavaScriptMinified JavaScript
Test … … width="50" height="40" 500 x 400
Test … … width="50" height="40" 50 x 40
Test … Item 1 Item 2 Item 3 Item 4 Item 5 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 Item 1 Item 1 Item 2 Item 2 Item 3 Item 3 Item 4 Item 4 Item 5 Item 5 Item 6 Item 6
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 ….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: }
39 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems
Test … </script> </script>
Test …
Test …
Test … defer="defer">defer="defer">
44 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems
Test <!--.green { color:#009900;}.red { color:#660000;} --> … <!--.green { color:#009900;}.red { color:#660000;} --> <!--.green { color:#009900;}.red { color:#660000;} -->
Test …
Test …
@import url(/stylesheets/two.css);.MyHeading { color: red; font-family: 'New Century Schoolbook', serif; background: white; url(/stylesheets/two.css);
Test …
50 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems
51 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems
GlobalGlobal LocalLocal IntermediateScopesIntermediateScopes DOMDOM InstanceInstance PrototypeChainPrototypeChain CostCost var fooobj.foo
function WorkOnLocalVariable() { localVariable = 5; return ( localVariable + 1 ); } localVariablelocalVariable localVariablelocalVariable
function WorkOnLocalVariable2() { var localVariable = 5; return ( localVariable + 1 ); } var localVariable localVariablelocalVariable
function IterateWorkOverCollection() { var length = myCollection.length; for(var i = 0; i < length; i++) { Work(myCollection[i]); } WorkWork
function IterateWorkOverCollection2() { var funcWork = Work; var length = myCollection.length; for(var i = 0; i < length; i++) { funcWork(myCollection[i]); } var funcWork = Work; funcWorkfuncWork
var jsObjStringParsed = JSON.parse(jsObjString); var jsObjStringBack = JSON.stringify(jsObjStringParsed); JSON.parseJSON.parse JSON.stringifyJSON.stringify
Test …
Test …
60 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems
Trident (MSHTML) JScript Engine DOMDOM
function CalculateSum() { // Retrieve Values var lSide = document.body.all.lSide.value; var rSide = document.body.all.rSide.value; // Generate Result document.body.all.result.value = lSide + rSide; } document.body.alldocument.body.all document.body.alldocument.body.all document.body.alldocument.body.all 9 DOM Lookups
function CalculateSum2() { // Cache Element Collection var elms = document.body.all; // Retrieve Values var lSide = elms.lSide.value; var rSide = elms.rSide.value; // Generate Result elms.result.value = lSide + rSide; } var elms = document.body.all; elmselms elmselms elmselms 3 DOM Lookups
64 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems
function LoopChildren(elm) { var nodes = elm.childNodes; var length = nodes.length; for(var i = 0; i < length; i++) { var node = nodes[i]; … } nodes[i];nodes[i];
function LoopChildren2(elm) { var node = elm.firstChild; while(node != null) { … node = node.nextSibling; } node.nextSibling;node.nextSibling;
function doValidation2() { // Retrieve the required elements by using Selectors // Selects all form fields with 'required' classes var reqs = document.querySelectorAll(".required"); // Set the flag to false by default var missingRequiredField = false; // Validate that the form data is not empty for (var i = 0; i < reqs.length; i++) { if (reqs[i].value == "") missingRequiredField = true; } document.querySelectorAlldocument.querySelectorAll
68 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems
/* These styles are for the home page. */.Homepage { color: red; background: white; } … /* These styles are for the content page. */.Contentpage { color: red; background: white; } /* These styles are for the home page. */ /* These styles are for the content page. */
Complex element selectors are slow When possible Use class – or ID-based selectors Make element selectors as simple as possible Use child instead of descendent selectors
table tr td ul li {color: green;} li#myID {color: green;} ul li {color: purple;} ul > li {color: purple;} Use Class or ID Selectors Use Child Selectors
72 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Browser Subsystems
function BuildUI() { var elm = document.getElementById('ui'); // Clear existing contents elm.innerHTML = ''; // Generate UI elm.innerHTML += BuildTitle(); elm.innerHTML += BuildBody(); elm.innerHTML += BuildFooter(); } +=+=+=+=+=+= == 7 innerHTML References References 3 Visual Changes
function BuildUI2() { var elm = document.getElementById('ui'); // Generate UI var contents = BuildTitle() + BuildBody() + BuildFooter(); // Replace existing contents with UI elm.innerHTML = contents; } == 1 innerHTML Reference Reference 1 Visual Update Update
20 Best Practices to Improve Performance 1)Compress File Downloads 2)User Conditional Requests 3)Provide Cacheable Content 4)Minify Your JavaScript 5)Don’t Scale Images 6)Use Image Sprites 7)Link JavaScript at Bottom 8)Add defer tag to JavaScript 9)Link Stylesheets at Top 10)Avoid 75 11)Minimize Walking Lookup Chain 12)Cache Function Pointers 13)Use Native JSON Object 14)Remove Duplicate Script 15)Minimize DOM Interactions 16)Use Efficient DOM Methods 17)Use querySelectorAll for Groups 18)Only Send Required Styles 19)Simplify Selectors 20)Minimize Page Layouts
Internet Explorer 8 Subsystem Distribution 76
Section #2: Preview of Internet Explorer 9 Performance
78 NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormatting Block Building LayoutRendering Hardware Accelerated HTML5 Compiled JavaScript GPU Powered HTML5 Graphics
Demo Flying Logos
GPU Powered HTML5
The Gamers GPU 81
Everyone Has a GPU 82
Windows Experience Index Results - GPU Windows Experience Index Graphics Scores of Vista and Win7 Users 4% 15% 32% 27% 12% 10%
GPU Processing Performance 84 Multi-Core CPU GPU
Compiled JavaScript
Interpreters, Compilers, Intermediary Languages, Machine Code, Stack Alignment, JIT, Type System, Registers, Memory Management, Assembly, Bytecode, Tracing, Syntax Trees, Dynamic Languages, Flow Analysis, Static Languages, Regular Expressions, Inlining, oh my…
Foreground New JavaScript Engine Interpreter (Chakra) 87 Source Code Parser AST Interpreter ByteCode
Multi-Core Processing 88 Multi-Core CPU
Internet Explorer 8 Processor Distribution 89 Foreground Background
Windows Experience Index Results 90 MonthCPU Count 2/1/ Windows Experience Index Number of CPU Cores for Vista and Win7 Users
Foreground New JavaScript Engine Background Compiler (Chakra) 91 Source Code Parser AST Interpreter ByteCode Background Native Code Background Compiler
Internet Explorer 9 Background Compilation 92 Foreground Background
Putting It All Together GPU Powered Graphics Compiled JavaScript Applications 93
Flying Images – One Animation 94 IE8 IE9
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.