What’s New in IE9

Figure 1. The new UI

The first thing you’ll discover is how lean the new metal is. The absence of toolbars, the minimalist buttons, the super-thin menu bar, the combined search and address bar: it’s all become very clean and simple.

In fact, if I’m not mistaken, it’s the thinnest menu bar out of the box.

Figure 2. Menu bar height (Firefox 4b6, Opera 10.62, Chrome 6.0.472.63, Safari 5.0.2 and IE9 Beta)

A thin menu bar is one thing, a nice aesthetic; but, like a double rainbow, “What does it mean?” Well, this is the first of many times you’ll notice that IE9’s most important feature is that it gives the greatest prominence to the sites you visit most. IE9 deliberately aims to get everything out of the way of your content browsing experience.

This is a critical shift designed to make IE9 better reflect your web experiences and usage patterns. Other developments take this further.

For example, tabs. Finally, IE9 delivers an awesome tab experience. They can now be torn off and split easily, while Windows Snap lets you position them easily on your screen. Simply drag a tab off and drop it anywhere on your screen to give it its own window. Now you can drag one window to each side of your screen and Windows Snap will automatically resize them to sit nicely side by side. You can also snap a window on to a second monitor or into another IE9 instance.

One of my favorite IE9 tab behaviors is if you create a new tab from a page by Control-clicking to open a hyperlink, both the original page and new page become color coded, providing a visual way of keeping related sites together. This has actually been around since IE8.

Figure 3. Tabs can be split off and color coded (in this case the Facebook tabs are in yellow) to keep related sites together

Additionally, clicking on the new tab button will present you with an empty tab featuring your most-visited sites, ordered by frequency of visit. Again, IE9 is putting your favorite sites front-row center.

Figure 4. New tabs in order of most viewed

The next major enhancement that you’ll notice is that the search box and address bar are now combined into one. Microsoft calls this OneBox.

Typing a phrase into OneBox will present you with a few options. You’ll see a combination of your history, favorites, and suggestions from your default search provider (provided you’ve turned on search suggestions in the address bar’s drop-down menu).

Figure 5. OneBox search

You can do some fancy tricks using the OneBox suggestions and Bing. For example, you can type in Stock [ticker code] or Weather [city name] to generate instant updates on stock prices or the weather in your city.

Figure 6. Get the weather forecast in OneBox

Next up in our journey is the Notification Bar. Any time IE9 wants to notify you of any event—for example, a download, pop-up window attempt, security warning, password saving, or so on—it does so in the super-discreet Notification Bar.

Figure 7. Notification Bar

The bar remains on the bottom of the current page until you’ve responded to the notification. You can continue to use the site and respond when you’re ready.

As an added bonus, you’ll see that when you run several downloads you can open up the download manager for a consolidated view of all your downloads. You can pause and resume selected downloads at will.

Figure 8. Download Manager

The next major stop on our IE9 journey is speed. Microsoft has put great effort into ensuring that Internet Explorer is the fastest browser out there. This is one major feat and it’s leading the way in ensuring you gain the best possible browsing experience. For too long your browser has been relegated to CPU-only processing while your GPU sits idly by on the beach relaxing and sipping mojitos. No more, my friends. Yes, that’s right: IE9 renders your DOM (and related elements) in GPU.

This translates into a real-world opportunity to build game-changing online experiences, as showcased on the beautyoftheweb.com site.

I liken the hardware-accelerated web to building desktop apps. Desktop apps are often fast, attach to the GPU, and provide native experiences. This means that you don’t have to scale down your thinking or code when doing tasks that require heavy computation.

Think about viewing a simple list of 1,000 thumbnail images in your operating system’s file manager. Now, when you double-click on an image, it opens instantly, or when you scale the thumbnail size, all 1,000 thumbnails scale instantly, right? Beforehand, you were unable to implement this sort of native experience in a browser due to performance constraints. With IE9, the GPU acceleration of your DOM and the optimizing of your JavaScript computation make this a reality.

The best way to get a real sense of this is to explore the demos at the Internet Explorer Test Drive Site. The Flickr explorer demo is a very impressive example of how IE9 can use its improved performance to present images on a website. It flies in a bunch of images from Flickr and once they’ve arrived, you can click on any image to pop it out, and again to zoom into it.

Figure 9. Flickr Explorer

These sorts of native experiences are possible in part because of the GPU acceleration.

There are heaps more of these speed demos over at the Internet Explorer Test Drive Site, and other demonstrations of the new power of the IE browser. Feel free to download IE9 and go over and have a play. And while you’re there why not compare the performance with alternate browsers: IE9 rates very highly in my experience. Be aware that you will need to have Windows 7 installed in order to run IE9.

I’d be remiss if I failed to discuss how IE9 has also implemented a comprehensive performance stack beyond hardware acceleration.

The IE team has posted a great deal on their blog about the breadth of considerations in implementing a high-performing browser. They cover everything from JavaScript benchmarks, common benchmark scope, multiple subsystems in building a page, and how a page is really composed.

I wanted to highlight some common considerations in performance. One of the more popular benchmarks measures pure JavaScript grunt.

It turns out the IE9 beta handles its own, leaving the gap between the fastest JavaScript engine and IE9’s Chakra engine at less than 100ms.

Figure 10. JavaScript benchmark courtesy ietestdrive.com

But there’s more to the performance story. Consider what else happens when you try and load a page. Again, the IE team have described this in great detail, but to summarize: when a page loads there are multiple considerations. There’s networking (the IP bits), HTML, XHTML, SVG parsing, CSS layout, JavaScript, marshaling and the native OM (where JavaScript talks to the DOM), DOM formatting, block layout, and finally the actual rendering (where the pixels hit the screen). There’s a lot that goes into just rendering a page.

Just look at the break up of these elements on a standard news site in IE8.

Figure 11. News site rendering performance profile courtesy IEBlog

IE9 outperforms because it takes all these into consideration.

In my experience, the number one cause of poor general browser performance is plugins and add-ons. Often, when a browser takes too long to load, or hangs on a page, you can point to a plugin, add-on, or toolbar. I’m not saying add-ons should be avoided, but they do need to be watched, particularly if you want to optimize for fast load times.

IE9 gives you two ways of ensuring you’re unimpaired by slow add-ons.

First, if an add-on is noticeably slowing load times, IE9 will fire off a notification via the Notification Bar. This will politely inform you that you may want to check your add-on load times.

Figure 12. Add-on Notification Bar courtesy IEBlog

Figure 13. Add-on load times courtesy IEBlog

Second, you can open up the Manage Add-ons dialog at any time to tune and optimize for a fast load time.

Figure 14. Manage Add-ons courtesy IEBlog