Internet Explorer 9: Faster Websites with IE9

Internet Explorer 9: Faster Websites with IE9Aditee ReleArchitect Evangelist

Agenda

• IE9 – a quick look• Performance

Improvement • Network

optimization• JavaScript engine• Layout &

Rendering

PAGE 3

The capabilities of the web are increasing every day, but the way we experience the web isn’t keeping up.

PAGE 4

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

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

PAGE 15

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


PAGE 16

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


PAGE 17

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


18

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


19

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


PAGE 20

Multi-System Performance

21

HTML parsingCSS parserCollectionsJavaScriptMarshallingNative OMFormattingBlockBuildLayoutRendering

Average Distribution Across 5 News Sites

22

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

Quick Caching Overview

25

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

26

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)

JavaScript

Best Practices

28

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

29

<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

30

31

<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

PAGE 33

The JavaScript Engine

Source Code Parser AST InterpreterByteCod

e

Foreground

PAGE 34

Source Code Parser AST InterpreterByteCode

Foreground

New JavaScript Engine – “Chakra”

BackgroundBackground Compiler

Native Code

Compiled JavaScript In The Background Using Multiple Cores

Chakra – The New JavaScript engine

• JavaScript Background Compilation• Compiles JavaScript source code into native machine code• A new interpreter for executing script on traditional web pages

• Type optimizations• Type Representations• Polymorphic inline caching

• Fast interpreter – • Register based layout,• Efficient opcode

• Library optimizations• Tons of improvements to the JavaScript runtime and libraries

PAGE 36

WebKit SunSpider JavaScript Benchmark Results

JavaScript

Best Practices

Minimize Symbol Resolution

38

var foo obj.foo

Global

Intermediate Scopes

Local

DOM

Prototype Chain

InstanceCost

39

function WorkOnLocalVariable(){

localVariable = 5;return ( localVariable + 1 );

}


localVariablelocalVariable

40

function WorkOnLocalVariable2(){

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

}


var localVariablelocalVariabl

e

41

function IterateWorkOverCollection2(){

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

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

funcWork(myCollection[i]);}

}


var funcWork = Work;

funcWork

42

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

PAGE 43

Flying Images – One Animation

IE8

IE9

Browser Subsystems

Collections

JavaScript

Marshalling

HTML

CSS

DOM

Layout

Formatting

Block Building

Rendering

Networking

PAGE 45

Using The Full Power of Your PC

Understanding GPU Acceleration

46

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

47

Building Better Experiences With The GPU

48

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

50

Content Type Recommended BitrateSD Content 350 kbps to 2000 kbps

HD Content 350 kbps to 3500 kbps

51

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

52

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

53

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

PAGE 54

window.msPerformance

<script type="text/javascript"> var w = window; var navStart = w.msPerformance.timing.navigationStart + "ms"; var navStartTime = Date(w.msPerformance.timing.navigationStart);</script>

A new set of Performance Metrics integrated at the DOMBrowser interoperable way to measure performance

55

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.

[email protected]

Questions

Documents

Internet Explorer 9: Faster Websites with IE9