As developers experiment and begin the transition from writing today’s websites to building HTML5 applications, they will test the limits of browsers. For example, the huge difference between hardware accelerated HTML5 video and plain HTML5 video support in a browser was clear in the demo we showed at MIX.
Because some browsers run on many different operating systems, there can be a tendency to use a “least common denominator” approach to implementing HTML5. By using more of the underlying operating system, and taking advantage of the power of the whole PC, IE9 enables developers to do more with HTML5. Running through Windows, instead of just on Windows, makes a big difference; the web runs more like a native application. This is consistent with our approach of architecting HTML5 support in, from the ground up, rather than just grafting in some HTML5 features.
The third Platform Preview of Internet Explorer 9, available now, continues the deep work around hardware acceleration to enable the same standards-based markup to run faster. This is the latest installment of the rhythm we started in March, delivering platform preview releases approximately every eight weeks and listening to developers. You’ll see more performance, same markup, and hardware accelerated HTML5.
This video of same markup running in IE9 and other browsers shows what hardware acceleration means for the new, graphically rich and interactive HTML5 websites to come from developers:
var vid = document.getElementById(“myvid”);
if(vid && vid.canPlayType && !vid.canPlayType(“video/mp4”).match(/^(probably|maybe)$ /i)) {
vid.parentNode.insertBefore(vid.firstElementChild, vid);
vid.style.display = “none”;
}
Note this video uses the HTML5 video tag (with the H.264 codec) if your browser supports it, and falls back to other methods otherwise. It’s a good example of same markup in action.
Performance through the power of the whole PC
Today, people expect less from a website than they do from native applications in terms of power, richness, responsiveness, and interactivity. With the third platform preview, we continue to deliver on the promise of a fully hardware accelerated browser where all of the support for text, graphics, and media uses the underlying hardware through Windows, making the full power of the PC available for the Web. Using the power of the whole PC shatters the previous constraints that limited websites.
JavaScript is one component of browser performance, and Webkit Sunspider is one measure of script performance. The latest platform preview shows how IE9’s JavaScript engine continues to get faster. Here’s the chart:
You see the progress with this zoomed-in chart, showing just the IE9 platform previews and the pre-release versions of other browsers:
Looking at the differences between the script engines’ performance, you see the performance gaps between the fastest script engines are now less than 50 milliseconds – and that’s executing several million script instructions during the benchmark test. This difference is already under any human perception threshold, and we’re not done yet.
Many sites spend lots of time in subsystems other than JavaScript. If browser performance were entirely attributable to JavaScript, the performance on the test drive site samples would look like the Webkit Sunspider graph; that’s not the case. You can expect that we will continue to focus on real-world performance and not optimize for any specific benchmark.
Introducing hardware accelerated canvas, video and audio
With the third platform preview, we introduce support for the HTML5 Canvas element. As you know our approach for standards support is informed both by developer feedback and real word usage patterns today, along with where we see the web heading. Many web developers have asked us to support this part of HTML5 and we definitely took this feedback into account as we prioritized our work.
Like all of the graphics in IE9, canvas is hardware accelerated through Windows and the GPU. Hardware accelerated canvas support in IE9 illustrates the power of native HTML5 in a browser. We’ve rebuilt the browser to use the power of your whole PC to browse the web. These extensive changes to IE9 mean websites can now take advantage of all the hardware innovation in the PC industry.
Try the Asteroid Belt sample and Fish Tank sample on the test drive site to see hardware accelerated Canvas in action. Together with Amazon, we built a book shelf sample showing the potential for bringing the richness of hardware accelerated canvas into an interactive e-commerce experience.
Similarly, we partnered with the Internet Movie Database (IMDB) to build the Video Panorama sample to demonstrate the possibilities for bringing hardware accelerated HTML5 Video and graphics interactivity together to create new applications and experiences. Our focus is on delivering a complete, highly interoperable implementation of canvas, video, and audio that makes the most of the full power of the PC.
To help you better understand how these samples work, we created videos that provide a look “under the hood” for Fish Tank, Amazon Shelf, and Video Panorama. As the browser uses more of the hardware, your experience depends on the hardware you have, just as it always has. With hardware accelerated graphics, the graphics card and driver combination play a significant role in how you experience the various examples and benchmarks.
The PC hardware ecosystem has made huge advances over the last few years. Today’s GPUs provide up to 10 times the computing power of CPUs, a clear trend in GPU processing power compared to CPU over recent years. Given how important the web is, our focus is making that power available to web developers. With IE9 developers can run the same, W3C standards-based markup as in other browsers – just faster, taking advantage of the underlying hardware. The result of using the power of the whole PC to browse is a new class of web application without many of the limits on today’s sites.
The first two platform previews demonstrated hardware acceleration of text, images, and vector graphics. Preview 3 completes the media landscape for modern websites with hardware accelerated video, audio, and canvas. Developers now have a comprehensive platform to build hardware accelerated HTML5 applications. This is the first browser that uses hardware acceleration for everything on the web page, on by default, available today for developers to start using for their modern site development.
Same Markup
As we have said before, web browsers should render the same markup – the same HTML, same CSS, and same script – in the same way. That’s simply not the case today across many browsers and many elements of markup. Enabling the same markup to work the same across different browsers is as crucial for HTML5’s success as performance. Our investments in standards and interoperability are all about enabling the same markup to just work. When developers spend less time re-writing their sites to work across browsers they have more time to create amazing experiences on the web.
The third platform preview continues to support more of DOM and CSS3 standards that developers want. Examples here include DOM Traversal, full DOM L2 and L3 events, getComputedStyle from DOM Style, CSS3 Values and Units, and CSS3 multiple backgrounds. And as with each previous Platform Preview, the Developer Guide includes a list of all available features. We continue to work with the standards bodies and the browser web community to deliver same markup.
Same Markup: Video, Audio, and WOFF
At MIX we showed the potential for hardware accelerated video on the web. On the test drive site you can try out several examples of IE9’s support for HTML5 video and audio tag support. You can see for yourself how sites like YouTube for HTML5 works with video playing through the GPU. Here’s an example:
Note that while the video element in the HTML5 standard does not detail support for specific codecs, developers can still use the same markup to achieve the results they want. Coding practices should focus on testing for capabilities, not browsers, and providing the right fall backs for older browsers.
Also included in the third platform preview is support for using the Web Open Font Format (WOFF) through CSS3 font face. We were excited to work with Mozilla and Opera to submit the WOFF file format to the W3C, and in IE9 to bring high quality font support to the web in a way that is friendly to web designers, font foundries, and end users. As an industry we still have work to do for same markup with same results for font support.
Like all of the text rendered in IE9, the support for WOFF makes the most of the underlying hardware and Windows DirectWrite for high quality rendering with sub-pixel precision, resulting in smooth, crisp text across font sizes and browser zoom levels. In a recent article, Richard Fink from A List Apart wrote how, “The font rendering in IE9 is worlds apart from what we’ve all come to expect.”
Of course, the importance of WOFF support is having the same markup provide the same results for text and typography – results developers and designers can depend on. Here’s an example from the test drive site that shows a selection of WOFF fonts in IE9 and in latest shipping versions Firefox and Chrome. Some of the differences you’ll see if you try this example yourself are more precise layout of text and sharper characters at large font sizes and when zoomed.
Same Markup: JavaScript and ES5
Same markup includes running the same JavaScript code with the same results. The Chakra JavaScript engine in IE9 significantly improves support for ECMA-262: ECMAScript Language Specification standard, including features new to the recently finalized Fifth Edition of ECMA-262 (often called ES5 for short). This support for ES5 includes new array and object methods, as well as other language enhancements for working with strings and dates. The test drive site includes samples where you can try new array methods and play a game built with new ES5 capabilities. You can learn more about how we used ES5 arrays with a video look “under the hood” for the Tile Switch game.
Following through on having same markup across the web requires comprehensive and consistent tests. Unlike the standards body behind CSS and HTML, the JavaScript standards body has never had a place where the community could contribute tests. We’re working as part of the “TC-39” community with Ecma to create an official test suite for ECMAScript, sponsored by Ecma. In anticipation of this site, we’re making tests available on the IE Testing Center now for feedback via Connect.
Same markup: IE Testing Center and other tests
Some people use Acid3 as a shorthand for standards. Acid3 tests about 100 fragments of a dozen different technologies. Some are still in “under construction.” Some of the patterns, like SMIL animations, are inconsistent with others, like CSS3 animations, and need to be reconciled. As we continue to implement the standards that developers have told us they value most, the Acid3 score continues to rise, and we’re not done. Here’s a screenshot of how today’s IE9 Platform Preview runs today’s Acid3 test, going from 68 in the last platform preview to 83:
With today’s update to the platform preview, we have also updated the IE Testing Center, adding another 118 test cases which we are contributing to the appropriate web standards working groups at the W3C. In addition, we have written 1309 JavaScript test cases and are making those all available to the web development community. Another blog post provides details about them.
Performance measurement in web pages
Enabling developers to accurately measure website performance is important to delivering great HTML5 applications. Today, developers can measure different aspects of performance on their own machines with the Developer Tools; they can’t, however, measure the performance their users actually experience. Today, many sites develop their own libraries that try to measure live performance on web pages. The problem is that these libraries actually slow down the pages for consumers and measure inaccurately, driving the wrong behavior for developers.
We believe that the WebTiming specification is a good conceptual foundation for solving this problem. We’re in conversations with the W3C HTML5 standards body and folks at Google and Mozilla about this, and how we can all work together to make WebTiming happen in an interoperable and standardized way, sooner rather than later. We will work closely with the W3C and its members over the coming months to get this into an official working group and build consensus for a proposed specification while continuing to work together to ensure that the same markup works across browsers.
In order to keep making progress in the interim, we’ve included early support for these ideas in the IE9 preview. This is early work for sure, and following convention, IE uses a vendor prefix (-ms) on the namespace because the spec is genuinely under active construction. You can take a closer look at how this works in the WebTiming sample on the test drive site. We’ll talk more about this topic in a future blog post.
Test Drive IE9 Platform Preview Today
We appreciate the continued feedback about what we need to fix (at Connect, on the HTML5 testing listserv) as well as the feedback about what we’ve done right.
Our continued ask, is that you download the latest preview, try the samples on the test drive site, and try your own sites. Send IE9 the same markup that you give to other browsers. The IE7 compatibility view built into IE9, which some sites may run in, does not offer the best performance possible. If you still have sites that run in IE7 compatibility mode we recommend that you move those to IE9 standards mode. We want sites to get the full performance benefits of IE9 that come with running in IE9 standards mode. We also want your feedback from handing IE9 the same markup you hand other browsers.
The platform preview installs side by side with Internet Explorer 8 so that you can try it without replacing the full version of Internet Explorer that comes with Windows. This third release of the Internet Explorer 9 Platform Preview will install over the prior versions. There is no need to uninstall the earlier builds before installing the third. You’ll also find more information on what’s included in this release of the Platform Preview in the Release Notes, including known and resolved issues.
Thanks
Dean Hachamovitch
General Manager, Internet Explorer