Ie9 overview

Giorgio SardoIE Technical Evangelist, Microsoft [email protected]

Internet Explorer 9 Overview

IE9 At-A-Glance

Developers Platform

HTML5 and Microsoft

Performance

Q&A

Agenda

Internet Explorer 9

Welcome to the future

Engineering for IE9 is about delivering:

• A fast, clean experience that allows IE users to

just browse

• A highly interoperable platform for developers

to build compelling, graphically rich site and

applications, powered by Windows

IE9 At-A-Glance

High performance browser

Best interoperable HTML5

Hardware accelerated graphics

HTML5 and Internet Explorer 9

Participation to W3C Working Groups

• HTML 5 WG• DOM WG• CSS WG• SVG WG• SVG Testing Task Force• HTML Testing Task Force• Accessibility Task Force• …

Microsoft and Web Standards

Paul Cotton (Microsoft), co-chair

40 W3C Member organizations

411 group participants

280 invited Experts

9 mailing lists (~4000 emails on public-html)

As of March 15th:

• 153 unresolved bugs, 34 unresolved issues (e.g.

decentralized extensibility, document license…)

HTML Working Group

HTML 5

XHTML

CSS 3

SVG

DOM Level2 and Level3

Microsoft commitments with IE9 PPB1

HTML5 • Defines the behavior at seams of other specs• Parsing unknown elements• Integrated SVG

XHTML/XML• Namespaces for using custom elements• Strict, fail-fast parsing helps developers find errors quickly

SVG• Standalone XML-based document (.svg file)• Inline in an XHTML document• Inline in an HTML5 document

Markup Languages in IE9

Interpret the same HTML and CSS markup the same

way

Always some differences on the edges

• Standards evolve• Browsers implement in different order

Contributing DOM, CSS3 Standards Compliance Tests to

W3C

Interoperable HTML5 Markup

Microsoft Confidential

Interoperable Markup

Demo

W3C Web Standards

Number of Submitted Tests

Internet Explorer 9Platform Preview

Mozilla Firefox 3.6 Opera 10.50 Apple Safari 4.0

Google Chrome 4.0

SVG 1.1 2nd edition

31 100% 90% 97% 94% 94%

CSS3 Borders & Backgrounds

33 100% 27% 88% 27% 91%

CSS3 Selectors 16 94% 81% 63% 50% 50%

DOM Level 2 Core

9 100% 89% 100% 100% 100%

DOM Level 3 Events

10 100% 40% 40% 50% 50%

DOM Level 2 Style

5 80% 100% 80% 20% 0%

W3C Test Suites

Source: http://samples.msdn.microsoft.com/ietestcenter/

HTML5 <video> element

• Industry-standard MPEG-4/H.264 video• Video can be composited with anything else on the page

• HTML content, images, SVG graphics

• GPU-based implementation capable of maintaining 60fps full-

screen at full HD resolution• Supports both DXVA and full hardware video decoders

HTML5 <audio> element

• Industry-standard MP3 and AAC audio

HTML 5 Video

<video width="800" height="450" src="myvideo.mp4" autoplay>

No video for you</video>

Microsoft Confidential

Video Tag

Demo

Markup-/DOM-based graphics: SVG 1.1

• “View source” simplicity—aids learning• Easy server-side generation—it’s just XML• Easy client-side debugging—it’s in the DOM• Supported by popular graphics programs• Easy integration with HTML5

SVG (Scalable Vector Graphics)

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

<rect fill="red" x="20" y="20" width="100" height="75" />

<rect fill="blue" x="50" y="50" width="100" height="75" />

</svg>

Microsoft Confidential

SVG

Demo

SVG in IE9 Platform PreviewSVG Feature Today IE9

Document Structure

Basic Shapes

Paths

Text

Transforms

Painting, Filling, Color

Scripting

Styling

Gradients and Patterns

Clipping and Masking

Markers and Symbols

Filter Effects

Declarative Animation

SVG Fonts

CSS3 Color

• Alpha color with rgba() and hsla() color functions• Transparency control with the opacity property

CSS3 Backgrounds and Borders

• Round corners with the border-radius property• Multiple background images per element• box-shadow property on block elements

Graphically-rich Styling with CSS3

CSS3 Selectors

• Help you do more on your site with less script• Make it easier to use new graphics capabilities

CSS3 Namespaces

• Style elements with namespaces in XHTML documents

CSS Infrastructure

CSS 3 Selectors

Microsoft Confidential

CSS 3

Demo

Central part of web platform used to

manipulate the DOM

• DOM Core

• DOM Events

• DOM Style

• DOM HTML

• DOM Range

• HTML5 Selection

IE9 Programming Model

Microsoft Confidential

DOM Events

Demo

IE9 and Performance

HW-Accelerated HTML5

Microsoft Confidential

Page load in slow motion

Demo

Scenario – Wall Street Journal

Starting with Bing

Scenario – Wall Street Journal

Blank Background

Scenario – Wall Street Journal

Initial HTML

Scenario – Wall Street Journal

Heading Appears

Scenario – Wall Street Journal

Initial Content

Scenario – Wall Street Journal

Right Column Lays Out

Scenario – Wall Street Journal

Media Appears

Scenario – Wall Street Journal

Customized Content

Scenario – Wall Street Journal

Advertisements

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

Five Popular News Sites – The best

  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

Five Popular News Sites – The worst

  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

LayoutRenderingParsingDOMNetworkingFormatsJscript

LayoutRenderingParsingDOMNetworkingFormatsJscript

Time spent in IE subsystems differs greatly by site function and coding pattern

News site 1

News site 2

Performance is multi-dimensional

WSJ – Before and After

43

IE8

IE9

IE8

IE9

Microsoft Confidential

Performance

Demo

Web API Usage 7000 top sites

API (by rank)1 50 700

Nu

mb

er

of

sit

es

7000

0

API Rank Percent of Sites

indexOf 1 94%

getElementById 13 80%

addEventListener 27 65%

getComputedStyle 62 26%

JavaScript PerformanceWebKit.org’s SunSpider v0.9 Benchmark

Dell OptiPlex, Microsoft Windows 7 Enterprise 6.1.7600, 64-bit, 3.0GHz Intel Core 2 Duo, 4GB RAM, Intel Integrated Video

IE8

Opera

10.

10

IE9

PDC 2

009

Demo

Firef

ox 3

.6

Firef

ox 3

.7 A

lpha

2 P

rere

leas

e

IE9

Plat

form

Pre

view (1

.9.7

745.

6019

)

Safa

ri 4.

0.5

(531

.22.

7)

Chrom

e 4.

0.24

9.89

Chrom

e 5.

0.34

2.2

(dev

)

Opera

10.

5 0

500

1000

1500

2000

2500

3000

3500

4000

45003826

2492

834 700 610 599 408 374 293 285

Milliseco

nds

GPU on Every Machine

High Performance

JavaScript execution

DOM interaction and layout

GPU-powered rendering

Cross-browser Interoperability

HTML5 markup

CSS3 markup

DOM programmability

Graphics Capabilities

Alpha color & opacity

Round corners & multiple backgrounds

HTML5-integrated SVG graphics

Media Capabilities

<video> element with MPEG-4/H.264

<audio> element with MP3/AAC

GPU-Powered HTML5

Microsoft Confidential

Flying Images

Demo

Flying Images – One Animation

50

IE8

IE9

IE8

IE9

blogs.msdn.com/IE

www.ietestdrive.com

blogs.msdn.com/Giorgio

Resources

Q&A