Internet Explorer 9 Overview (Update)

Leon BraginskiSenior Program ManagerMicrosoft Corporation

Objective

Understand what’s new in the third Internet Explorer 9 Platform Preview

Agenda

Exploring new features in the latest Platform Preview

PerformanceSame MarkupSame Script

Call to ActionResources

Focus Areas of Internet Explorer 9

Internet Explorer 9

HTML5

Per

form

ance

Sam

e M

arku

p

GP

U

Acc

eler

atio

n

Inte

rnet

Exp

lore

r 9

Pla

tfor

m P

revi

ew

WebKit.org’s SunSpider v0.9.1JavaScript Performance Benchmark, generated June 21, 2010

Dell Optiplex with a 3.0 GHz Core 2 Duo Intel processor, 4 GB RAM, and Intel integrated vide; running Windows 7

Mill

isec

onds

Inte

rnet

Exp

lore

r 8

Inte

rnet

Exp

lore

r 9 P

DC 200

9 Dem

o

Fire

fox 3

.6.3

IE9

Platfo

rm P

revie

w #1

Fire

fox 3

.7 P

re-R

elea

se A

lpha

6

Inte

rnet

Exp

lore

r 9 P

latfo

rm P

revie

w #2

Inte

rnet

Exp

lore

r 9 P

latfo

rm P

revie

w #3

Safar

i 5.0

Opera

10.

53

Chrom

e 5.

0.37

5.70

Chrom

e 6

Night

ly 6.

0.42

7.0

Opera

10.

6 Bet

a

0

500

1000

1500

2000

2500

3000

3500

4000

Performance – Web Timing

Browser-interoperable way to measure performancePerformance metrics are part of the Document Object Model (DOM) APIsPerformance information is available from navigation to when the page is loaded

Interface Purposewindow.msPerformance.navigation Navigation information:

• number of redirects• request counts• unique domains

window.msPerformance.timing Absolute time when events occurred: • connectStart• connectEnd

window.msPerformance.timingMeasures Time it took to complete the task

Performancewindow.msPerformance Interfaces

Timeline

URL is entered window.load

*Not all of the timing events are shown

window.msPerformance.timing.navigationStart

window.msPerformance.timingMeasures.navigation

window.msPerformance.timing.loadEnd

unloadStart unloadEnd Other timings

PerformanceTiming and timingMeasures

msPerformanceSample Code

var myBody;this.onload = function () { myBody = document.getElementById ("myBody"); if (window.msPerformance) { myBody.innerHTML = 'navigationStart: ' + window.msPerformance.timing.navigationStart

+'ms (' + Date

(window.msPerformance.timing.navigationStart)+ ') <br>';

} return;}; Demo file: msPerformance.htm

msPerformance

demo

No longer limited to the “web safe” fontsPackage and deliver fonts as neededPart of the W3C Fonts Working Group

<style type="text/css"> @font-face { font-family:MyFontName; src: url('FontFile.woff'); } </style>

<div style="font: 24pt MyFontName, sans-serif;"> This will render using MyFontName in FontFile.woff</div>

Same Markup – FontsWeb Open Font Format (WOFF)

Same Markup – Canvas

Canvas is a dynamic surface for drawingGraphical elements (paths, boxes, arcs, more)AnimationsImages

How it works Canvas SVG

Drawing Mode Immediate Retained

DOM Support <CANVAS> part of DOM Each SVG element is part of DOM

Animation Using direct scripting in canvas

Manipulating objects in DOM

IE9 GPU Acceleration

Yes Yes

Canvas – Adding Images

this.onload = function() {var myCanvas = document.getElementById('myCanvas');if (myCanvas.getContext){

var ctx = myCanvas.getContext("2d"); var img = new Image(); img.src = "IELogo.png"; img.onload = function(){ ctx.drawImage(img,0,0); }

}}Demo file: CanvasImage.htm

Canvas – Sample Code

myCanvas = document.getElementById (“myCanvas”);if (myCanvas.getContext){

ctx= myCanvas.getContext("2d");ctx.beginPath();ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circlectx.moveTo(110,75);ctx.arc(75,75,35,0,Math.PI,false); // Mouthctx.moveTo(65,65);ctx.arc(60,65,5,0,Math.PI*2,true); // Left eyectx.moveTo(95,65);ctx.arc(90,65,5,0,Math.PI*2,true); // Right eyectx.stroke();

}…<canvas id="myCanvas" width="500" height="500">

Canvas is not supported.</canvas>

Demo file: Canvas.htm

Two animation typesFrame-basedTime-based

Frame-based: objects are moved the same number of pixels every updateTime-based: objects are moved the same number of pixels per unit of time

Canvas Animation

Same distance for each updateMachine dependent

Faster machine = faster animationSlower machine = slower animation

Simple to implement

Frame-Based Animation

Same distance over time unitNot machine dependent

Fast machine = smoother animationSlower machine = jerkier animation

Used in games – ensures animation is completed in a set length of time

Time-Based Animation

Canvas Frame-Based Animation

Demo file: CanvasAnimation.htm

var distance=5, lastFrameTime = 0;setInterval(drawTimeBased, 16);

function drawFrameBased() {

y1 += distance;

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

ctx.drawImage(img, x1, y1, imgWidth, imgHeight);

}

Canvas Time-Based Animation

Demo file: CanvasAnimation.htm

var speed = 250, lastFrameTime = 0;setInterval(drawTimeBased, 16);

function drawTimeBased() {// time since last framevar now = new Date().getTime();dt = (now - lastFrameTime) / 1000;lastFrameTime = now;

y2 += speed * dt;

ctx.clearRect(x2, 0, ctx.canvas.width,

ctx.canvas.height);ctx.drawImage(img, x2, y2, imgWidth, imgHeight);

}

Canvas

demo

Same Markup – Video

<video src="video.mp4 autoplay controls> <!-- Only shown when browser doesn’t support video --> <!-- You could embed Flash or Silverlight video here --></video>

HTML5 <video> elementMPEG-4/H.264 videoVideo composited with any other elements (SVG, HTML)GPU-based implementation capable of 60fpsSupport for hardware video decoders

Video – Controlling Playback

Tag attributesAutoplay: starts play as soon as readyControls: controls are displayedcurrentTime: current time in seconds

Tag methodplay(): plays video at specific currentTime

Video Sample

Demo file: video.htm

<script language=javascript> function skipTo(){

var myVideo = document.getElementById("myVideo");if (myVideo.currentTime) {myVideo.currentTime = document.getElementById("time").value;myVideo.play();}

}</script><video id="myVideo" src="video.mp4" autoplay controls>

Video is not supported.</video>Enter seconds to skip to: <input type=text id="time"><input type=button value="Skip" onclick=skipTo()>

Same Markup – Audio

HTML5 <audio> elementMP3 and Advanced Audio Coding (AAC) audioFully scriptable by using DOMSimilar properties as in the VIDEO tag to control playback

<audio src="audio.mp3" id="audioTag" autoplay controls> <!-- Only shown when browser doesn’t support audio --> <!-- You could embed Flash or Silverlight audio here --></audio>

MPEG-4/H.264 videoContent-Type: video/mp4

MPEG-3 audioContent-Type: audio/mpeg

AAC audioContent-Type: audio/aac

Video and Audio MIME Types

Video and Audio

demo

ECMA-262 5th Edition (ES5) approved in December 2009ES5 features in Internet Explorer 9

New array methodsEnhanced object modelComputational methods and functions

Same Markup – Same ScriptECMAScript 5 Features

ECMAScript 5th Edition

New array methodsindexOf, lastIndexOf, forEach every, somemap, filter, reduce, reduceRight

Explore ES5 array methods on ietestdrive.com

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

var myArray = ["Alice", "Bob", "John"];var myFunc = function(value, index, myArray){

document.write("Hello " + value + "<br/>");

}var result=myArray.forEach(myFunc);

</script> </body>

ES5 Array Methods Sample

Demo file: es5.htm

ECMAScript 5th EditionEnhanced Object Model

Accessor properties (“getter/setter” properties)Accessible by using function properties of the Object constructor:

Object.defineProperty, Object.definePropertiesPlus many more

Platform Preview 3 does not yet support above methods with DOM objects

ECMAScript 5th EditionComputational Methods and Functions

String.prototype.trimDate.prototype.toISOStringDate.parse, Date.nowArray.isArrayFunction.prototype.bind

Call to Action

Use Same Markup – code for features, not for a specific browserCheck out your sites and new platform capabilities in the Platform PreviewProvide your feedback on Connect

Go to https://connect.microsoft.comSign up to provide feedback https://connect.microsoft.com/IESubmit feedback https://connect.microsoft.com/IE/Feedback

Fill out the evaluation form for this presentation

Resources

Windows Summit 2010 Internet Explorer 9 Overview http://windowssummit.tri-digital.com/video-gallery/software/sow-t102.aspx

ECMAScript Language Specification, 5th Editionhttp://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf

Web Timing Specificationhttp://dev.w3.org/2006/webapi/WebTiming/

Fonts on the Web http://www.w3.org/Fonts/

Resources (cont.)

Latest Internet Explorer 9 Platform Preview buildhttp://www.IETestDrive.com

Internet Explorer 9 MIX presentationshttp://live.visitmix.com/Sessions#/tags/InternetExplorer

MIX keynote that features Internet Explorer 9http://live.visitmix.com/MIX10/Sessions/KEY02

Internet Explorer 9 Team’s bloghttp://blogs.msdn.com/ie/

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