pp3 devweb

개발자를 위한 인터넷 익스플로러 9플랫폼 프리뷰 3 판

황리건한국 마이크로소프트

IE6 를 떠나며

2Photo Courtesy Aten Design Group - http://www.flickr.com/photos/atendesigngroup/4408393890/

빠른 성능

똑같은 마크업

하드웨어 가속

5

빠른 성능

기존의 자바스크립트 엔진

7

Source Code

Parser AST InterpreterByteCode

새로운 자바스크립트 엔진 – “챠크라”

8

Foreground Source Code

Parser AST InterpreterByteCode

Background Native Code

Background Compiler

멀티 CPU 코어 사용

시연Flying Images / IE8, Chrome, FF, Opera, IE9

12

IE8

자바스크립트 DOM Drawing Images

13

IE9

시연Amazon ShelfFishIE TankMr. Potato GunFlickr Images

window.msPerformance 소개

• DOM 에 통합된 성능 측정• 브라우저에서 상호호환 가능한 성능 측정 방식으로 제안

• W3C 멤버들과의 파트너십을 통해 만들어 지는 중입니다 . • 아직 변경 여지가 있습니다 .

<script type="text/자바스크립트 "> var w = window; var navStart = w.msPerformance.timing.navigationStart + "ms"; var navStartTime = Date(w.msPerformance.timing.navigationStart);</script>

시연window.msPerformance

똑같은 마크업

IE9 PP2

18

IE9 PP3

19

20

API 순위 사용 비율

indexOf 1 94%

getElementById 13 80%

addEventListener

27 65%

getComputedStyle

62 26%

사용 비율을 참고로한 API 지원

표준 멤버로써의 활동

• W3C 워킹그룹 참여• HTML5 Working Group, DOM Working Group, CSS Working

Group, SVG Working Group, WebFonts Working Group

• W3C 테스팅 TF 참여• SVG Testing Taskforce, HTML Testing Taskforce,

Accessibility Testing Taskforce

21

인터넷 익스플로러 테스팅 센터

22

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



똑같은 마크업으로 똑같은 결과를 얻게 하기

23

시연Border Radius, IE Logo / IE9 and Other Browsers

분류 기능 PP1 PP2 PP3마크업 Inline SVG in HTML

XHTML/XML

Canvas

WOFF

Video/Audio

CSS 기반구조

CSS3 Selectors

CSS3 Namespaces

DOM Core

Events

Style

Range

HTML5 Selection

Traversal

새로 추가되거나 업데이트된 DOM 강화

• 완전한 DOM Level 2 와 DOM Level 3 지원• DOMContentLoaded

• 현재 페이지의 컨텐트 로딩이 끝나는 시점에 발생합니다 .• 복잡한 웹페이지에 UI 기능들을 추가할 때 유용합니다 .

• DOM Traversal• 요소들의 간단한 리스트를 통해 열거하는 간단한 방법입니다 .

26

시연DOM Traversal Media Gallery

새로 추가되거나 업데이트된 자바스크립트 APIs

• getElementsByClassName(class)• 특정한 클래스 이름의 요소 리스트를 반환하는 HTML5 API

• getComputedStyle(element, pseudoElement)• 요소의 계산된 스타일값을 반환하는 DOM L2 함수

• document.defaultView.getComputedStyle(element, null).getPropertyValue("height");

• ECMAScript 5 메소드• 새로운 배열 메소드 : indexOf, lastIndexOf, forEach, every,

some, map, filter, reduce, reduceRight• 그 밖에 계산적인 메소드와 함수들 : String.prototype.trim,

Date.prototype.toISOString, Date.parse, Date.now, Array.isArray, Function.prototype.bind

28

시연GetComputedStyle, ECMAScript 5 Game, ECMAScript 5 Array

GPU 로 강화된 HTML

30

GPU 는 게임용 ?

GPU 는 어디에나 있습니다 .

GPU 를 사용하는 PC 들의 Windows 체험지수

1 2 3 4 5 6 7 8

Windows Experience IndexGraphics Scores of Vista and Win7 Users

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

현존하는 PC 에 사용되고 있는 CPU 성능은 상당히 좋은 편입니다 .

GPU 를 이용한 HTML5

퍼포먼스 향상 자바스크립트 실행

DOM 인터랙션과 레이아웃

GPU 파워를 이용한 렌더링

크로스 브라우저상호운용성

HTML5 마크업

CSS3 마크업

DOM 프로그래밍

그래픽 기능 알파 컬러 & 투명도

라운드 코너 & 멀티 백그라운드

HTML5 에 통합된 SVG 그래픽

Canvas 그래픽

미디어 기능 <video> 요소 MPEG-4/H.264 코덱

<audio> 요소 MP3/AAC 코덱

<img> JPEG-XR, 컬러 프로필

새롭게 지원하는 HTML5 Canvas

• 자바스크립트를 통해서 2D 그래픽을 그릴 수 있도록 하는 block 요소 .• 드로잉 메소드 지원 : paths, boxes, circles, text and

rasterized images

35

<canvas id="myCanvas" width="200" height="200"> Your browser doesn’t support Canvas, sorry.</canvas>

<script type="text/자바스크립트 "> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script>

시연Deep Zoom, Canvas Pad

새로 추가된 @font-face 와 WOFF 폰트

• 웹페이지에 기본 폰트 외의 폰트를 사용합니다 .• 사이트 별로 필요한 폰트를 패키지하고 배포할 수 있도록

하는 오픈 웹 폰트 포맷을 지원합니다 . • @font-face 선언으로 웹에서 사용할 수 있도록 설계되었습니다 . • 오픈타입이나 트루타입 폰트 데이터를 간단히 리패키징합니다 .• W3C Fonts Working Group 에서 정의한 표준입니다 .

37

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

시연Web Fonts

HTML5 <video>

• HTML5 <video> 요소• 산업 표준 MPEG-4/H.264 비디오• 페이지에서 다른 요소들과 함께 사용 가능합니다 .

• HTML 컨텐트 , 이미지 , SVG 그래픽• 하드웨어 가속 , GPU 기반의 디코딩

• 속성• src – 소스 파일을 가져올 위치• autoplay – 준비되면 바로 재생할지 여부• controls – 컨트롤을 보여줄지 여부• preload – 페이지 로드에서 소스를 불러올지 여부• loop – 처음으로 다시 되돌릴지 여부• height & width – 플레이어의 가로 세로 크기

39

<video src="video.mp4" id="videoTag" width="640px" height="360px">  </video>

시연Youtube, Video Panorama

HTML5 <audio>

• HTML5 <audio> 요소• 산업 표준 MP3 와 AAC audio• DOM 으로 완전하게 스크립팅 가능합니다 .

• Attributes• src – 소스파일을 가져올 위치• autoplay – 준비됐을 때 자동으로 재생할지 여부• controls – 컨트롤들을 보여줄지 여부• preload – 페이지 로드 시에 소스를 불러올지 여부

41

<audio src="audio.mp3" id="audioTag" autoplay controls>  </video>

시연HTML5 Audio Player + XML Playlist

인터넷 익스플로러 9 정리

• 성능 : 새로운 자바스크립트 엔진• 여러분의 최신 하드웨어를 이용해서 더 빠르게 실행되는

자바스크립트 엔진

• 똑같은 마크업 : 여러분의 코드 그대로 ...• 코딩에 더 많은 시간을 보내고 , 디버깅에 더 적은 시간을

보내세요 . 똑같은 마크업이 그대로 동작하도록 하는 건 브라우저의 몫 .

• 하드웨어 가속 : 그리고 더 빨리 실행될꺼에요 .• 더 좋은 성능의 그래픽 시스템을 필요로 하는 애플리케이션이 더

잘 동작할 거에요 .

43

플랫폼 프리뷰 3 판 : 현재 사용 가능

• IE6 를 업그레이드해주세요 .• IE8 에서 개발해 보세요 .• IE9 플랫폼 프리뷰 3 탄을 다운로드하고 설치해보세요 .

44

IE9 PP3 다운로드 & 데모 http://ietestdrive.com

플랫폼 프리뷰 2 탄 소개 동영상http://www.techdays.co.kr/2010spring/remix10/session1_2.html

http://ietestdrive.com/

http://www.techdays.co.kr/2010spring/remix10/session1_2.html



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

pp3 devweb

Technology