Transcript
개발자를 위한 인터넷 익스플로러 9플랫폼 프리뷰 3 판
황리건한국 마이크로소프트
IE6 를 떠나며
2Photo Courtesy Aten Design Group - http://www.flickr.com/photos/atendesigngroup/4408393890/
3
4
빠른 성능
똑같은 마크업
하드웨어 가속
5
빠른 성능
기존의 자바스크립트 엔진
7
Source Code
Parser AST InterpreterByteCode
새로운 자바스크립트 엔진 – “챠크라”
8
Foreground Source Code
Parser AST InterpreterByteCode
Background Native Code
Background Compiler
멀티 CPU 코어 사용
10
시연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"> <!-- Only shown when browser doesn’t support video --> <!-- You Could Embed Flash or Silverlight Video Here --></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> <!-- Only shown when browser doesn’t support audio --> <!-- You could embed Flash or Silverlight audio here --></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
Q&A
© 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.
top related