Velocity 2011: The Performance Impact of Modernizing Internet Explorer

Velocity 2011: The Performance Impact of Modernizing Internet Explorer

Browsers need amazing performance to deliver on the promise of HTML5 applications. Modernizing Internet Explorer 9 has changed what’s possible with Web sites, and dramatically improved the performance of the HTML4 sites consumers use today. To demonstrate the real world performance gains in IE9 at the recent Velocity 2011 conference, we presented our talk on Modernizing Internet Explorer as an interactive HTML4 Web application:

View the entire Velocity 2011 presentation, Modernizing Internet Explorer

This real world scenario is a great way to experience what’s possible today with the gazillions of Web sites that have been developed using HTML4 standards-based markup over the last two decades, through full hardware acceleration of the browser, and without needing to rewrite Web sites using HTML5.

This site works consistently across browsers, using the same HTML, CSS and JavaScript coding patterns found in today’s Web sites. At the same time, it shows the performance benefits of the systematic approach we took in modernizing Internet Explorer.

When you interact with the presentation in Internet Explorer 9, you’ll find a real-time experience that feels more like a native Windows application than a Web application. Slide transitions are smooth and fluid. You can rapidly scroll between sections of the presentation (holding down the arrow keys). And your responsiveness rarely falls below 100%.

The Velocity conference, sponsored by O’Reilly Media and chaired by Steve Souders and Jesse Robbins, brought together more than 2,000 developers from across the industry to learn best practices from community experts, and to collaborate on how we make the Web faster together as an industry.

This was the first Velocity conference since Internet Explorer 9’s release in March, and our first opportunity to share our performance results from modernizing Internet Explorer with the Velocity community. At last year’s Velocity we had just released the Third IE9 Platform Preview. That’s seven releases ago and it’s amazing how much performance can improve in one year!

Performance Analysis

Using the Windows Performance Toolkit we can measure the runtime performance of Web applications, see how they utilize the underlying hardware, and compare the resulting performance between browsers. The below CPU diagrams show the time required for our Velocity 2011 presentation to animate and draw one frame of the presentation in both IE8 and IE9. These results were generated on a three year old Dell Precision WorkStation (3.0 GHz Intel Pentium Dual-Core, 4GB physical memory, NVIDIA GeForce 8600 GT, 100GB 7200 RPM drive, Windows 7) . The experience will vary slightly based on PC configuration, but the overall patterns are representative of the Internet Explorer 9 customer experience.

As you can see, it takes 1.251 seconds for IE8 to animate one frame of the presentation. The process starts (in blue) when IE8 wakes up based on the JavaScript timer and processes outstanding events. The IE8 JavaScript interpreter (in yellow) then calculates the next location for each slide and updates the DOM with those locations. Next, the IE8 layout engine (in green) moves the slides on the screen before they are finally drawn to the screen (in pink) through IE8’s CPU based graphics system.

With IE9, the results are a staggering nine milliseconds (that’s 0.009 seconds or 139x faster than IE8). You will see the same runtime pattern occur on the CPU however at near native speeds. Because there’s less memory pressure on the system and fewer events to process, IE9 quickly processes outstanding events (in blue). The new Chakra JavaScript engine, which is natively integrated into IE9, will then execute native machine code to calculate the new location for the slides and update the DOM (in yellow). The new IE9 layout engine will iteratively move the slides around (in green). Finally, the GPU draws the contents to the screen (in pink).

Thank you to the Velocity Web performance community for another enjoyable conference. We’re excited about the work you’re doing to improve Web performance. The community continues to grow and together we’re changing what’s possible on the Web.

—Jason Weber, Internet Explorer Performance Lead

Comments

• Anonymous
  June 24, 2011
  Pictures are missing from this post.

• Anonymous
  June 24, 2011
  Thanks Roman - fixed.

• Anonymous
  June 24, 2011
  ieblog - good job :) So I ran this Velocity site in IE9, FF5 and Chrome12. FF5 is the slowest - at idle it shows Draw Time: 5ms whereas IE9 and Chrome show 1ms. Chrome's however bouncing between 1 and 2ms but it's not so relevant as slides animation. FF is the most jittery, Chrome is still jittery but gets close to IE who has the smoothest animation. So clearly, they don't lie about full hardware acceleration. On the same machine, 3 browsers show very different results.

• Anonymous
  June 24, 2011
  but loading a XML is a million times slower in IE9 compared o IE8. I canceled it after 1/2 hour where Ie8 took 30s to load the 20MB XML.

• Anonymous
  June 24, 2011
  I'm impressed with what I'm seeing on this blog. I have renewed faith in Internet Explorer. Be please, can we get some CSS3 support? :) Also, a little tid bit, people LOVE customization, and Firefox and Chrome make it easy to change the look of the browser. Maybe consider tying the color scheme of IE9 with Windows 7 themes or have separate color options. Just an idea.

• Anonymous
  June 24, 2011
  I saw a whole bunch of SVG features in the big slide list thinger, but no SVG filters.  I really hope that they're just hiding in that "etc., etc., etc." bag, or getting reimplemented in CSS or something.

• Anonymous
  June 24, 2011
  The comment has been removed

• Anonymous
  June 24, 2011
  Appendix: Prezi was the name of the website.

• Anonymous
  June 25, 2011
  This is a terrible demonstration of what html5 is about:

1. it doesn't fallback gracefully on older browsers
2. It can't even be viewed in lynx or indexed by search engines
3. it doesn't use anchors tags to show others what slide you're on or so you can get back to it with the back/forward buttons
4. it's all based on large images instead of text/css/svg
5. it preloads all the images instead of loading them on the fly
6. it pegs the CPU at 100% even when nothing is happening
7. it doesn't scale back special effects to maintain a fast experience

• Anonymous
  June 25, 2011
  once again MSFT has ignored Ie7 and Ie8 and all users on Windows XP.  How quickly they forget that for the last decade users stuck on IE have had the worst Internet experience possible all because MSFT decided to give up on developing IE for 5 years after the release of IE6 to ensure the Web could not grow. Now that the web has grown without IE, users don't care about IE any more. Using Ie is not akin to using AOL - no one wants to use it or worse yet be seen using it. The workforce has changed too - young adults entering the workforce have no interest in using IE and insist on using Chrome or Firefox. the "blue e" will go down in history as necessary evil in history but no one wants it on their mobile phone, no one wants it on their laptop, and definitely not on their tablet. Long live the Web! - without IE!

• Anonymous
  June 26, 2011
  Dave, your mom is in front of the middle school to pick you up from band practice.

• Anonymous
  June 26, 2011
  The presentation doesn't even works in IE8 : "Message : Cet objet ne gère pas cette propriété ou cette méthode Ligne : 53 Caractère : 13 Code : 0 URI : ie.microsoft.com/.../Presentation.js"

• Anonymous
  June 27, 2011
  I really like IE9 (with the exception of the stupid unified one bar thing), but I honestly have trouble seeing "real world" websites performing a whole lot different than IE8.  New sites that take advantage of HTML5 and so on work great, but most sites aren't there yet.  So, a lot of times when I'm visiting some random blog or whatever, the site absolutely crawls, especially if it has a lot of ads.  Yet, in FireFox and Chrome, this doesn't happen.  I'm guessing it's because it's working in an IE backward compatibility mode (a lot of times I can't tell because the "torn page" icon isn't visible). So I think the forward looking features are great and in five to ten years, we'll all be glad the web works that way.  But now that IE9 has some support for it now, I think more effort needs to be focused on getting HTML 4 and XHTML 1.0 sites (99.99% of the current web) to work at a better speed.

• Anonymous
  June 27, 2011

1. Try (temporarily) disabling addons to see if that helps.
2. Make note of the URLs and log bug(s) so that they actually looked at by the IE team.

• Anonymous
  June 28, 2011
  @Daniel, I'm going to have to disagree with you about customization. I remember when I first got my own computer (in 2000) I was all about customization and skinning. But then as time went on, I got over it. Especially as I started having a "home" computer and a "work" computer, and then helping out other people on their computers, the desire skin to my hearts content went away. Having not-in-your-face defaults is the way to go. Plus, since IE 9 is all about "content, not chrome" why deal with custom skins when there shouldn't be one in the first place.

• Anonymous
  June 29, 2011
  @jader3rd : people do what they want with their computers. If you don't like anymore customizing everything, why people shouldn't be allowed to do it anyway ? IE<=6 were great for that !