HTML5, Modernized: Fourth IE9 Platform Preview Available for Developers

IE9 started from the premise that the modern web will deliver HTML5 experiences that feel more like native applications than sites. Building on hardware-accelerated SVG, canvas, video, audio, and text, developers will use the power of the whole PC to achieve great performance. On the modern web, developers will use the same markup across different HTML5 browsers.

With IE9, we have worked much more closely with the developer community. Developers have had an earlier (and more frequently updated) look at the platform. With that early engagement, developer feedback has had a bigger impact than before. People have downloaded IE9 Platform Previews over 2.5 million times. The samples on the IE Test Drive site have had over 20 million visitors. We appreciate the positive feedback and all the specific issues logged in Connect. They’ve helped us make demonstrable improvements that the community has noticed.

The fourth Platform Preview of Internet Explorer 9, available now, shows the opportunity of fully hardware-accelerated HTML5. You can run new test drive samples that show modern SVG and native JavaScript integration in action. In March, we promised to deliver platform preview releases approximately every eight weeks. With this installment, you will find more performance and more support for same markup. You’ll also find many fixes to issues reported in previous Platform Previews. Here is a video of some of the test drive samples:


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”;
document.getElementById(“image1″).style.display=”none”;
document.getElementById(“div1″).style.width=”377px”;
}

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.

Fully Hardware-Accelerated HTML5

The performance benefits of hardware acceleration are clear from running different sample sites side by side in IE9 and other browsers. Browsers that implement partial hardware acceleration – for example, text-only, or video-playback only, or image-only acceleration – offer inconsistent and possibly unpredictable platform experiences to developers and end-users.

IE9 offers consistent, fully hardware-accelerated text, graphics, and media, both audio and video. Try Hamster Dance Revolution, IE Beatz, or MSNBC Video in different browsers to experience the difference. Psychedelic Browsing demonstrates what HTML5 canvas can do when it’s fully accelerated with the GPU.

IE9 PPB4 and Firefox 4  showing the Psychedelic Browsing demo.  IE9 gets 1789 revolutions per minute, FF4 gets 829 rpm

IE9 PPB4 and Chrome 6 showing the IE Beatz demo, IE9 gets 36 frames per second and 160 beats per minute, Chrome 6 gets 7 FPS and 115 BPM

IE9 PPB4 and Chrome 6 showing Hamster Dance Demo, IE9 gets 41 fps Chrome 6 gets 4 fps

Modern SVG

With Platform Preview 4, we’re excited to show highly-interactive and integrated, or modern, SVG. Typically, developers think of SVG as the graphics format for static engineering diagrams and images. With HTML5 and hardware acceleration, SVG is an excellent choice for a new class of interactive, animated scenarios.

You can see great SVG performance, animated via JavaScript, with the SVG Dice example. The sample shows striking performance differences between browsers animating the same SVG markup, as well as the benefits of being able to style SVG with CSS. Unfortunately, you can see differences in how different browsers display the same SVG; as an industry we have more work to do so the same markup delivers the same results.

Native JavaScript Integration

We’re committed to the right foundation for HTML5 applications, including performance and ensuring the same markup and same script work across browsers. One aspect of doing these things well is integrating the JavaScript engine natively inside the browser, rather than bolting it onto the side to support multiple JavaScript engines as some other browsers do today. How a JavaScript engine is integrated into the browser is as important as the engine itself for real-world HTML5.

The fourth Platform Preview moves the new JavaScript engine, codenamed Chakra, inside IE9 and brings them together into one single, integrated system.

Through this deep integration, the performance of real world websites significantly improves, and IE9 becomes the first browser to have a shared DOM between the browser and the script engine based on ECMAScript5. The benefits start with real-world performance and consistency.

The easiest way to understand the importance of this fundamental change is by looking at how earlier versions of Internet Explorer integrated JavaScript. For the last 15 years Internet Explorer has supported multiple programming languages including JScript, VBScript, and even specialized languages such as Perl. While this gave developers choice it also came at the cost of performance and features. The browser and these script engines communicated through COM which could cause performance problems. Each script engine had its own language specific view of the DOM which created discrepancies. Additionally, the browser was forced to use a least common denominator approach which made adding new features challenging.

Diagram of IE8 vs IE9 JavaScript Integration Model.  In IE8 the JavaScript engine was outside of IE, in IE9 the JavaScript engine is inside IE and shares the IE DOM

In the fourth Platform Preview, we’ve moved the JavaScript engine inside IE9. With this change, communication between the browser and script engine is now direct, which significantly improves performance for real world websites. We now have a single DOM, shared across all browser subsystems including JavaScript. This change ensures a consistent and interoperable view of the document. And this single DOM is now based on ES5, which prepares the entire system for the future.

When programming the IE9 DOM from JavaScript, objects now feel like native ES5 objects because, underneath the covers, they actually are ES5 objects. This approach brings the benefits of ECMAScript5 to the DOM. With the fourth Platform Preview, IE9 becomes the first browser to have a fully discoverable DOM through ES5 reflection features. IE9 is the first browser to apply ES5 bindings to DOM objects, enabling a full Inheritance view of the DOM, and taking advantage of the WebIDL specification as the foundation for this support. Together, these changes provide developers a natural ES5 based programming model. Try some of these enhanced DOM capabilities out for yourself to see how well your browser’s DOM and JavaScript engine are integrated. IE9 will continue to support additional programming languages through the legacy model, but we strongly encourage developers and enterprises to take full advantage of the benefits of JavaScript moving forward.

Platform Preview 4 also continues improvements to the JavaScript engine itself. One measure of JavaScript performance is the Webkit Sunspider microbenchmark. Here is a chart of the latest results:

WebKit Sunspider Results from 8/2/10, IE9 PPB4 get's 4th

The differences between browsers on this microbenchmark are converging within thousandths of seconds on tests that repeat operations many, many times to find any differences at all.

Real-world HTML5 performance often reflects the entire browser’s performance, not just the JavaScript engine in isolation. This video, for example, shows a side by side comparison of different browsers running an HTML5 canvas. The performance differences between browsers are striking and do not reflect relative JavaScript performance. We encourage other browser vendors to consider following our lead in designing for end-to-end performance and natively integrating JavaScript engines rather than treating script as a separable subsystem to be optimized in isolation.

Same Markup, and Tests

To assess the quality and completeness of a browser’s standards support, we look to the official standards bodies. Their open, consensus-based process is the best way to bring the community of browser vendors and web developer and design professionals together in building a test suite.

With Platform Preview 4, we’re contributing 519 new tests to the standards bodies. Based on community feedback, we’ve also updated five of the previously submitted tests. This brings the total number of tests we’ve contributed during IE9 development to 2,138. We welcome your feedback on the specific test cases. Please continue to provide feedback on the test cases to the appropriate W3C working group. In case of ES5 test cases please provide test case specific feedback via Microsoft Connect. We also invite you to submit your own test cases to the standards bodies as well. You can find the test cases Microsoft has developed at the IE Test Center.

These test cases represent a strong start on a complete and comprehensive test suite of the web standards developers expect to work consistently across browsers. While the suite is not complete yet, it is interesting to note how interoperable some of the same markup is across different browsers:

Cross Browser Test Results Summary from IETest

Some people use a particular test or website as shorthand for standards compliance. Different sites test different subsets of different standards to different depths. Acid3 is one that some people in the community have cited. It tests about 100 fragments of a dozen different technologies. Here’s a screenshot of how today’s IE9 Platform Preview runs today’s Acid3 test, going from 83 in the previous platform preview to 95:

IE9 PPB4 showing Acid3 score of 95/100

As IE9 has implemented more of the standards that developers use and value, IE9’s Acid3 score has continued to rise. The remaining points involve two particular technologies (SVG Fonts and SMIL animation of SVG) that are in transition.

Support for SVG Fonts in the web development and font communities has been declining for some time. There’s already been discussion without objection of dropping SVG fonts from the Acid3 test. The community has put forth a proposal in the SVG Working Group to give SVG Fonts optional status.

Instead, developers can use the Web Open Font Format (WOFF, supported in IE9 Platform Preview 3 as well as other browsers) for both HTML and SVG content. It works well in conjunction with the CSS3 Fonts module and has broad support from leading font vendors (e.g. here, “a majority of font makers have already settled on WOFF or services like Typekit as their format of choice”). WOFF fonts are a better long-term solution for many reasons discussed previously.

Similarly, support for SMIL animation of SVG in the web development community is far from strong. The leader of the SVG standardization effort wrote that not supporting SMIL in its current state is probably best “since the SVG WG intends to coordinate with the CSS WG to make some changes to animation and to extend filters.” There’s already work started to reconcile CSS3 animations and SVG. Developers interested in animating SVG can use JavaScript, as the samples in the test drive site do today, with consistent results.

Getting sites ready for Beta

With the fourth Platform Preview, we strongly recommend developers, designers, and partners to start getting your sites ready for the IE9 Beta.

  • Test your site in IE9 Standards Mode.  This mode provides the best performance and interoperability and will offer additional benefits in the IE9 Beta. We suggest using the HTML5 doctype. More details here and here.
  • We recommend sending IE9 the same standards-based markup your site sends other browsers. More details here and here. From the feedback so far, and our experience with sites, the best way to get your site working in IE9 Standards Mode is to start from the same markup other browsers receive rather than IE6, IE7, or IE8 markup.
  • Use feature detection, not browser detection to handle any cross browser differences in behavior or feature support.  This keeps your site working even as browsers change.
  • Please continue to report issues on Connect if your site doesn’t look or work right, and you’re giving it the same code as you’re giving to other modern browsers. With IE9 Platform Preview 4, we’ve fixed over 100 community-reported issues. We will fix even more between now and the IE9 beta and want your feedback.
  • Consider the experience for IE9 Beta users if you find that sending the same markup creates more issues than you can resolve in your production site. It is possible that running your site in Compatibility View is better for your users.
  • Take advantage of HTML5, CSS3, SVG, DOM, ES5, and more… all described here in the developer guide.  We’re excited to run the amazing experiences you bring to the web using these new capabilities, taking advantage of hardware through IE9.

Platform Preview 4 is an important milestone on the way to beta. It is the last preview before the IE9 Beta. The IE9 platform is nearly complete. We ask that developers and partners start testing in preparation for the beta and prepare their sites to take advantage of IE9’s new capabilities. We continue to welcome your feedback via Connect.

Thanks,
Dean Hachamovitch
General Manager, Internet Explorer


IEBlog