Internet Explorer 9 Preview: New Features and Analysis

Posted by Dionysios G. Synodinos on Mar 19, 2010

Sections

Architecture & Design,

Enterprise Architecture

Topics

Web 2.0 ,

Architecture

Tags

Microsoft ,

Web Browser ,

Internet Explorer

Microsoft has released a preview version of Internet Explorer 9 with improvements in performance and adoption of standards like SVG, CSS, HTML5 and more.

Performance

The performance results that Microsoft has released for IE9 preview, show that its JavaScript engine is faster than Firefox and IE8, but still lags behind Safari and Chrome:

Browser	Sunspider Result Average (ms)
IE8	3825.53
Opera 10.10	2491.93
IE9 PDC 2009 Demo	834.00
Firefox 3.6	699.80
Firefox 3.7 Alpha2 Pre-Release	610.20
IE9 Mix 2010 Platform Preview 1.9.7745.6019	598.80
Safari 4.0.5 (531.22.7)	407.93
Chrome 4.0.249.89	373.87
Chrome 5.0.342.2 (dev)	293.47
Opera 10.5	285.20

New JavaScript Engine

To cope with the ever-increasing demand for faster JavaScript engines, the IE Team has developed a new one code named Chakra:

The IE9 Platform Preview includes the first release of our new JavaScript engine, codenamed Chakra, which fundamentally changes the performance characteristics of JavaScript inside Internet Explorer 9. Chakra includes a new JavaScript compiler that compiles JavaScript source code into high-quality native machine code, a new interpreter for executing script on traditional web pages, and improvements to the JavaScript runtime and libraries.

Chakra alongside IE9 has several valuable features like:

• Background Compilation
• Type Optimizations
• Fast Interpreter
• Library Optimizations

Hardware Acceleration

With Internet Explorer Platform Preview, Web developers can now take advantage of hardware-driven rendering of graphics and text:

Internet Explorer Platform Preview uses the DirectX family of Windows application programming interfaces (APIs) to enable several advances for Web developers. The starting point is moving all graphics and text rendering from the CPU to the graphics card using Direct2D and DirectWrite. Graphics hardware acceleration means that rich, graphically intensive sites can render faster while using less CPU. Plus, you’ll take advantage of these changes automatically while continuing to author sites with the same standards you’re used to.

AMD has publically “applaud” Microsoft for taking advantage of the underlying hardware in IE9. For AMD the benefits of such an approach are:

• The MSHTML rendering layer has been enhanced to use Direct2D and DirectWrite instead of GDI.  Direct2D enables GPU accelerated 2D graphics and text, and allows sub-pixel positioning.  In addition, the GPU is used for scaling (bitmaps are mapped to textures), which is ideal for zooming and moving images around the screen.  This GPU support translates directly into improved readability of pages, more precise placement of text and images, and smooth scrolling and zooming.
• JavaScript performance is greatly improved from older versions of Internet Explorer, and should be competitive if not better than competing browsers.  In the past, JavaScript in IE was interpreted and not compiled into native processor instructions.  The JavaScript engine now includes a JIT compiler which emits x86 instructions and compiles the code before it runs, resulting in a dramatic performance uplift.  Instruction generation can also be tailored to the underlying processor to take full advantage of the underlying platform.
• IE9 is more standards compliant than previous versions, with new support for HTML5 elements such as <video> and <canvas>, CSS3 support, and SVG support.  The <canvas> element will be accelerated on the GPU via Direct2D and will enable hardware accelerated rendering contexts for application development, improving visual display, reducing CPU usage, and improving power usage.

NVIDIA had a similar reaction:

Today, with introduction of Internet Explorer 9, Microsoft gives us another milestone for visual computing. Internet Explorer 9 includes a new JavaScript engine, support for HTML5 and hardware accelerated graphics and text. Internet Explorer 9 is the first browser designed to take advantage of modern hardware, resulting in graphics and performance improvements throughout the browser including the first to deliver hardware accelerated scalable vector graphics( SVG); the first to enhance JavaScript engine performance with the benefit of shifting from the CPU to the GPU; and the first to deliver GPU-Powered HTML5.

It is important to note that this is not the first time that a beta/unofficial version of a browser has had support for GPU accelaration.

SVG support

The Scalable Vector Graphics (SVG) format, is becoming a first class citizen in IE9. It seems that SVG will be a strategic choice for Microsoft in order to support vector graphics in the next generation of web apps:

We expect SVG, supported by good user and developer experiences, to become an integral part of the web. SVG has many advantages over raster images. With our hardware-accelerated graphics, the time is ripe for a rich and interactive graphics-driven web.

In terms of interoperability between the various vendor implementations:, Microsoft states that it will work with the SVG Working Group in order to ensure that its implementation will be interoperable:

Though the first edition SVG specification received “Recommendation” status years ago, that specification still has some loose ends. As a result, the current SVG implementations in major web browsers vary both in scope and in behavior. Our goal is to make the lives of developers easier by aiming for interoperability. For the portions of the specification that we are implementing, we adhere closely to the spec. In some cases, our decisions were informed by other browsers’ behaviors and the direction of SVG’s future.

With the current preview release, developers can inline SVG inside HTML and create scalable graphics:

<!DOCTYPE html>
<p style="font-family:Georgia;font-size:9pt;">You can insert vector images using inline HTML...
<BR>
<svg width="200" height="100">
    <circle cx="50" cy="50" r="45" fill-opacity=".5" fill="red"/>
    <circle cx="100" cy="50" r="45" fill-opacity=".5" fill="yellow"/>
    <circle cx="75" cy="100" r="45" fill-opacity=".5" fill="blue"/>
    <text x="40" y="70" fill="white">Colors!!</text>
</svg>
</p>

At this time the SVG features that are supported are:

• Basic shapes: rectangles, circles, ellipses, lines, polylines, and polygons
• Coordinate systems, transforms, and units
• Document structure, metadata, and extensibility functionality
• Paths, including full capabilities of the path element and d attribute

HTML5

Several features from the HTML 5 spec have been implemented in IE9 and Microsoft claims that as the spec gets finalized there will be more additions:

Support for some features of the HTML5 Draft Specification was introduced in Internet Explorer 8. These included DOM Storage, Cross-document Messaging, Ajax Navigations (by using the window.location.hash value), and ononline and onoffline event handlers. Internet Explorer Platform Preview adds to this by supporting several HTML5 APIs and making changes to the way it parses HTML.

CSS

IE9 preview has improved support for Cascading Style Sheets (CSS) compared to version 8 that was compliant with the CSS2.1 specification. It has added several many components of CSS3 and more are planned.

At this time, the new CSS3 features that are supported are:

• Rounded corners via border-radius property
• RGBA color model
• opacity property
• CSS3 selectors

Notable things missing

It should be noted that several the features that are part of HTML5 or have already been implemented in Firefox and Chrome, are missing from IE9 like:

• Canvas element,
• Web Workers
• Open web font support
• Ogg Theora for video (only H.264 video codec is supported)

Also the release notes clearly indicate that IE will not be an option for Windows XP users and will require Windows Vista or 7 to be installed.

Dionysios G. Synodinos is a Web Engineer and a freelance consultant, focusing on Web technologies

1. Back to top

   Does AMD know something we don't?

   by Russell Leggett

   
   The <canvas> element will be accelerated on the GPU via Direct2D and will enable hardware accelerated rendering contexts for application development, improving visual display, reducing CPU usage, and improving power usage.
   

   
   
   Everything I have read (including this post) says IE9 is missing canvas. I'll assume it currently is, but is IE planning on supporting it in the final release? I certainly hope so.

   Reply

2. Back to top

   Re: Does AMD know something we don't?

   by Dionysios Synodinos

   It is only logical that IE will eventually support the canvas element, but until now it is only a rumor, e.g. ajaxian.com/archives/ie9-canvas-support-leaked-...

   Reply

3. Back to top

   Re: Does AMD know something we don't?

   by Russell Leggett

   You don't have to point me to that Ajaxian post, I'm the one that pointed it out to Dion. All I was saying was that Microsoft has not announced support for canvas, and while its completely logical, when has that stopped Microsoft before? What if they waited until IE10? It has been neither confirmed nor denied, but a lot of people want to know and Microsoft isn't talking. This appears to be a bit of a leak, and I thought that was worth mentioning.

   Reply

4. Back to top

   Re: Does AMD know something we don't?

   by Dionysios Synodinos

   The original AMD post has been edited:
   
   

   
   3/19/10 — Minor edit. Got a little ahead of myself; Microsoft did not announce they were supporting canvas. However, they did say that all of Internet Explorer 9’s graphics, text, and rendering will be hardware accelerated. Given the embraced HTML5 across DOM, CSS3, SVG, and XHTML, it will be fun to watch this space closely as the IE9 Preview gets updated in the weeks to come.
   

   Reply

5. Back to top

   IE9 vs. Chrome vs. Firefox vs. Opera Performance

   by Aswath aramdaka

   My eyes popped out, IE9 seems to have some great improvements in lot of Areas .. looking eagerly to Experience the features

   Reply

• Older >