Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Pp3 devweb
Similaire à Pp3 devweb (20)
Plus de Reagan Hwang
Plus de Reagan Hwang (15)
Pp3 devweb
- 1. 개발자를 위한 인터넷 익스플로러 9 플랫폼 프리뷰 3판 황리건 한국 마이크로소프트
- 2. IE6를 떠나며 2 Photo Courtesy AtenDesign Group - http://www.flickr.com/photos/atendesigngroup/4408393890/
- 3. 3
- 4. 4
- 5. 빠른 성능 똑같은 마크업 하드웨어 가속 5
- 6. 빠른 성능
- 7. 기존의 자바스크립트 엔진 Parser Interpreter ByteCode Source Code AST 7
- 8. 새로운 자바스크립트엔진 – “챠크라” Foreground Parser Interpreter ByteCode Source Code AST Background Native Code Background Compiler 멀티 CPU 코어 사용 8
- 10. 10
- 11. 시연 Flying Images / IE8, Chrome, FF, Opera, IE9
- 12. IE8 12 자바스크립트 DOM Drawing Images
- 13. IE9 13
- 14. 시연 Amazon Shelf FishIE Tank Mr. Potato Gun Flickr Images
- 15. window.msPerformance소개 DOM에 통합된 성능 측정 브라우저에서 상호호환 가능한 성능 측정 방식으로 제안 W3C 멤버들과의 파트너십을 통해 만들어 지는 중입니다. 아직 변경 여지가 있습니다. <script type="text/자바스크립트"> var w = window; varnavStart= w.msPerformance.timing.navigationStart+ "ms"; varnavStartTime = Date(w.msPerformance.timing.navigationStart); </script>
- 17. 똑같은 마크업
- 18. IE9 PP2 18
- 19. IE9 PP3 19
- 20. 사용 비율을 참고로한 API 지원 20
- 21. 표준 멤버로써의 활동 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/ 22
- 23. 똑같은 마크업으로 똑같은 결과를 얻게 하기 23
- 24. 시연 Border Radius, IE Logo / IE9 and Other Browsers
- 26. 새로 추가되거나 업데이트된 DOM 강화 완전한 DOM Level 2와 DOM Level 3 지원 DOMContentLoaded 현재 페이지의 컨텐트 로딩이 끝나는 시점에 발생합니다. 복잡한 웹페이지에 UI 기능들을 추가할 때 유용합니다. DOM Traversal 요소들의 간단한 리스트를 통해 열거하는 간단한 방법입니다. 26
- 27. 시연 DOM Traversal Media Gallery
- 28. 새로 추가되거나 업데이트된 자바스크립트 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
- 29. 시연 GetComputedStyle, ECMAScript 5 Game, ECMAScript 5 Array
- 30. GPU로 강화된 HTML 30
- 31. GPU는 게임용?
- 32. GPU는 어디에나 있습니다.
- 33. GPU를 사용하는PC들의 Windows 체험지수 현존하는 PC에 사용되고 있는 CPU 성능은 상당히 좋은 편입니다. 4% 15% 32% 27% 12% 10% 1 2 3 4 5 6 7 8 Windows Experience Index Graphics Scores of Vista and Win7 Users
- 34. GPU를 이용한 HTML5
- 35. 새롭게 지원하는 HTML5 Canvas 자바스크립트를 통해서 2D 그래픽을 그릴 수 있도록 하는 block 요소. 드로잉 메소드 지원 : paths, boxes, circles, text and rasterized images <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> 35
- 36. 시연 Deep Zoom, Canvas Pad
- 37. 새로 추가된 @font-face와 WOFF 폰트 웹페이지에 기본 폰트 외의 폰트를 사용합니다. 사이트 별로 필요한 폰트를 패키지하고 배포할 수 있도록 하는 오픈 웹 폰트 포맷을 지원합니다. @font-face선언으로 웹에서 사용할 수 있도록 설계되었습니다. 오픈타입이나 트루타입 폰트 데이터를 간단히 리패키징합니다. 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> 37
- 38. 시연 Web Fonts
- 39. HTML5 <video> HTML5 <video> 요소 산업 표준 MPEG-4/H.264 비디오 페이지에서 다른 요소들과 함께 사용 가능합니다. HTML 컨텐트, 이미지, SVG 그래픽 하드웨어 가속, GPU 기반의디코딩 속성 src – 소스 파일을 가져올 위치 autoplay – 준비되면 바로 재생할지 여부 controls – 컨트롤을 보여줄지 여부 preload – 페이지 로드에서 소스를 불러올지 여부 loop – 처음으로 다시 되돌릴지 여부 height & width – 플레이어의 가로 세로 크기 <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> 39
- 40. 시연 Youtube, Video Panorama
- 41. HTML5 <audio> HTML5 <audio>요소 산업 표준 MP3 와 AAC audio DOM으로 완전하게 스크립팅 가능합니다. Attributes src – 소스파일을 가져올 위치 autoplay – 준비됐을 때 자동으로 재생할지 여부 controls – 컨트롤들을 보여줄지 여부 preload – 페이지 로드 시에 소스를 불러올지 여부 <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> 41
- 42. 시연 HTML5 Audio Player + XML Playlist
- 43. 인터넷 익스플로러 9 정리 성능 : 새로운 자바스크립트 엔진 여러분의 최신 하드웨어를 이용해서 더 빠르게 실행되는 자바스크립트 엔진 똑같은 마크업: 여러분의 코드 그대로... 코딩에 더 많은 시간을 보내고, 디버깅에 더 적은 시간을 보내세요. 똑같은 마크업이 그대로 동작하도록 하는 건 브라우저의 몫. 하드웨어 가속 : 그리고 더 빨리 실행될꺼에요. 더 좋은 성능의 그래픽 시스템을 필요로 하는 애플리케이션이 더 잘 동작할 거에요. 43
- 44. 플랫폼 프리뷰 3판 : 현재 사용 가능 IE6를 업그레이드해주세요. IE8에서 개발해 보세요. IE9 플랫폼 프리뷰 3탄을 다운로드하고 설치해보세요. IE9 PP3 다운로드&데모 http://ietestdrive.com 플랫폼 프리뷰 2탄 소개 동영상 http://www.techdays.co.kr/2010spring/remix10/session1_2.html 44
- 45. Q&A
Notes de l'éditeur
- Seeing the decline of Internet Explorer 6 and the steady increase of users choosing to upgrade to Internet Explorer 8 is fantastic. We have recommended upgrading from Internet Explorer 6 to Internet Explorer 7 and now to Internet Explorer 8 for years. We will continue to support Internet Explorer 6 with security updates, that's just one of the responsibilities of Windows. We are excited to get users upgrading fromInternetExplorer 6 to Windows 7 and Internet Explorer 8 and then on to InternetExplorer 9. I want to thank you for being part of this movement.
- And that brings us to today. We heard from you wanted more transparency around the builds as we’re delivering them and that’s been why we’ve been shipping the Platform Previews, providing an early, and frequently updated look at what we’re working on. We’re now on our third Platform Preview release, and we’ve achieved our commitment up providing updates about every 8 weeks. The Platform Previews install side by side with your current Internet Explorer installation, and aren’t meant for day to day browsing, but as a place to play and experiment. That’s why you don’t see an address bar, or back or forward button.
- Welcome!My name is [Insert Your Name Here]. Over the next hour or so, I’m going to take you through some of the new developer oriented features in Internet Explorer 9. We’ll take a quick look at how IE got to where it is today, what we’re doing to make sure Internet Explorer 9 is fast. We’ll look at what “Same Mark-Up” means, and how using hardware acceleration to do GPU-Powered HTML is going to make your sites super fast, without changing your code.
- Let’s take a look at what we’re doing to ensure Internet Explorer 9 is fast. And I mean fast!
- In the early days of the web, there was lots and lots of HTML and only little pieces of script here and there, and an interpreter was good enough for that. Over the years, different browsers have added JITters helping code run faster. But there’s a problem – the amount of time and energy that goes into managing the time and scope that the JITter operates in. Basically, users wait. Users have to wait if the JITter JITs too much because the JITter is sitting there compiling the code, and you don't get to run it. The user has to wait if the JITter JITs too little because then the JITter did a little bit and the user is stuck running a slower interpreter.
- Our approach is to use modern PC hardware to its fullest. Chakra, our new 자바스크립트 engine is different from the other engines out there. When Internet Explorer hits 자바스크립트, it immediately starts interpreting it, but at the same time, in parallel with the IE process compiles it in the background. As soon as the compiled version is available, Internet Explorer switches over to that. No longer are you waiting for the interpreter or JITer – your machine is put to good use running the Web faster, without having to make any changes to your pages or code.구글 파이어폭스는 one CPU Core
- Let's talk about 자바스크립트 in particular. WebKits.org publishes a benchmark called SunSpider. Let's see now IE 9's new 자바스크립트 engine compares. So, IE 9's new script engine, you may have heard of it by its internal code name, Chakra, is faster than many browsers. One thing to keep in mind is that we've done very little SunSpider-specific work at this time. We will continue to improve IE 9 script performance. It's interesting to note that the gap between IE 9 and some of the other browsers to its right is about an eye blink, it's about 300 milliseconds, and it took 70 seconds to identify the 300-millisecond difference.
- Show Spinning Images demo in IE8Show Spinning Images demo in ChromeShow Spinning Images demo in FirefoxAdd additional imagesZoom InShow Spinning Images demo in Internet Explorer 9
- Let’s put this all together using the Flying Images demo that we just saw. In Internet Explorer 8, we spend about 0.13 seconds interpreting the 자바스크립트 – that’s the green on the chart. The purple represents almost ¼ of a second writing to the DOM. Finally, it takes us almost a tenth of a second to draw the image on the screen. All told, we’re at just under half a second to move one animation, and the CPU is at nearly 100% the entire time.Let’s take a look at how Internet Explorer 9 handles a single animation. [CLICK]. Each iteration takes only a fraction of a faction of a second, and the CPU, hardly has to move.
- Show Spinning Images demo in IE8Show Spinning Images demo in ChromeShow Spinning Images demo in FirefoxAdd additional imagesZoom InShow Spinning Images demo in Internet Explorer 9
- We’re not only working hard to make our code faster, but to provide you with tools so that you can make your code run faster. Internet Explorer 9 introduces a new set of 자바스크립트 profiling API’s and metrics that can help you instrument you code, so you can better understand where the browser is spending most of it’s time. In addition to using these APIs when developing your site, you can use them to better understand how long it takes for a users page to load, and send those values back to your server in real time.In the code example on screen, I’m using timing.navigationStart, which returns the number of seconds past January 1, 1970 (UTC). By using the Date() function, I can convert that to a local date/time value. To get the end time, I’d use the timing.loadEnd. To get my entire page load time, I can use timingMeasurements.navigation or calculate the value myself. We’re working closely with the W3C Web Working Group to get these new APIs standardized and moved from a draft to a specification that can be implemented across all browsers. When the draft is approved, there will be only one window.performance interface that will work across all browsers, using the same mark-up.
- Show Spinning Images demo in IE8Show Spinning Images demo in ChromeShow Spinning Images demo in FirefoxAdd additional imagesZoom InShow Spinning Images demo in Internet Explorer 9
- Developers want to use the same HTML, the same script, and the same markup across browsers. That's the goal of standards and interoperability. No need for different code paths for different browsers, and that's a key goal for HTML5. We love HTML5 so much, we want it to actually work. In IE 9, it will. We want the same HTML, the same script, the same markup to just work across browsers. And so in IE 9, we will do for the rest of the Web platform what we did for CSS 2.1 in IE 8.
- It’s not enough to just make sure we’re implementing the features and specification that you want. We’re working directly with the W3C to make sure that the specifications that are written are clear and strong. That we can figure out the ambiguities early, before implementation and that everyone has a voice at the table. The Internet Explorer engineering team is well integrated into many different working groups on the W3C, including the HTML5 working group (where Paul Cotton, a Microsoft employee is a co-chair), the SVG Working Group, and many more.Just to give you an idea of who is involved in a working group, I’ve got a few stats from the HTML Working Group. There are over 40 W3C member organizations, more than 400 participants, 280 invited experts, 9 mailing lists. It’s a big, but very important group!Working with the W3C also includes working on testing task forces so that there is an interoperable test suite that all browser vendors can agree upon.
- When we were building Internet Explorer 8, we spent a lot of time making sure our CSS 2.1 implementation was rock solid. While doing that, we realized that there were less than 100 tests in the W3C CSS 2.1 test suite, no where near enough to validate a spec like CSS2.1. Because of that, we worked with the W3C to donate over 7200 CSS test cases, to their test suite.We think it’s vital to have a true, interoperable test suite that all browser vendors can agree upon as a method to test their implementations of HTML5 and other important web standards. That’s why as we’ve been building Internet Explorer 9, we’re doing the same thing for the rest of the platform what we did for CSS2.1 in the Internet Explorer 8 timeframe. We’ve donated over 100 test cases to the W3C to date and there are many more to come! You can see the tests we’ve donated so far on the IE Test Center linked off the IETestDrive.com site.
- When we talk about “same mark-up”, we really mean one major thing. We want the mark up your write, to work the same way, and the right way in every browser. The example you see on the screen shows Internet Explorer 9 Platform Preview compared to Chrome 4. Both have a dashed border, as well as a rounded corners via the CSS3 border-radius property. In Internet Explorer 9, the dashes are the same width all the way around the border, and equal spacing between them. Chrome’s dashes seem a little random. In Firefox 3.6, this works a little better, except in the corners, there are no dashes – it’s just solid line.The same mark up means the code you write works the same way, and the right way, in every browser!
- Show Spinning Images demo in IE8Show Spinning Images demo in ChromeShow Spinning Images demo in FirefoxAdd additional imagesZoom InShow Spinning Images demo in Internet Explorer 9
- There are some important additions and updates that we needed to make to the DOM in order to enable same mark-up for developers. Internet Explorer 9 now has full DOM Level 2 and DOM Level 3 Event support. No longer do you need to special case for Internet Explorer 9. We’ve also added new support for DOM Range an important part of the HTML5 Text Selection APIs that provide a simple, consistent way to extract a piece of a document.DOM Style and DOM Traversal also make it easier to use the same mark-up without having to special case!
- Show Spinning Images demo in IE8Show Spinning Images demo in ChromeShow Spinning Images demo in FirefoxAdd additional imagesZoom InShow Spinning Images demo in Internet Explorer 9
- Show Spinning Images demo in IE8Show Spinning Images demo in ChromeShow Spinning Images demo in FirefoxAdd additional imagesZoom InShow Spinning Images demo in Internet Explorer 9
- HTML5 applications will push the limits of graphical richness and interactivity. IE 9 will run HTML5 applications better by taking advantage of PC hardware through Windows. We call this GPU-powered HTML. HTML5’s graphical richness demands a high-performance graphics subsystem. By harnessing the power of the GPU, we can achieve complex visual effects like alpha-channel blending, smooth, high-definition videos, and lower CPU load.
- Many people think of hard-core gaming machines when people say “GPU”
- But that’s not the case. For the last 8 years, every Windows machine has shipped with a GPU. Whether it’s a super-powerful gaming rig, or a small compact netbook, there’s a GPU in there.
- In fact, based on our research, the GPUs in today’s computers are pretty good as well. Through the Customer Experience Improvement Program where customers have the opportunity to opt-in and send anonymous data about their computers, we know that almost all of the GPU’s out there score at lease a 4!
- Show Spinning Images demo in IE8Show Spinning Images demo in ChromeShow Spinning Images demo in FirefoxAdd additional imagesZoom InShow Spinning Images demo in Internet Explorer 9
- Show Spinning Images demo in IE8Show Spinning Images demo in ChromeShow Spinning Images demo in FirefoxAdd additional imagesZoom InShow Spinning Images demo in Internet Explorer 9
- Show Spinning Images demo in IE8Show Spinning Images demo in ChromeShow Spinning Images demo in FirefoxAdd additional imagesZoom InShow Spinning Images demo in Internet Explorer 9
- Show Spinning Images demo in IE8Show Spinning Images demo in ChromeShow Spinning Images demo in FirefoxAdd additional imagesZoom InShow Spinning Images demo in Internet Explorer 9