HTML5, Hardware Accelerated: First IE9 Platform Preview Available for Developers

When we started looking deeply at HTML5, we saw that it will enable a new class of applications. These applications will stress the browser runtime and underlying hardware in ways today’s websites don’t. We quickly realized that doing HTML5 right – our intent from the start – is more about designing our browser’s subsystems around what these new applications will need than it is about a particular set of features. From the beginning, we approached IE9 with the goal of enabling professional-grade, modern HTML5 support on top of modern hardware through Windows.

At the MIX conference today, we demonstrated how the standard web patterns that developers already know and use broadly run better by taking advantage of PC hardware through IE9 on Windows. This blog post provides an overview of what we showed today, across performance, standards, hardware-accelerated HTML5 graphics, and the availability of the IE9 Platform Preview for developers.

First, we showed IE9’s new script engine, internally known as “Chakra,” and the progress we’ve made on an industry benchmark for JavaScript performance. With the differences between script engines on benchmarks approaching the duration of an eye-blink, we described our approach for making real-world sites faster. Chakra compiles JavaScript in the background on a separate core of the CPU, parallel to IE.

We showed our progress in making the same standards-based HTML, script, and formatting markup work across different browsers. We shared the data and framework that informed our approach, and demonstrated better support for several standards: HTML5, DOM, and CSS3. We showed IE9’s latest Acid3 score (55); as we make progress on the industry goal of having the same markup that developers actually use working across browsers, our Acid3 score will continue to go up. As part of our commitment to the standards process, we submitted test cases to the standards bodies. We also made these tests available for everyone to try in any browser.

In several demonstrations, we showed the significant performance gains that graphically rich, interactive web pages enjoy when a browser takes full advantage of the PC’s hardware capabilities through the operating system. The same HTML, script, and CSS markup work across several different browsers; the pages just run significantly faster in IE9 because of hardware-accelerated graphics. IE9 is also the first browser to provide hardware-accelerated SVG support.

Finally, we announced the availability of the first IE Platform Preview for developers, and our commitment to update it approximately every eight weeks. We want the developer community to have an earlier hands-on experience with the progress we’re making on the IE platform. The Platform Preview, and the feedback loop it is part of, marks a major change from previous IE releases.

image of the Platform Preview on it's home page, the IE9 test drive site.

Performance

IE9 has a new JavaScript engine, “Chakra.” Here’s a chart of IE9’s performance on a particular industry benchmark for JavaScript performance, the Webkit Sunspider test:

Bar graph of Webkit SunSpider Javascript Benchmark results

You’ll notice that IE9 is faster at this benchmark than IE8 and several other browsers. It’s interesting to note that the difference between today’s IE9 preview and the browsers to its right in this graph. It takes about 70 seconds to identify a 300ms difference between browsers.

As we continue to make IE9’s script engine faster for real world sites, IE will continue to become faster at this particular benchmark as well. To date we’ve done very little specific tuning for Webkit Sunspider. As with most benchmarks, depending on your machine, the differences may vary.

The performance you experience browsing actual websites often has less to do with JavaScript than with other subsystems in the browser. For example, some sites spend more of their time in laying out the page or rendering it than running script. The first chart in this blog post from the Professional Developers Conference illustrates this with data. Today’s PCs have specialized hardware to accelerate graphics performance. IE9 uses that widely available hardware to speed up all text and graphics rendering on webpages and make webpages faster.

To improve JavaScript performance even more, Chakra does something quite different from other script engines today. It has a separate background thread for compiling JavaScript. Windows runs that thread in parallel on a separate core when one is available. Compiling in the background enables users to keep interacting with webpages while IE generates even faster code.  By running separately in the background, this process can take advantage of today’s multi-core machines – so, users with a Core2Duo or QuadCore or i7 or Phenom II can apply that power to making webpages faster without any additional effort.

Developers get the performance benefits of modern PC hardware without having to change anything on their sites. Users simply wait less and interact more, like a native program. This design enables better performance for the web development patterns that occur on many real world sites. The key here is bringing the best technology available to most important language you use, JavaScript.

Standards

The goal of standards and interoperability is that the same HTML, script, and formatting markup work the same across different browsers. Eliminating the need for different code paths for different browsers benefits everyone, and creates more opportunity for developers to innovate.

Many standards are still emerging. They are in committee in draft form, or partially implemented, often in different ways, across different browsers.  Developers face a hard challenge here: they need to work harder than they should, to write more and different HTML, script, and markup, just to get similar but not always the same results across different browsers.

We want the same markup to just work across different browsers. In IE9, we’re doing for the rest of the platform what we did for CSS 2.1 in IE8. IE8 delivered a high-quality CSS 2.1 implementation, sticking to the standard, and looking to other implementations in places where the standard is ambiguous. Developers should expect more from across the industry on this front in order to make HTML5 applications easier for developers to write.

Our approach here starts with data. The DOM and JavaScript APIs that developers actually use on the web set the baseline for which standards to support in IE9. To get this data, we built a tool that examined the web API usage of 7000 top sites. Here’s a graph of the distribution – how many sites used each of the APIs. This is data we will blog about in great detail separately.

Line graph of API usage over the Top ~7000 sites, the graph shows that the usage of api's decays exponentially as you move away from the top most used apis. the top most used api is used on approx 7000 sites, the 51st most used api is used on approx 3000 sites, the 101st most used api is used on about 1250 sites, the 151st most used api is used on about 500 sites, the 201st most used api is used on about 200 sities, the 251st most used api is used on abot 100 sites, the 301-701 most popular apis are used on less than 100 sites approaching 0 sites.

We set out to do every standard that showed up in the data. In IE9 you’ll also see support for several standards that don’t appear in the data – in order to complete scenarios that HTML5 applications will need.

The main technologies to call out here broadly are HTML5, CSS3, DOM, and SVG. The IE9 test drive site has more specifics and samples. At this time, we’re looking for developer feedback on our implementation of HTML5’s parsing rules, Selection APIs, XHTML support, and inline SVG. Within CSS3, we’re looking for developer feedback on IE9’s support for Selectors, Namespaces, Colors, Values, Backgrounds and Borders, and Fonts. Within DOM, we’re looking for developer feedback on IE9’s support for Core, Events, Style, and Range.

Some people use Acid3 as a shorthand for standards. Acid3 tests about 100 details of a dozen different technologies. Some are still in “under construction.” Some of the patterns, like SMIL animations, are inconsistent with other parts of HTML5, like CSS3 animations, and need to be reconciled. Here’s a screenshot of how today’s IE9 Platform Preview runs today’s Acid3 test:

IE9 Platform Preview build showing the Acid 3 test page with a score of 55/100

As IE makes more progress on the industry goal of “same markup” for standards and parts of standards that developers actually use, the Acid3 score will continue to go up as a result. A key part of our approach to web standards is the development of an industry standard test suite. Today, Microsoft has submitted over 100 additional tests of HTML5, CSS3, DOM, and SVG to the W3C. You can try out some of the tests we’ve submitted to the W3C here.

Microsoft works with the standards organization as part of the standards process to create comprehensive tests. We submit our tests to the appropriate group, and work together with other browser vendors as part of that group to establish a fair, accurate, and comprehensive test suite. Today, there are still too many scenarios in which developers need to use different HTML, script and formatting markup and get different results. A comprehensive test suite from the standards body helps developers and the industry.

GPU-powered HTML5

HTML5 applications will need great script performance and consistent “same markup, same results” across browsers. Great HTML5 applications will build on that foundation and go further, providing game-like interactivity and movie-like graphical richness to the user experience. 

Today’s standards-markup web pages and today’s browsers are limited in this regard because they can use only a fraction of what PC hardware and the operating system can do. HTML5 applications will demand more.

In anticipation of these applications, IE9 uses Windows’ modern graphics APIs and the PC’s hardware to accelerate all the graphics and text that the browser draws on the screen. A basic example involves a small, simple web page that animates images, having them follow the mouse pointer:

IE9 Platform Preview buid runnig a webpage of spinning browser logos. There are 16 images on the page and IE is drawing them with 64 frames per second.

Notice that running the same HTML, script, and markup, IE9 provides more responsiveness and more frames per second. Many of today’s websites spend much of their time drawing objects to the screen, as described above in the performance section.

IE9 is the first browser to provide fully hardware-accelerated SVG support. The IE9 developer tools support SVG as well, and we are excited to see what developers build on top of modern hardware with a platform that has great performance and internal consistency. We will discuss SVG in depth in a future blog post.

IE Preview

Today we also announced the availability of the first IE9 Platform Preview for developers, and our commitment to update it approximately every eight weeks. The Platform Preview, and the feedback loop it is part of, marks a major change from previous IE releases.

With these Platform Preview builds, developers have earlier access to the progress we’re making on the IE platform. They have a better forum to share and discuss feedback, available directly from the Platform Preview. Combined with our engagement with standards bodies and the development of industry standard test suites, this open community discussion and earlier and more frequent builds reflect our commitment to the web.

As an example of additional standards support to come in an update to the Platform Preview, we showed HTML5 video support at the MIX conference, as well as how HTML5 video (specifically industry standard HD-encoded, H.264 720p) has much better performance when it uses the operating system to take advantage of PC hardware for video decoding. 

If you’re a developer or technical enthusiast, please download the Platform Preview.  It’s the first preview of how standard web patterns that developers know and use broadly can run better by taking advantage of PC hardware on Windows.

Last week, Channel 9 interviewed several of the engineers on the team. You can find videos of the interviews here:

Introducing the IE9 Platform Preview
GPU powered HTML5
IE9 performance: from JavaScript to COM to DOM to HTML5
SVG past, present, future of vector graphics on the web

Thanks,
Dean Hachamovitch
General Manager, Internet Explorer

P.S. The IE9 keynote from MIX is now availble on demand. 

Update 3/18/10 - Added a link to Dean's keynote and added Phenom II to the list of processors which will improve website performance.