Building A Fast Web Experience

Building A Fast Web ExperienceInternet Explorer 9 Is All Around Fast

Sandeep J AlurMicrosoft 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 Journal4

Some Markup Has Been Retrieved5

Content Starts To Render6

Some Images Start To Appear7

Mast Head Appears8

Right Column Starts To Render9

Personalized Content Starts To Appear10

Advertisements Load11

Done!12

Browser Subsystems

Collections

JavaScript

Marshalling

HTML

CSS

DOM

Layout

Formatting

Block Building

Rendering

Networking

14

Picking Five Popular News Sites

Wall Street JournalChicago Tribune

USA TodayNew York TimesWashington Post

CNN NewsSeattle Times

MSN NewsFinancial TimesBoston Globe

News Site #1News Site #2News Site #3News Site #4News Site #5

15

TotalSize

NumberElements CSS Rules Image

FilesScript 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

Five Popular News Sites

JQuery Prototype MooTools Scriptaculous Other (JS Lib)YUI

16

Variation in Total Size


TotalSize


FilesScript 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


17

Number Elements to Number of CSS Rules


TotalSize


FilesScript 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

Number of Images


TotalSize


FilesScript 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

Amount of JavaScript


TotalSize


FilesScript 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

Amount of JavaScript


TotalSize


FilesScript 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

Which sites loads the fastest?

TotalSize


FilesScript 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 slowest?

TotalSize


FilesScript 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

News Site 1

News Site 2

News Site 3

News Site 4

News Site 5

0

500000

1000000

1500000

2000000

2500000

3000000

3500000

4000000HTML ParserCSS ParserCollectionsJavaScriptMarshallingNative OMFormattingBlock BuildingLayoutRendering

Tim

e Sp

ent P

er S

ubsy

stem

(ms)

Multi-System Performance

24

HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering

Average Distribution Across 5 News Sites

25

Average Distribution Across Top AJAX Sites

HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering

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.1Host: www.microsoft.com

Second Request

GET /images/banner.jpg HTTP/1.1Host: www.microsoft.com

First Response

HTTP/1.1 200 OKContent-Type: image/jpegExpires: Fri, 30 Sep 2011 00: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<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}')

Minified JavaScript

33

<html><head>

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

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

Reduce Network Connections

<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

Reduce Network ConnectionsUse Image Sprites

34

35

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

Reduce Network Connections

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

Browser Subsystems

Collections

JavaScript

Marshalling

HTML

CSS

DOM

Layout

Formatting

Block Building

Rendering

Networking

37

The JavaScript Engine

Source Code Parser AST InterpreterByteCode

Foreground

38


Foreground

New JavaScript Engine – “Chakra”

BackgroundBackground

CompilerNative Code

Compiled JavaScript In The Background Using Multiple Cores

39

WebKit SunSpider JavaScript Benchmark Results

Internet Exp

lorer 8

IE9 PDC 2009 Demo

Firefox 3

.6.8

IE9 Platform

Preview 1

IE9 Platform

Preview 2

Firefox 4

.0 Pre-Release Beta2

IE9 Platform

Preview 3

Safar

i 5.0

IE9 Platform

Preview 4

IE9 Beta & Platf

orm Previe

w 5

Chrome 6 (6.0.472.53)

Opera 10.6.1

Chrome 7 Nightly

(7.0.503.0)

0500

1000150020002500300035004000

Version 0.9.1, Results Generated September 4th, 2010

Better performance, with the same markup!New JavaScript Engine –

“Chakra”


Foreground

40

BackgroundBackground

CompilerNative Code

Compiled JavaScript In The Background Using Multiple Cores

JavaScript

Best Practices

Minimize Symbol Resolution

42

var foo obj.foo

Global

Intermediate Scopes

Local

DOM

Prototype Chain

InstanceCost

43

function WorkOnLocalVariable(){

localVariable = 5;return ( localVariable + 1 );

}


localVariablelocalVariable

44

function WorkOnLocalVariable2(){

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

}


var localVariablelocalVariabl

e

45

function IterateWorkOverCollection2(){

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

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

funcWork(myCollection[i]);}

}


var funcWork = Work;

funcWork

46

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

Reduce and Remove Duplicate Scripts

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

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

Browser Subsystems

Collections

JavaScript

Marshalling

HTML

CSS

DOM

Layout

Formatting

Block Building

Rendering

Networking

48

Using The Full Power Of Your PC

49

Everyone Has a GPU

50

1 2 3 4 5 6 7 8

Windows Experience Index Results - GPU

Windows Experience IndexGraphics 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

4Windows Desktop Windows Manager composes the final screen

5

Content Rendering Page Composition Desktop Composition

Full vs. Partial AccelerationInternet 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

Content Type Recommended BitrateSD Content 350 kbps to 2000 kbps

HD Content 350 kbps to 3500 kbps

56

Using Script To Determine If A Video Code Is Supportedtry { 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 <video id="myVideo"> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>  </video>

Providing Video

57

function BuildUI(){

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

// Clear existing contentselm.innerHTML = '';

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

}

Batch Visual Changes

+=+=+=

=

7 innerHTMLReference

s

3 Visual Changes

58

function BuildUI2(){

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

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

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

}

Batch Visual Changes

=

1 innerHTMLReference

1 VisualUpdate

59

Internet Explorer 9

Network and Caching Chakra, the new JavaScript Engine

Hardware Accelerated Graphics

Networking and caching improvements

mean Internet Explorer 9 performs

far fewer HTTP requests when

navigating.

Chakra interprets, compiles, and executes code in

parallel, taking advantage of multi-CPU cores

through Windows and the computer’s hardware.

For Internet Explorer 9, rendering of

graphics, text, and video has been moved

from the CPU to the graphics card.

60

Internet Explorer 9 Beta: Now Available

Migrate your applications off

Internet Explorer 6

Develop for standards first!

Download and install the Internet

Explorer 9 Betaand test your site!

http://msdn.com/ieLearn more at…

60

http://ietestdrive.com/

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.

Documents

Building A Fast Web Experience