Building High Performance Web Applications and Sites

johnhrv@microsoft.com

Layout, Rende ring, Formattin 16% g, … JScript & DOM 84%

Layout, Rende ring, Formattin g, … 33% 67% JScript & DOM

CSS performance Optimizing symbol resolution Javascript coding inefficiencies HTTP performance

table tr td ul li {color: green;} li#pass {color: green;} ul li {color: purple;} ul > li {color: purple;}

Minimize included styles Use less-complicated selectors Don’t use expressions Minimize page re-layouts

CSS Performance Optimizing Symbol Resolution JavaScript Coding Inefficiencies HTTP Performance

DOM Global Prototype Intermediate … … Cost Instance Local

function WorkOnLocalVariable() { localVariable = foo(); return ( localVariable + 1 ); }

function WorkOnLocalVariable2() { var localVariable = foo(); return ( localVariable + 1 ); }

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

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

function CalculateSum() { // Retrieve Values document.body.all var lSide = document.body.all.lSide.value; document.body.all var rSide = document.body.all.rSide.value; // Generate Result document.body.all.result.value = lSide document.body.all + rSide; }

function CalculateSum2() { // Cache Element Collection var elms = document.body.all; // Retrieve Values elms var lSide = elms.lSide.value; elms var rSide = elms.rSide.value; // Generate Result elms elms.result.value = lSide + rSide; }

function IterateWorkOverCollection() { var length = myCollection.length; for(var i = 0; i < length; i++) { Work Work(myCollection[i]); } }

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

http://channel9.msdn.com/pdc2008/TL24/

CSS Performance Considerations Optimizing Symbol Resolution JavaScript Coding Inefficiencies HTTP Performance

http://wiki.ecmascript.org/doku.php?id=es3.1:json _support http://www.json.org/json_parser.js

switch(option) { case 1: … case 2: … case 3: … … case 1000: … }

var lookup = { 1: function(){…} 2: function(){…} 3: function(){…} … 1000: function(){…} } try { lookup[option](); lookup [option](); } catch(e) { // Default operation }

var property = foo(); this.getProperty = function() { return property; } this.setProperty = function(value) { property = value; }

this.property = foo();

DOM Global Prototype Intermediate … … Cost Instance Local

Trident (MSHTML) DOM JScript Engine

function LoopChildren(elm) { var nodes = elm.childNodes; var length = nodes.length; for(var i = 0; i < length; i++) { var node = nodes[i]; nodes[i]; … } }

function LoopChildren2(elm) { var node = elm.firstChild; while(node != null) { … node = node.nextSibling; } }

function doValidation2() { // Retrieve the required elements by using Selectors // Selects all form fields with 'required' classes var reqs = document.querySelectorAll 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; } }

Use the native JSON object Turn large switch statements into lookups Avoid property access methods Minimize DOM interaction Use querySelectorAll for groups

CSS Performance Optimizing Symbol Resolution JavaScript Coding Inefficiencies HTTP Performance

GET / HTTP/1.1 HTTP/1.1 200 OK Accept: */* Content-Length: 3479 Accept-Language: en-us Expires: -1 UA-CPU: x86 Date: Tue, 24 Apr 2007 21:30:46 GMT Content-Type: text/html; charset=utf-8 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0) Pragma: no-cache Host: www.live.com Content-Encoding: gzip gzip

<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 } .b { background-position: 0 -10 } </style> </head> <body> … <div class=\"a\"></div> Item 1 <div class=\"a\"></div> <div class=\"b\"></div> <div class=\"b\"></div> Item 2 … </body>

Request Response GET /images/banner.jpg HTTP/1.1 HTTP/1.1 304 Not Modified Host: www.microsoft.com Content-Type: image/jpeg If-Modified-Since: Last-Modified: Wed, 22 Feb 2006 04:15:54 GMT Wed, 22 Feb 2006 04:15:54 GMT

Request Response GET /images/banner.jpg HTTP/1.1 HTTP/1.1 200 OK Host: www.microsoft.com Content-Type: image/jpeg Expires: Fri, 12 Jun 2009 02:50:50 GMT Request Response GET /images/banner.jpg HTTP/1.1 No response: Request serviced from cache

www.fiddler2.com http://www.fiddler2.com/fiddler2/addons/neXper t.asp

Your feedback is important!

© 2009 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.

Building High Performance Web Applications and Sites

0 comments

Notes on slide 1

5 Favorites