High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft

High-Performance Best Practices for Web SitesJason 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


Blank Background


Initial HTML


Heading Appears


Initial Content


Right Column Lays Out


Media Appears


Customized Content


Advertisements


Interacting with Website

15

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

16

Five Popular News Sites

TotalSize

NumberElement

s

CSS Rules

ImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722

JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI

17

Five Popular News SitesVariation in Total Size

TotalSize

NumberElement

s

CSS Rules

ImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722


18

Five Popular News SitesNumber Elements to Number of CSS Rules

TotalSize

NumberElement

s

CSS Rules

ImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722


19

Five Popular News SitesNumber of Images

TotalSize

NumberElement

s

CSS Rules

ImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722


20

Five Popular News SitesAmount of JavaScript

TotalSize

NumberElement

s

CSS Rules

ImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722


21

Five Popular News SitesAmount of JavaScript

TotalSize

NumberElement

s

CSS Rules

ImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722


22

Which sites loads the fastest?

TotalSize

NumberElement

s

CSS Rules

ImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722


23

Which sites loads the slowest?

TotalSize

NumberElement

s

CSS Rules

ImageFiles

Script Files

ScriptLines

ScriptLibs

News Site #1 3280kb 8662 1293 137 21 14,216

News Site #2 961kb 820 2964 44 16 3,812

News Site #3 300kb 1187 1366 26 4 9,481

News Site #4 1462kb 4257 893 76 21 11,988

News Site #5 2981kb 3578 1917 88 19 20,722


24

Internet Explorer 8 Subsystem Distribution

News Site #1

News Site #2

News Site #3

News Site #4

News Site #5

0

500,000

1,000,000

1,500,000

2,000,000

2,500,000

3,000,000

3,500,000

4,000,000

HTML parsing CSS parser Collections JavaScript Marshalling Native OM

Formatting BlockBuild Layout Rendering

Millisecon

ds

25

Average Distribution Across 5 News Sites

HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering

26

Average Distribution Across Top AJAX Sites

HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering

27

Netw

ork

ing

HTM

L

CSS

Collecti

on

s

JavaS

cri

pt

Mars

halli

ng

DO

M

Form

att

ing

Blo

ck

Bu

ild

ing

Layou

t

Ren

deri

ng

Browser Subsystems

28

Netw

ork

ing

HTM

L

CSS

Collecti

on

s

JavaS

cri

pt

Mars

halli

ng

DO

M

Form

att

ing

Blo

ck

Bu

ild

ing

Layou

t

Ren

deri

ng

Browser Subsystems

Networking OptimizationsCompress Network Traffic

RequestGET / HTTP/1.1

Accept: */*

Accept-Language: en-us

UA-CPU: x86

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible…)

Host: www.live.com

Response

ResponseHTTP/1.1 200 OK

Content-Length: 3479

Expires: -1

Date: Sun, 14 Mar 2010 21:30:46 GMT

Content-Type: text/html; charset=utf-8

Pragma: no-cache

Content-Encoding: gzip

Accept-Encoding: gzip, deflate

Content-Encoding: gzip

Networking Optimizations Provide Cacheable Content

First RequestGET /images/banner.jpg HTTP/1.1

Host: www.microsoft.com

First ResponseHTTP/1.1 200 OK

Content-Type: image/jpeg

Expires: Fri, 19 Mar 2010 00:00:00 GMTExpires: Fri, 19 Mar 2010 00:00:00 GMT

Second RequestGET /images/banner.jpg HTTP/1.1


No Response Required

Networking Optimizations Conditional Requests

RequestGET /images/banner.jpg HTTP/1.1


If-Modified-Since:

Sun, 14 Mar 2010 21:30:46 GMT

Response

ResponseHTTP/1.1 304 Not Modified

Content-Type: image/jpeg

Last-Modified:

Sun, 14 Mar 2010 21:30:46 GMT

If-Modified-Since: Sun, 14 Mar 2010 21:30:46 GMT

Last-Modified: Sun, 14 Mar 2010 21:30:46 GMT

Networking Optimizations Minify Your JavaScript

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<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}')

Original JavaScript Minified JavaScript

Networking Optimizations Don’t Scale Images

<html><head>

<title>Test</title></head><body>

…<img src=“logo.gif" width="50" height="40" />…

</body>

</html>

width="50" height="40"500 x 400

Networking Optimizations Don’t Scale Images

<html><head>


…<img src=“logo.gif" width="50" height="40" />…

</body>

</html>

width="50" height="40"

50 x 40

Networking Optimizations Use Image Sprites

<html><head>


…<img src="a.gif" /> Item 1<img src="b.gif" /> Item 2<img src=“c.gif" /> Item 3<img src=“d.gif" /> Item 4<img src=“e.gif" /> Item 5<img src=“f.gif" /> Item 6…

</body>

</html>

<img src="a.gif" /> Item 1<img src="b.gif" /> Item 2<img src=“c.gif" /> Item 3<img src=“d.gif" /> Item 4<img src=“e.gif" /> Item 5<img src=“f.gif" /> Item 6



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

<div class="a"></div><div class="b"></div>

.a, .b { width: 10; height: 10 }

.a, .b { background-image: "abc.gif" }

.a { background-position: 0 0 }

.b { background-position: 0 -10 }

Internet Explorer 9 Network ToolsUnderstand and Improve Your Networking Performance

39

Netw

ork

ing

HTM

L

CSS

Collecti

on

s

JavaS

cri

pt

Mars

halli

ng

DO

M

Form

att

ing

Blo

ck

Bu

ild

ing

Layou

t

Ren

deri

ng

Browser Subsystems

HTML OptimizationsAvoid Inline JavaScript

<html><head>

<title>Test</title><script type="text/javascript"> 

</script></head><body>

…</body>

</html>

<script type="text/javascript"> </script>

HTML Parsing OptimizationsAvoid Linking JavaScript in Head

<html><head>

<title>Test</title><script src=“myscript.js” … ></script>

</head><body>

…</body>

</html>

<script src=“myscript.js” … ></script>

<html><head>


………

</body>

</html>

<script src=“myscript.js” … ></script>

HTML Parsing OptimizationsLink JavaScript at End of File

HTML Parsing OptimizationsBut if you must, use the defer tag.

<html><head>

<title>Test</title><script src=“myscript.js” … ></script>

</head><body>

…</body>

</html>

defer="defer">

44

Netw

ork

ing

HTM

L

CSS

Collecti

on

s

JavaS

cri

pt

Mars

halli

ng

DO

M

Form

att

ing

Blo

ck

Bu

ild

ing

Layou

t

Ren

deri

ng

Browser Subsystems

CSS Parsing Optimizations Avoid Embedded Styles

<html><head>


<style> </style>

… … …

</body>

</html>

<style> </style>

CSS Parsing Optimizations Avoid Linking Stylesheets at Bottom of Page

<html><head>


……

…</body>

</html>

<link rel="stylesheet" type="text/css" href=“mystyles.css" />

CSS Parsing Optimizations Link Stylesheets at Top of Page

<html><head>

<title>Test</title>

</head><body>

………

</body>

</html>

<link rel="stylesheet" type="text/css"href="class.css" />

CSS Parsing Optimizations Avoid Using @Import for Hierarchical Styles

@import url(/stylesheets/one.css);

@import url(/stylesheets/two.css);

.MyHeading

{

color: red;

font-family: 'New Century Schoolbook', serif;

background: white;

}

@import url(/stylesheets/one.css); @import url(/stylesheets/two.css);

CSS Parsing Optimizations Use Multiple Stylesheets for Hierarchical Styles

<html><head>

<title>Test</title>

</head><body>

………

</body>

</html>

<link rel="stylesheet" type="text/css" href=“one.css" /><link rel="stylesheet" type="text/css" href=“two.css" /><link rel="stylesheet" type="text/css" href=“three.css" />

50

Netw

ork

ing

HTM

L

CSS

Collecti

on

s

JavaS

cri

pt

Mars

halli

ng

DO

M

Form

att

ing

Blo

ck

Bu

ild

ing

Layou

t

Ren

deri

ng

Browser Subsystems

51

Netw

ork

ing

HTM

L

CSS

Collecti

on

s

JavaS

cri

pt

Mars

halli

ng

DO

M

Form

att

ing

Blo

ck

Bu

ild

ing

Layou

t

Ren

deri

ng

Browser Subsystems

JavaScript OptimizationsMinimize Symbol Resolution

Global

Local

Intermediate

Scopes

DOM

Instance

PrototypeChainCost

var foo obj.foo

JavaScript Optimizations Minimize Symbol Resolution

function WorkOnLocalVariable(){

localVariable = 5;return ( localVariable + 1 );

}

localVariablelocalVariable

JavaScript Optimizations Minimize Symbol Resolution

function WorkOnLocalVariable2(){

var localVariable = 5;return ( localVariable + 1 );

}

var localVariablelocalVariabl

e

JavaScript Optimizations Minimize Symbol Resolution: Functions

function IterateWorkOverCollection(){

var length = myCollection.length;

for(var i = 0; i < length; i++){

Work(myCollection[i]);}

}

Work

JavaScript Optimizations Minimize Symbol Resolution: Functions

function IterateWorkOverCollection2(){

var funcWork = Work;var length = myCollection.length;


funcWork(myCollection[i]);}

}

var funcWork = Work;

funcWork

JavaScript Optimizations Use Native JSON Methods

var jsObjStringParsed = JSON.parse(jsObjString);

var jsObjStringBack = JSON.stringify(jsObjStringParsed);

JSON.parse

JSON.stringify

<html><head>


………<script src=“myscript.js” … ></script> <script src=“navigation.js” … ></script><script src=“jquery.js” … ></script><script src=“jquery.js” … ></script>

</body>

</html>

JavaScript OptimizationsRemove Duplicate Script Files

<script src=“jquery.js” … ></script><script src=“jquery.js” … ></script>

<html><head>


……<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=“qooxdoo.js” … ></script>

JavaScript OptimizationsRemove Duplicate Script Files

<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=“qooxdoo.js” … ></script>

60

Netw

ork

ing

HTM

L

CSS

Collecti

on

s

JavaS

cri

pt

Mars

halli

ng

DO

M

Form

att

ing

Blo

ck

Bu

ild

ing

Layou

t

Ren

deri

ng

Browser Subsystems

Trident (MSHTML)

JScript Engine

Marshalling OptimizationsMinimize DOM Interaction

DOM

Marshalling OptimizationsMinimize DOM Interaction

function CalculateSum(){

// Retrieve Valuesvar lSide = document.body.all.lSide.value;

var rSide = document.body.all.rSide.value;

// Generate Resultdocument.body.all.result.value = lSide + rSide;

}

document.body.alldocument.body.all

document.body.all 9 DOM Lookups

Optimizing Symbol ResolutionMinimize DOM Interaction

function CalculateSum2(){

// Cache Element Collectionvar elms = document.body.all;

// Retrieve Valuesvar lSide = elms.lSide.value;var rSide = elms.rSide.value;

// Generate Resultelms.result.value = lSide + rSide;

}

var elms = document.body.all;

elmselms

elms

3 DOM Lookups

64

Netw

ork

ing

HTM

L

CSS

Collecti

on

s

JavaS

cri

pt

Mars

halli

ng

DO

M

Form

att

ing

Blo

ck

Bu

ild

ing

Layou

t

Ren

deri

ng

Browser Subsystems

DOM Optimizations Built In Methods Always More Efficient

function LoopChildren(elm)

{ var nodes = elm.childNodes;var length = nodes.length;


var node = nodes[i];…

} }

nodes[i];

JavaScript Coding Inefficiencies Built In Methods Always More Efficient

function LoopChildren2(elm)

{ var node = elm.firstChild;

while(node != null){

…node = node.nextSibling;

}}

node.nextSibling;

JavaScript Coding InefficienciesUse Selector API for Efficent Access of Collections

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

68

Netw

ork

ing

HTM

L

CSS

Collecti

on

s

JavaS

cri

pt

Mars

halli

ng

DO

M

Form

att

ing

Blo

ck

Bu

ild

ing

Layou

t

Ren

deri

ng

Browser Subsystems

Formatting OptimizationsOnly Send Required Styles

/* 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. */

CSS PerformanceSimplify selectors

• 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

CSS PerformanceSimplify Selector Patterns: Avoid 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

Netw

ork

ing

HTM

L

CSS

Collecti

on

s

JavaS

cri

pt

Mars

halli

ng

DO

M

Form

att

ing

Blo

ck

Bu

ild

ing

Layou

t

Ren

deri

ng

Browser Subsystems

Layout OptimizationsBatch Visual Changes

function BuildUI(){

var elm = document.getElementById('ui');

// Clear existing contentselm.innerHTML = '';

// Generate UIelm.innerHTML += BuildTitle();elm.innerHTML += BuildBody();elm.innerHTML += BuildFooter();

}

+=+=+=

=

7 innerHTMLReferences

3 Visual Changes

Layout Optimizations Batch Visual Changes

function BuildUI2(){

var elm = document.getElementById('ui');

// Generate UIvar contents = BuildTitle() + BuildBody() + BuildFooter();

// Replace existing contents with UIelm.innerHTML = contents;

}=

1 innerHTMLReference

1 VisualUpdate

75

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 Using @import

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

76

Internet Explorer 8 Subsystem Distribution

News Site #1

News Site #2

News Site #3

News Site #4

News Site #5

0

500,000

1,000,000

1,500,000

2,000,000

2,500,000

3,000,000

3,500,000

4,000,000

HTML parsing CSS parser Collections JavaScript Marshalling Native OM

Formatting BlockBuild Layout Rendering

Millisecon

ds

Section #2:

Preview of Internet Explorer 9 Performance

78

Netw

ork

ing

HTM

L

CSS

Collecti

on

s

JavaS

cri

pt

Mars

halli

ng

DO

M

Form

att

ing

Blo

ck

Bu

ild

ing

Layou

t

Ren

deri

ng

Hardware Accelerated HTML5

Compiled JavaScript

GPU PoweredHTML5 Graphics

Demo Flying Logos

GPU Powered HTML5

81

The Gamers GPU

82

Everyone Has a GPU

83

Windows Experience Index Results - GPU

1 2 3 4 5 6 7 8

Windows Experience IndexGraphics Scores of Vista and Win7 Users

4% 15% 32% 27% 12% 10%

84

GPU Processing Performance

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…

87

Foreground

New JavaScript Engine Interpreter(Chakra)

Source Code

Parser AST InterpreterByteCode

88

Multi-Core Processing

Multi-Core CPU

89

Internet Explorer 8 Processor Distribution

Foreground

Background

90

Windows Experience Index Results

Month CPU Count2/1/2010 2.3

Windows Experience IndexNumber of CPU Cores for Vista and Win7 Users

91

Foreground

New JavaScript Engine Background Compiler(Chakra)

Source Code

Parser AST InterpreterByteCode

Background Native Code

Background Compiler

92

Internet Explorer 9 Background Compilation

Foreground

Background

93

Putting It All Together• GPU Powered Graphics• Compiled JavaScript Applications

94

Flying Images – One Animation

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.

Documents

High-Performance Best Practices for Web Sites Jason Weber, Internet Explorer Team, Microsoft