Internet Explorer 9 для разработчиков<br />Антон Видищев<br />MCPD, руководитель команды компании Eclipse-SP<br />avidishc...
Роль браузеров в Windows<br />57% времени на компьютере тратится в браузере<br />
Наши ожидания от Интернет<br />
Больше, чем обычно…<br />
Скорость<br />Сайт, но не браузер<br />Безопасность<br />Разработка не для браузера<br />Какие требования предъявляются к ...
Internet Explorer 9 <br />
НовыйJavaScript двигатель: Chakra<br />НовыйDOM<br />Оптимизация отображения<br />HTML & CSS parsing<br />СкоростьИспользу...
WebKitSunSpider JavaScript Benchmark Results<br />Version 0.9.1, Results Generated September 4th, 2010<br />8<br />
The JavaScript Engine<br />Foreground<br />Source Code<br />Parser<br />AST<br />Interpreter<br />ByteCode<br />
Foreground<br />Source Code<br />Parser<br />AST<br />Interpreter<br />ByteCode<br />New JavaScript Engine – “Chakra”<br /...
СкоростьИспользует возможности всего PC<br />Аппаратное ускорение<br />
window.msPerformance<br />12<br />Возможность измерять производительность<br /><script type="text/javascript"><br />var w ...
Демонстрация<br />
Сайт, но не браузер…Сконцентрируйтесь на работе с сайтом<br />Новый интерфейс<br />Интеграция с Windows 7 <br />Нотификаци...
15<br />
16<br />
Как работать с Pinned Sites<br />Ничего менять не нужно<br />Расширение возможностей<br />17<br />Любая дополнительная инф...
Работа с Pinned Site<br /><meta name="application-name" content="Site Name" /><br /><meta name="msapplication-tooltip" <br...
Работа с Pinned Site<br />if (window.external.msIsSiteMode) {<br />  if (window.external.msIsSiteMode()) {<br />   // we a...
Работа с Pinned Site<br />window.external.msSiteModeSetIconOverlay(<br />'http://host/overlay1.ico','Overlay 1');<br />win...
Работа с Pinned Site<br /><meta name="msapplication-task"<br /> content="name=Task 1;action-uri=http://host/Page1.htm;<br ...
Демонстрация<br />
Разработка «не для браузера»…Единая разметка<br />W3C HTML5, CSS3, SVG<br />
Web API Usage <br />7000  top sites<br />7000<br />Number of sites<br />0<br />API (by rank)<br />1<br />50<br />700<br />
Internet Explorer Testing Center<br /><br />
Демонстрация<br />
Internet Explorer 9 Betaуже сейчас<br />Мигрируйте с ранних версий (Internet Explorer 6)<br />Используйте стандарты!<br />...
Вопросы<br />
Upcoming SlideShare
Loading in...5

Internet explorer 9 для разработчиков


Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • We’re here because of the beauty of the web. We love the web because of sites. Browsers are important because they’re how we run sites.When you buy a PC or device, you expect a great experience. Windows customers expect the same… they want great PCs that are secure, fast, reliable, work with other hardware out of the box, and deliver a great experience of the web.We care about browsers because you bought a PC and a copy of Windows and you should have a great web experience. More than half the time that people spend in Windows (59%) is online in a browser. So, it’s worth making it greatThere are over 1 billion Windows customers in the world today. We have built Internet Explorer for these users; optimized the product to meet their needs. We want to deliver a best in class experience of the web through Windows, as compelling as the rest of the native Windows applications.
  • Now, let’s dive into the evolution of the web and how it had dramatically changed over recent years.The web today is increasingly interactive, personalized and an increasingly social place to share and watch videos.The web yesterday was static, content focused – a utilitarian tool. People spent their time finding and consuming data, but it was difficult to share information in real time.As we look to tomorrow’s web, we see an interactive web with rich graphics and fast performance. We see an increasing number of rich web applications connecting and engaging users. And as the promise of these rich web application dominates the user experience and as users spend more time in the browser on their PC – they will come to expect more, they will expect the same richness and interactive capabilities once exclusive to native PC applications.The reality is today’s browsers however are wholly insufficient for this upcoming web. As the web comes to dominate the time customers spend on their PC, they will expect more - they will come to expect the same capabilities
  • There are more choices than ever when it comes to web browsing. This choice is a good thing. It’s good for customers, it’s good for MS, and it’s good for the web.IE8 continues to be the world’s #1 and fast growing browser. It continues to lead in malware &amp; phishing protection even as competitors continue to ship new versions. We are the only browser by investing in the best data available for identifying in malware. We continue to invest in our backend to improve catch efficiency. IE passed more than 1 billion Malware blocks on July 5th. May &amp; June saw more than 100 million blocks / month. Lifetime phishing protection across IE7 + IE8 is around 160 million blocksThis last year IE8 grew an entire FF and continues to increase share above all competitors every month since its launch in March09. When consumers and developers are evaluating browsers there are a number of factors, however it’s really important to keep in mind that while there are all these browsers out there…no one really cares about a browser.
  • To let the play shine a browser needs to:Be fast for real world sites: today and tomorrow. As an industry we’ve had an almost myopic focus on one element of speed (script execution performance). Yet today’s browsers only use 10% of the computing power on the devices you ship. As web applications become increasingly complex and graphically based, and as customers spend more and more time using these applications, the browser needs to be able to take advantage of computing power offered with modern hardware and operating systems. Deliver a user experience that is about your sites, because no one opens their browser solely for the sake of opening their browser. People go online to get to the websites and applications they care about most: to get news about the sports that they care about, to learn about community events that matter to them, and to connect with the people that enrich their lives. The browser can enhance that online experience, but ideally, the browser melts into the background and allows the sites that people care about to come forward and shine.Protect users and their private information - continue IE9’s industry leadership in building the world’s most trusted browser because the web still isn’t as secure or private as it should be. Enable ‘same mark-up” by supporting HTML5. This means developers can move away from writing the same sites two or three times, or creating browser prefixes to targer specific browsers. As developers have rallied around the promise of a new class of rich HTML5 web applications, we have worked with standards bodies like the W3C to bring these standards to the marketplace.
  • Enter IE9… unleash a more beautiful web.
  • There is a new engine under the hood in IE9 that delivers a fast, graphically immerse experience as responsive as the applications installed on your computer. Called Chakra, this new JavaScript engine is optimized to take advantage of the multiple CPU cores running on Windows Vista and Windows 7 by compiling the JavaScript to highly efficient machine code in the background, while interpreting the JavaScript in the foreground. Once compilation is finished, Chakra switches to the compiled and significantly faster machine code optimized for that PC. Internet Explorer 9 scores very well in popular JavaScript benchmarks like WebKit’sSunSpider, shown here.You’ll notice that the performance difference between IE9 and other browsers in this benchmark is in the range of an eye-blink. As we continue to make IE9’s script engine faster for real world sites, IE will continue to become faster at this particular benchmark– although not a goal of our performance work. The performance you experience browsing actual websites often has less to do with JavaScript than with other subsystems in the browser like DOM, layout optimization and HTML &amp; CSS parsing – which is why to make the browser all-around fast we have optimized all our subsystems.The newly optimized document-object model (DOM) provides dramatic speed improvements by interacting more efficiently with Chakra.Internet Explorer 9 has an all new layout system that is optimized to reduce memory use, particularly for HTML5 websites which will place even more demands on the browser.HTML parsing in Internet Explorer 9 has been improved to more closely align to behavior described in the HTML5 Draft Specification. Internet Explorer 9 handles generic elements as expected- rather than simply collapsing them, and is consistent with other major browsers. Internet Explorer 9 has more support for CSS than any prior Microsoft browser building on the work that was done in Internet Explorer 8.
  • Let&apos;s talk about JavaScript in particular. publishes a benchmark called SunSpider. Let&apos;s see now IE 9&apos;s new JavaScript engine compares. So, IE 9&apos;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&apos;ve done very little SunSpider-specific work at this time. We will continue to improve IE 9 script performance.  It&apos;s interesting to note that the gap between IE 9 and some of the other browsers to its right is less than a blink of an eye. The difference between IE9 Platform Preview 4 and Safari 5.0 is 22ms, and between IE9 and Opera 10.6 beta, it’s 104 milliseconds. A tenth of one second, and it took nearly 70 seconds (or 70,000 milliseconds) to identify that 104-millisecond difference!
  • 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&apos;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 JavaScript engine is different from the other engines out there. When Internet Explorer hits JavaScript, 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.
  • Today, when you browse the web, you use about 10% of the power of your computer. Many browsers take a lowest common denominator approach to performance and ignore much of the capabilities of the operating system and hardware in the PC. Internet Explorer 9 takes full advantage of both the operating system and hardware to fully accelerate rendering of web pages.Internet Explorer 9 leverages the power of the GPU through the DirectX®, Direct2D® and DirectWrite® API’s to ensure that text is crisp, graphics and animations are smooth. New GPU powered HTML5 enables stunning HD video and audio content without the need for a plug-in.Hardware accelerated graphics, text and HD video mean differentiated PCs through better hardware..You can find examples of rich and immersive HTML5 web experiences at The image of the fish tank demo here is an example of how taking full advantage of your hardware creates crisp, speedy and accurate graphics.
  • 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 JavaScript 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 other browser vendors on a W3C 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.Demos From IETestDrive.com
  • Let’s talk about what makes IE9 clean. The role of the browser is not to simply get out of the way, but to bring sites forward. In Internet Explorer 9, the simplified yet enhanced user interface and user experience puts the focus on the content of each website. By default, only the controls essential for browsing are in the browser frame, letting people browse and experience all that the sites have to offer. Characteristics of each website are reflected throughout the experience, allowing users to focus on and be more immersed in the site’s content. Elements of each website are integrated into the browser.Web navigation is easier in IE9 with features that are seamlessly integrated with Windows 7. You can pin your favorite sites to your Windows taskbar for direct access without having to first open the browser. And when the pinned site is launched from the taskbar, the browser frame and navigational controls integrate the site’s icon and primary Also, with jump lists, aero snap and thumbnail toolbars IE9 becomes an even more integrated part of your Windows experience. In Internet Explorer 9, search and navigation functionality is integrated into One Box. One Box gives users a single place to start whether they want to navigate to a specific site or search for a site. One Box in Internet Explorer 9 incorporates search functionality into the address bar. With One Box, users can: navigate to a site, search for a site, switch between search providers, or access browsing history, Favorites, or suggestions from search providers.Finally, with streamlined notifications and a new non-modal suggest bar you can continue browsing and remain informed at the same time.
  • So in Internet Explorer 9, we took the same principles we applied to designing Windows 7 – bringing the apps and tasks people do to the forefront – and decided the best thing we could do for the browser was to let your sites shine through. As the web has changed from being less about finding information and more about using applications and sharing information, customer preferences for using the Web have shifted as well.If a shortcut to Microsoft Outlook can be on the taskbar, why can’t a shortcut to Windows Live Hotmail be there as well? People have Zune on their taskbar, why not their favorite music site? As we observed people in the lab and analyzed telemetry data, we saw two things happening: First, we observed that people who used the new Taskbar in Windows 7 wanted to add sites to the Taskbar to make access to workflow information more accessible. This was one of the most common requests for the feature. Second, we saw more and more time being spent in the browser – around 57% of web use time. As a result, we looked at how Internet Explorer 9 could make websites even better. We created the concept of pinning sites so that people could drag their websites to their Windows 7 taskbar and interact with them through Jump Lists, just like they can with native applications
  • With Pinned Sites, you can drag your favorite sites into the Windows taskbar to make access easy. Pinned Sites co-mingle easily with your other native Windows 7 applications. Each site that is pinned has taskbar previews and a Jump List, so that you can interact with these sites with the ease and familiarity of other Windows applications. Jump Lists are a quick way to get to frequently visited websites without first opening your browser. Thumbnail preview controls available on the Windows 7 taskbar provide quick controls to sites that support them. Using Thumbnail preview controls, you can pause or rewind or video if the pinned site supports them. You can also tear tabs off within Internet Explorer 9 by dragging it away from the browser and using Windows Aero Snap to position the content side by side in one continuous motion, just like a native application.
  • Sites can easily be pinned by users without any changes to your existing code – they can just drag the favicon in the address bar down to the task bar, and the site is pinned. Internet Explorer 9 will use the existing favicon as the icon for the app, and they’ll get the basic Pinned Site experience. Providing a basic experience is a good start, but customers will want to pin sites that integrate the best, so that they can interact with your site with the ease and familiarity of other Windows Applications. For example, providing Jump Lists is a quick way to get to frequently visited pages without first opening your browser. Adding icon overlays to provide notifications about how the status of an application has changed, or adding thumbnail preview controls available on the Windows 7 taskbar to provide quick control to your site. We’ll take a quick look at how you can enhance your Pinned Site experience with some simple code.
  • The following optional named meta elements can be used to customize the default behavior of your Pinned Site. These element are only used when the the browser pins your site for the first time. application-name tells the browser the name of the shortcut, if it’s missing, the document title is used instead.msapplication-tooltip is optional text that displays as a tooltip when the mouse pointer hovers over the Pinned Site icon in the Windows Start Menu or taskbar.msapplication-starturl is the root URL of the application. If it’s missing, the address of the current page is used instead. Internet Explorer 9 only supports HTTP, HTTPS, and FTP protocols for pinned sites.
  • The advantage of adding a website into the start menu is that it can be accessed like any other application. This approach creates a new type of favorite that lives inside the Start Menu. There are two different ways that a user can add a website their start menu. The first which requires no code changes from you, is by the user grabbing the favicon in the address bar and dragging it down to the Task Bar or Start Menu.You can also surface your application as a Pinned Site on your page by using some simple JavaScript. The code sample on screen first uses the msIsSiteMode property to determine if the browser supports site mode and returns a boolean value telling you if SiteMode is supported. If it is, we can then use the same API as a function to check to see if the site is already in site mode. If it’s not, calling msAddSiteMode() will prompt the user and ask them if they want to Pin the site.
  • You can use icon overlays to display alerts or provide progress updates for example network status, email notifications, meeting reminders or new information that they may want to know about quickly. Alerts will get the attention of a user when the view to the Pinned Site browser window is blocked. This includes when the browser window is minimize or when the browser window is blocked by another window. Overlays can be added via a simple JavaScript call to msSiteModeSetIconOverlay that specifies the icon and an optional description that will be used as the tooltip of the information that is being conveyed by the icon overlay.
  • Internet Explorer 9 provides an integrated Windows navigation experience with websites that support Jump Lists. Defining Jump Lists tasks for a website allows you to surface your most common commands to users. This facilitates the execution of those commands without having to modify the layout of your site. In addition, it provides up to five static URIs that can be access at any time, even if a pinned site browser instance isn’t running. When a user clicks on one of the tasks, it is opened inside it’s own tab in the current browser instance, or it creates a new browser instance and opens that URL.Jump List tasks are defined using HTML meta-tags that provide information about the task name, the URI to open, and the location of the icon file to display. In the example on screen, we’ve defined two tasks, “Task 1” and “Task 2”, when “Task 1” is selected, Page1.htm is displayed, and similarly when “Task 2” is selected, Page2.htm from a different domain is displayed. The URLs defined in tasks are not restricted to the same domain as the application.
  • When we talk about “same mark-up”, we really mean one major thing. We want the mark up you 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 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. 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. For example, we’re on the SVG Testing Taskforce, HTML Testing Taskforce, and Accessibility Testing Taskforce and have created and submitted 2,138 test cases to the standards bodies as of the release of the Internet Explorer Platform Preview Build 4 on August 4, 2010
  • Now, at the same time, we want to be responsible about the standards that are still emerging, the standards that are in committee, and the standards that are partially implemented, often in different ways, across browsers. And so to make decisions on this front, we started from data.  So we set out to support every standard we saw in real-world data. IE 9 will also support several standards that are not represented in this data, and we&apos;re going to do that to complete the scenarios that HTML5 applications will need.  Now, let me explain this chart. We wrote a tool and it navigated 7,000 sites and it reported all the script activity that happened in these top 7,000 sites. The number one API used, index of, 94 percent of these sites. Get elements by ID, which I&apos;m sure all of you use, number 13, 80 percent. We found that script changed CSS opacity on elements a lot of the time.  Now, the most broadly used API that&apos;s not in IE 8 that you&apos;ll see on this chart is add event listener, number 17, with 55 percent usage across these sites.  Now, because we started from data, what developers like you really used was our starting point for what to support.
  • An important way to resolve browser differences is through testing. 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 1600 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 site.Demos From IETestDrive.com
  • Internet explorer 9 для разработчиков

    1. 1. Internet Explorer 9 для разработчиков<br />Антон Видищев<br />MCPD, руководитель команды компании Eclipse-SP<br /><br />
    2. 2. Роль браузеров в Windows<br />57% времени на компьютере тратится в браузере<br />
    3. 3. Наши ожидания от Интернет<br />
    4. 4. Больше, чем обычно…<br />
    5. 5. Скорость<br />Сайт, но не браузер<br />Безопасность<br />Разработка не для браузера<br />Какие требования предъявляются к браузеру…<br />
    6. 6. Internet Explorer 9 <br />
    7. 7. НовыйJavaScript двигатель: Chakra<br />НовыйDOM<br />Оптимизация отображения<br />HTML & CSS parsing<br />СкоростьИспользует возможности всего PC<br />
    8. 8. WebKitSunSpider JavaScript Benchmark Results<br />Version 0.9.1, Results Generated September 4th, 2010<br />8<br />
    9. 9. The JavaScript Engine<br />Foreground<br />Source Code<br />Parser<br />AST<br />Interpreter<br />ByteCode<br />
    10. 10. Foreground<br />Source Code<br />Parser<br />AST<br />Interpreter<br />ByteCode<br />New JavaScript Engine – “Chakra”<br />Background Compiler<br />Native Code<br />Background<br />Compiled JavaScript<br />In The Background<br />Using Multiple Cores<br />
    11. 11. СкоростьИспользует возможности всего PC<br />Аппаратное ускорение<br />
    12. 12. window.msPerformance<br />12<br />Возможность измерять производительность<br /><script type="text/javascript"><br />var w = window;<br />varnavStart= w.msPerformance.timing.navigationStart+ "ms";<br />varnavStartTime = Date(w.msPerformance.timing.navigationStart);<br /></script><br />
    13. 13. Демонстрация<br />
    14. 14. Сайт, но не браузер…Сконцентрируйтесь на работе с сайтом<br />Новый интерфейс<br />Интеграция с Windows 7 <br />Нотификации<br />Загрузка файлов<br />
    15. 15. 15<br />
    16. 16. 16<br />
    17. 17. Как работать с Pinned Sites<br />Ничего менять не нужно<br />Расширение возможностей<br />17<br />Любая дополнительная информация<br />Добавление сайта программным путем<br />Собственная иконка<br />Определение задач в Jump List<br />
    18. 18. Работа с Pinned Site<br /><meta name="application-name" content="Site Name" /><br /><meta name="msapplication-tooltip" <br /> content="Start the Pinned Site" /><br /><meta name="msapplication-starturl" <br /> content="" /><br />Используйте обычные meta элементы<br />
    19. 19. Работа с Pinned Site<br />if (window.external.msIsSiteMode) {<br /> if (window.external.msIsSiteMode()) {<br /> // we are already in site mode<br /> }<br /> else {<br /> // add site to the Programs menu<br />window.external.msAddSiteMode()<br /> }<br />}<br />
    20. 20. Работа с Pinned Site<br />window.external.msSiteModeSetIconOverlay(<br />'http://host/overlay1.ico','Overlay 1');<br />window.external.msSiteModeClearIconOverlay();<br />
    21. 21. Работа с Pinned Site<br /><meta name="msapplication-task"<br /> content="name=Task 1;action-uri=http://host/Page1.htm;<br /> icon-uri=http://host/icon1.ico"/><br /><meta name="msapplication-task"<br />content="name=Task 2;action-uri=http://host2/Page2.htm;<br /> icon-uri=http://host2/icon2.ico"/><br />Jump Lists<br />
    22. 22. Демонстрация<br />
    23. 23. Разработка «не для браузера»…Единая разметка<br />W3C HTML5, CSS3, SVG<br />
    24. 24. Web API Usage <br />7000 top sites<br />7000<br />Number of sites<br />0<br />API (by rank)<br />1<br />50<br />700<br />
    25. 25. Internet Explorer Testing Center<br /><br />
    26. 26. Демонстрация<br />
    27. 27. Internet Explorer 9 Betaуже сейчас<br />Мигрируйте с ранних версий (Internet Explorer 6)<br />Используйте стандарты!<br />Загружайте Internet Explorer 9 Beta<br />И тестируйте свои сайты!<br />Больше на…<br /><br />
    28. 28. Вопросы<br />
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.