Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

March 14 2011

16:52

The Things Internet Explorer Got Right


It’s the browser that everyone loves to hate—sometimes justifiably so. What was once the most innovative browser became the thorn in every front-end developer’s side. Amidst the turmoil and complaints today’s developers throw at Internet Explorer, what’s often not heard is how Microsoft changed the face of not only front-end development, but web development as a whole.

IE’s fall is not an uncommon story; in fact, it’s somewhat the same story as Netscape. The company behind the leading browser grows complacent, the browser stagnates, and a new champion arises. It’s a repetitive cycle, one that Mozilla faces again to some extent (but that’s another story for another time).


IE4’s Influence on the DOM

Prior to the version 4 browsers, JavaScript was primarily used for simple data processing (form validation). As such, web pages were primarily static. While a page could be dynamically generated by server-side applications, the page could not interact with the user. This limitation existed because of the browser’s inadequate Document Object Model (DOM), which is the application programming interface (API) JavaScript developers use to access and manipulate individual elements in the page. The DOM that existed prior to the version 4 browsers is frequently referred to as DOM Level 0. DOM Level 0 implementations allow developers access to <form/>, <a/>, and <img/> elements, but that’s about it.

“Microsoft is getting Internet Explorer back on track.”

Netscape Navigator 4

It wasn’t until Netscape released Navigator 4 (NS4) in mid-1997 that a browser’s DOM allowed web developers to alter a page with JavaScript. The technique of manipulating elements with JavaScript and the DOM was dubbed Dynamic HTML (DHTML). NS4’s DHTML was certainly a step forward, but its proprietary and ill-designed layer-based DOM and limited Cascading Style Sheet (CSS) support restricted developers in what they could actually accomplish.

Accessing Elements

Netscape did not implement a full object model. Aside from DOM Level 0 functionality, the only elements a developer could access were absolutely positioned elements, <layer/> elements, and <ilayer/> elements (the latter two elements were de facto positioned). Each of these types of elements were represented by a Layer object in NS4’s DOM. Netscape designed Layer objects to be very similar to frame (and thus window) objects. Each Layer object had a document property, which basically was another HTML document. Like frames, a Layer object could be nested in another Layer object, making code to access those layers extremely verbose like the following:

var myLayer1 = document.layers["myLayerId"].document.layers["mySecondLayerId"];
// or
var myLayer2 = document.myLayerId.document.mySecondLayerId;

These two lines of code do the same thing: they access the Layer object with an id of mySecondLayerId that is nested within a layer with an id of myLayerId. Yes, developers had to walk down the layer "tree" in order to access nested layers.

Dynamic Content

NS4’s DOM did not allow for the creation, insertion, relocation, and removal of DOM objects, but because each layer exposed a document object, a developer could dynamically change a layer’s content by using the write(), load(), and close() methods. While this gives some extra power to the layer model, it restricted developers in how they could dynamically update a page. New content would have to be written or loaded into a layer, effectively removing the layer’s existing content. Needless to say, most developers avoided content manipulation and instead focused on changing a layer’s style.

Changing Style

Web development using NS4’s DOM was painful and frustrating.

But style in NS4’s DOM was a funny thing. While the browser supported CSS to some degree, Layer objects did not provide an API for developers to directly access a layer’s style attribute like today’s style object. Instead, Layer objects exposed a very limited set of properties that altered a layer’s position, visibility, clipping, and background color/image—nothing else, and the value these properties accepted were also quite limited. For example, the positioning and clipping properties only accepted numeric values; a developer could not specify a unit (such as px, em, pt, etc). An example of such code follows:

var myLayer = document.myLayerId.document.mySubLayerId;
myLayer.top = 10;

Needless to say, web development using NS4’s DOM was painful and frustrating. NS4’s extremely limited DHTML capabilities stem from the limitations of NS4’s rendering engine (it could not reflow the page). But why spend so much time on Netscape’s DOM, especially in an article that’s supposed to be about IE? Had Netscape won the browser war, today’s DOM would be an evolutionary step from the DOM presented by Netscape in NS4. While today’s DOM is a standard put forth by the W3C (and some Netscape ideas are implemented in today’s standard), today’s DOM is heavily influenced by IE4’s DOM.

IE4’s DOM

Just a few months after Netscape released Navigator 4, Microsoft released the fourth version of IE. It, too, included support for DHTML, but Microsoft’s implementation was far different and superior to NS4. IE4 boasted much better CSS support and a more complete object model to access and manipulate elements and content in the page. The effect of IE4’s DOM was far reaching; in fact, a developer can find many similarities between IE4’s DOM and the standard DOM.

Accessing Elements

“Microsoft changed the face of not only front-end development, but web development as a whole…”

IE4’s designers wanted to turn the browser into a platform for Web applications. So they approached IE4’s API like an operating system’s—providing a near complete object model that represented each element (and an element’s attributes) as an object that could be accessed with a scripting language (IE4 supported both JavaScript and VBScript).

In IE4’s DOM, the primary means of accessing a particular element in the page was the proprietary all[] collection, which contained every element in the document. Developers could access elements with a numerical index or by specifying an element’s id or name, like this:

var myElement1 = document.all["myElementId"];
// or
var myElement2 = document.all.myElementId;

Using this code, developers could access the element object with an id of myElementId regardless of where it existed within the page. This is in stark contrast to Netscape’s layer model in which developers could only access layers through the layer’s hierarchy. The functionality of document.all["elementId"] evolved into the standard document.getElementById() method. But this wasn’t the only way a developer could access elements; one could walk the DOM tree and touch each element with the children[] collection and parentElement property—forerunners to the standard childNodes[] and parentNode properties.

In addition to loading elements as objects, IE4’s DOM represented an element’s attributes as properties of the element object. For example, the id, name, and style properties mapped directly to an element’s id, name, and style attributes, respectively. This design became standard.

Dynamic Content

Microsoft invented the innerHTML property.

Like Netscape, Microsoft did not provide a full-fledged API to dynamically add, move, and remove nodes with JavaScript. They did, however, invent the innerHTML property to get or set an element’s content. Unlike Netscape’s Layer object’s write() and load() methods, the innerHTML property was not an all-or-nothing solution to modifying an element’s content; a developer could use innerHTML to completely wipe out, replace, or add to an element’s content. For example, the following code gets an element’s content and modifies it:

var el = document.all.myElementId,
    html = el.innerHTML;

el.innerHTML = html + "Hello, innerHTML";

To this day, the innerHTML property is a cornerstone of DHTML. It is an efficient means to adding large amounts of content to an element. Even though it has never formally been included in any DOM standard, every major browser implements an innerHTML property.

Modifying Style

Microsoft invented several tools and designs that evolved into pieces of the standard DOM, but the work they did with IE4’s style API became standard with very little modification. The key to changing an element’s style in IE4 was the style property, the same property (and syntax) used by developers today.

DHTML changed web development forever. It was, however, IE4’s DOM that pushed the technology (and web development) forward by being the primary influence on the W3C’s DOM Level 1 and 2 specification. IE4 revolutionized web development in 1997, and IE would do so again a few years later.


IE Revolutionizes Ajax

Ajax blew the doors open for web development.

Before Ajax was Ajax, it was called remote scripting, and developers leveraging the power of remote scripting used hidden frames and iframes for client-server communication. A hidden (i)frame usually contained a form that was dynamically filled out and submitted through JavaScript. The server’s response would be another HTML document containing JavaScript that notified the main page that data was received and ready to use. It was crude, but it worked.

There was an alternative, however: a little known gem buried in Microsoft’s MSXML 2.0 library. IE5, released in March 1999, included MSXML 2.0, and developers found a component called XMLHttp (the actual interface name was IXMLHTTPRequest). Its name is misleading, as the XMLHttp object functions more like a simple HTTP client than anything else. Not only could developers send requests with the object, but they could monitor the requests’s status and retrieve the server’s response.

Naturally, XMLHttp began to replace the hidden (i)frame technique for client-server communication. A couple of years later, Mozilla created their own object, modeled after Microsoft’s XMLHttp, and called it XMLHttpRequest. Apple followed suit with their XMLHttpRequest object in 2004, and Opera implemented the object in 2005.

Despite its growing interest, the popularity of XMLHttp/XMLHttpRequest (collectively known as XHR here on out) didn’t explode until 2005 when Jesse James Garrett published his article, “Ajax: a New Approach to Web Applications.”

Ajax blew the doors open for web development, and at the forefront was JavaScript, XHR, and DHTML—two of which were Microsoft’s inventions. So what happened? What caused a browser that literally changed how web developers write web applications to become the bane of the modern Web?


Internet Explorer’s Fall

By 2003, Internet Explorer’s total market share was around 95%; Microsoft officially won the browser war. With no real competition in the Web space, Microsoft shifted their focus from the browser to .NET. This is confirmed by quotes from many Microsoft employees, but the most telling is from a CNET article entitled “Will Ajax help Google clean up?” In it, Charles Fitzgerald, Microsoft’s general manager for platform technologies, was quoted as saying:

“It’s a little depressing that developers are just now wrapping their heads around these things we shipped in the late 20th century [ed: DHTML and Ajax], but XAML is in a whole other class. This other stuff is very kludgy, very hard to debug. We’ve seen some pretty impressive hacks, but if you look at what XAML starts to solve, it’s a major, major step up.”

So in May 2003, Microsoft announced that IE would no longer be released separately from Windows (the excellent IE5 for Mac was also canned). The browser would still be developed as part of the evolving Windows operating system, but Microsoft would not release any stand-alone versions of IE. They were betting primarily on ClickOnce, a technology that allows developers to write conventional applications (using .NET of course) and distribute them via the Web.

But the Web continued to evolve in the path Microsoft originally set with IE4 and IE5, and Microsoft started to lose market share to Netscape’s heir: Firefox. Developers were writing web applications that lived in the browser, not in conventional applications via ClickOnce. That forced Microsoft to pick up IE, dust it off, and begin releasing stand-alone versions again.


Microsoft Continues to Innovate

IE9, includes much better standards support across the board.

The next two versions, 7 and 8, were largely evolutionary. IE7 contained a variety of bug fixes, the XMLHttpRequest identifier (although it still created an XMLHttp object from the MSXML library), and improvements to the UI and security.

IE8 was largely more of the same, except it sandboxed each tab—a feature that Google also implemented in Chrome (Microsoft announced it first). It isolates each tab in its own process, increasing security and stability. Sandboxing is becoming standard in today’s browsers (Firefox still lacks the capability), and it’s also moving into the realm of add-ons and plug-ins.

Microsoft is getting Internet Explorer back on track.

The latest version, IE9, includes much better standards support across the board, but it also innovates with its new JIT-compiling JavaScript engine (which uses a separate CPU core if available and can access the GPU) and its hardware-accelerated rendering engine. While JIT-compiling JavaScript engines are not new, IE9’s ability to offload compilation onto a separate core in parallel to the page rendering is an accomplishment that will spur on much needed performance for web applications. Its hardware-acceleration abilities proved useful when debuted, and now Firefox and Chrome offer hardware-acceleration to some extent.

There is no denying that Internet Explorer has caused headaches for web developers. The five year lull between IE6 and IE7 caused Microsoft to fall way behind the competition, making front-end development less than ideal. But Microsoft is getting Internet Explorer back on track. They shaped web development to what it is today; here’s hoping they do so again.

The next version of Internet Explorer, version 9, is scheduled to be officially released March 14th, 2011.

October 04 2010

18:22

Internet Explorer 9 Beta: Reviewed and Benchmarked


Microsoft is making some bold claims with the release of Internet Explorer 9 Beta. They explain that other browsers, unlike IE9 Beta, only use 10% of your PC’s capabilities; they show how websites will be streamlined and work faster by taking advantage of your graphics processing unit (GPU), and how a range of new features will provide a richer experience when combined with Windows 7.

Today, we will be looking at what new features IE9 Beta has to offer, and how it performs when bench-marked against Firefox, Chrome, Safari, and Opera.


Download and Installation

System Requirements

In order to run in Internet Explorer 9, you need to have one of the three following operating systems:

  • Windows Server 2008
  • Windows Visa
  • Windows 7

As you would expect, there are 32-bit and 64-bit versions, both of which require at least 512MB of RAM to run.
Depending on your operating system, you need between 70MB and 200MB of hard drive space. To be honest, as long as you’re running one of the three operating systems listed above, I don’t think are going to have any problems.


Download

IE9 Test Drive Website

Microsoft have set up two dedicated websites for the deployment of Internet Explorer 9.

IE9 can be downloaded from either of these websites; both sites are best viewed through IE9 to show off its highlights, new features, and performance enhancements. The Test Drive website provides dozens of application demos, each of which are tailored to show off IE9′s capabilities. We will be taking a look at the demos and benchmarking tools later in the article.

Before You Install

If you have Internet Explorer 8 installed, please be warned: if you install the 64-bit version of IE9, your 64-bit version of IE8 will be uninstalled. I haven’t tested if this is true for the 32-bit version but I wouldn’t see why it would be any different.

As far as I could see, IE9 retained all of my bookmarks, favorites, and so on, but you may want to backup your data just in case.

Installation

The installation should run smoothly. I am using a Windows 7 system with fairly up-to-date hardware. I can’t vouch for other operating systems, but during the install a Windows update occurred and it needed a full reboot. I have since confirmed this with several other Windows 7 users, all of which experienced the same install steps.

I can imagine a Windows update will be provided prior to the full release of IE9, hopefully that will render the reboot unnecessary in the future.


Top New Features

Hardware Accelerated Graphics and Text

IE9 HTML5 Speed Read Demo

It appears that right from the start, the developers of IE9 had speed as a primary objective. Hardware accelerated graphics allow websites to run smoother and faster in your browser. Elements such as graphics, text and video are now rendered by your GPU instead of the CPU. We will see the effects of this during the benchmark tests later.


Refined, Cleaner User Interface

Microsoft has really toned down the browser’s interface. When compared to Firefox or IE8, you can see just how much fat has been trimmed from the overall application. The address bar no longer extends across the top, the independent search bar has disappeared, and most noticeable of all is the missing status bar from the bottom of the screen.

Subtly, the navigational buttons now change colour to match a websites theme or favicon: a nice surprise when you first notice.


Pinned Sites, Jump Lists and Other Windows 7 Integrations

Anyone using Windows 7 will know how much more useful the Windows task bar is compared to the previous versions. Thankfully, IE9 now works with the task bar to add extra usability to your favourite websites.

Jump Lists

By grabbing a tabbed web page, you can tear it from the browser and pin it to your task bar. Not only can you open those sites like any other application, but now you can also interact with your pinned websites by right clicking and accessing what’s called a “Jump List”. For example, twitter.com’s jump list offers the following tasks: new tweet, direct messages, mentions, favorites, and search, right from your Windows 7 task bar. This is a huge time saver!

Windows 7 Task bar Controls

The Thumbnail Preview Controls allow you to navigate a menu or pause a video from your task bar. If you have ever used Windows media player from your task bar then you can imagine what this is like. I’m sure websites like YouTube and Facebook will be implementing this very soon.


New Tab Page

Popular Sites Grid View

It’s not unusual to see a page where your bookmarked or favorite websites are displayed for easy navigation. Safari offers a great example of this, but IE9 has taken it one step further. Whenever you open a new tab, you are shown your most popular webpages with their favicons and page titles next to each other. The added benefit here is the activity meter, which displays your browsing habits alongside your popular web pages. If you are a fan of this feature in other browsers then this is a welcomed addition to IE9.


One Box

As I mentioned above, the address bar is now compacted and the search bar is missing altogether. Microsoft has ingeniously combined the address bar, and search bar into one box. You can now navigate to a website, query a search engine, and browse your history or favourites all from the same box. You even have the option of turning on search suggestions, which are returned in real time as you type in your query.

At first I was concerned about privacy: how does the browser know that what you’re typing is not to be shared with search engines? Well, IE9 put you in control of your information and allows you to control what is and isn’t sent to search engines. It’s almost like they thought of everything!


Notification Bar

Download Notification Bar

In keeping with its cleaner interface, IE9 has changed the way notices and alerts are presented. Previously, notifications may have pushed web page content further down the browser or alerted you with a pop-up box, which obstructs your view of content. Now, all notifications are shown in the Notification Bar at the very bottom of the browser. With a clean and informative design, you can confirm a download or update an add-on without disrupting what you were doing.


Download Manager, and SmartScreen Filter

Download Manager

All downloads will now be managed by IE9′s download manager. If you are familiar with Firefox, you will recognize many of the same features; these include a default download folder, a separate ‘Download’ pop-up box (which displays the name, file size and location for each download), and the ability to delete, view or clear all downloads.

However, that is where the similarities end. IE9 now comes with integrated malware protection called SmartScreen.

SmartScreen Alert

SmartScreen is “a groundbreaking browser feature” developed specifically to protect you from malicious downloads.

By using real-time data, each download is assigned a reputation according to how many times that download has been reported as malicious. The more severe warnings a file acquires, the higher SmartScreen judges the download to be a risk. According to Microsoft: “Internet Explorer 9 is the only browser that uses download reputation to help users make safety decisions.” I can’t wait to see this in action, but I can’t help wondering if this could be abused by malicious users incorrectly reporting files.


Hang Recovery

Applications crash; it’s a simple fact. No matter how hard developers try, there will always come a time when your browser comes across an endless JavaScript loop or web page with far too much data to handle. For me, the most irritating time for this to happen is when you have multiple tabs open… not any more.

IE9 cleverly renders that irritation obsolete. In situations where other browsers normally hang, IE9 confines the problem to one tab, allowing you to close the tab and continue browsing without disrupting your work. No more checking your history and wondering which one of your tabs crashed your browser; well done, IE9.


Compatibility View

Like many of the features covered so far, this one is also unique to IE9.

Compatibility View works by analyzing popular websites and testing their compatibility with IE9. If a website does not meet certain criteria, a new button appears alongside the refresh and stop buttons. If you choose to click the button, “legacy document mode” is activated.

Legacy Document Mode really means displaying websites in the same way that Internet Explorer 8 does. This way, if there are any elements displaying incorrectly, you can turn on the compatibility view, and hopefully resolve any issues. Also, IE9 remembers which mode/view you prefer, and automatically selects this next time you visit the page.

After trying this myself, I have yet to see any difference between views.

I should also note that a websites compatibility is predetermined by the Internet Explorer team. I can’t help but wonder what criteria are websites being judged upon for either compatibility?


Add-On Performance Advisor

Addon Manager

This feature first appeared in Internet Explorer 8, and is simply a natural progression for its capabilities.
Many browsers now offer add-on applications; these can range from search engine optimisation tools to e-mail checkers and more. The performance advisor simply notifies you if an add-on performs poorly and will give you the opportunity to disable it.

I have primarily used Firefox for several years, and I am quite an advocate of its add-ons. I really wish this feature was available, as I am often disabling plug-ins for suspected performance issues.


Markup and Standards Support

Internet Explorer 9 was built with modern standards in mind. With developers and clients already trying out their websites in HTML5, SVG, and CSS3, IE9 appears to be focused on extensive support for modern standards. I was surprised to hear that they have invested a large amount of time and work with standards organizations such as W3C. To ensure that they stay ahead of the game, they have contributed over 2000 test results to the governing standards bodies to ““help same markup become a reality”.”

To enable developers to easily work with IE9 and interoperable markup, the IE9 team concentrated on five key areas: HTML5, Document-Object Model Optimization, CSS3, Scalable Vector Graphics, and Chakra, the new JavaScript engine.


HTML5

HTML5 Pinball Demo

If you have yet to see HTML5 in action, I recommend you visit the IE Testing Center. There are some fantastic canvas and benchmarking tools to play around with. Personally, I love the new video and audio elements, which allow for fast and easy media content on nearly all popular modern browsers.

The support for HTML5 in the IE family first began with Internet Explorer 8. IE8 does not support most of the newer HTML5 features, and when compared to other modern browsers, really flags behind. This is why IE9 chose a different approach, one which utilities hardware acceleration through Windows and your graphics processing unit. Combined with added support for new elements and better HTML parsing, IE9 is already a step ahead of the competition where HTML5 is concerned.


CSS3

Once again IE8 laid the ground work for IE9 in terms of compliance for cascading style sheets by centering on CSS2.1. If you are a developer you will know how hard it can be to force IE8 to play nicely with CSS3; unfortunately, there are only a few fixes and workarounds, and even these still present problems. Thankfully, IE9 was built with CSS3 in mind and will be the first version to include many CSS3 modules.

One of the latest trends in web design is the use of @font-face and similar typography enhancements in web pages. IE9 now introduces support for the Web Open Font Format (WOFF), which can work with TrueType and OpenType formats to transform the look of your font-family’s in CSS3. After working with Firefox and @font-kits for the last few months, I am excited to see this in action with IE9.

IE9 now supports the following modules from CSS3:

  • Backgrounds and Borders Module
  • Colour Module
  • Fonts Module
  • Media Queries Module
  • Namespaces Module
  • Selectors Module
  • Values and Units Module

Scalable Vector Graphics (SVG)

Recently I started working with Adobe Illustrator; after 10 years of working in web design and development (and primarily working with Adobe Photoshop) I felt I could finally devote some time to working with Illustrator and discovering what it has to offer, and in particular, exporting my work to SVG files. This was my first introduction to scalable vector graphics, and I am now starting to see them more and more.

It seems that, like me, Internet Explorer has never dealt with SVG either. It is only with IE9 that we first see interoperable SVG element support. Not only are they complying with standards, but they are also using hardware acceleration, by using our PC’s GPU to improve performance when rendering.

If you haven’t done so, I would recommend visiting the IE testing center and checking out some of the SVG demos; they have come a long way from growing simple 2-D shapes.


Chakra and Improved DOM

The Internet Explorer team have nicknamed their new JavaScript engine Chakra.

There appears to be a never-ending interpretation of what a ‘Chakra’ is, especially when it comes to medicine and religion interpretation; and if your background is in web design and development like me, trying to understand an overly complicated Wikipedia page on the subject is far outside the scope of this article.

On the other hand, IE9′s Chakra is an entirely new way of looking at JavaScript engines. In previous versions of Internet Explorer, JavaScript was tagged on to the side; it was never built into the core. Chakra changes things. JavaScript is now part of IE9′s engine, works with multiple CPU cores, and takes advantage of your computer’s hardware. This allows for faster interpretation, compiling, and code execution.

The new Document-Object Model has also had some spring cleaning. With various improvements, IE9 has increased efficiency and speed when rendering content. For example, previous versions of Internet Explorer have had problems handling white space in the DOM. IE9 has resolve these issues, handling this problem in a more appropriate manner.


Browser Benchmarks & Comparisons

With all this talk of hardware acceleration, modern standards support and improved interoperability, you could be forgiven for thinking that IE9 is the new Holy Grail of modern browsers. It certainly makes some bold claims and to be honest, as a hardened Firefox fan, I want to see IE9 put its money where its mouth is.

As I write this, it is just over 24 hours since the release of the IE9 beta. Anyone monitoring Twitter or following forum topics will already find brief comparisons and benchmarks between several browsers and IE9. I have already seen plenty of pros and cons, valid arguments and sworn allegiances to other browsers when people are asked: ‘So, are you migrating to IE9 then?’.

I decided to see things for myself, so I set up a basic benchmarking environment by installing five of the most popular browsers today and testing them against the claims of IE9. Throughout the rest of this article, you will see what tests and benchmarking tools are used, and ultimately how well IE9 fares against the competition.


Test System

I used a laptop and desktop PC to perform the tests but included only one set of results with article. I found that the results from testing hardware acceleration had very little difference between a moderately priced ‘home office’ laptop and my desktop PC. This was also true for testing between 64-bit and 32-bit browser versions.

Here are the system specs for my desktop PC:

  • Windows 7 64-bit
  • Intel i7 920 D0 CPU @ Stock 2.67 GHz
  • Corsair 6GB DDR3 Memory
  • ATI Radeon HD 5800 Graphics Card
  • ASUS Rampage II Motherboard

Browsers

IE9 Version

I decided upon the following browsers through personal experience and after consulting with other web designers and developers and the ’2010 Internet Browser Software Review Product Comparison’ list from toptenreviews.com

  • Firefox v 3.6.10
  • Opera v 10.62
  • Safari v 5.0.1
  • Chrome v 6.0.472.59
  • IE9 Beta v 9.0.7930.16406

I wanted to include a list of browsers which are popular and available across several operating systems. I think it’s important to say that when the benchmarks were conducted, each browser was freshly installed with the latest version, and no add-ons were installed.

Each of the tests were also performed with the browser maximized and after a fresh reboot. If you take a look at the IE Test Drive website you will see dozens of tests and great looking examples. Everyone will have their favorites and I understand you may feel other tests may be more suited to a benchmark browser comparison. Please forgive me if I have missed a more appropriate test to display here.


Benchmark Test Results

WebKit SunSpider JavaScript Benchmark

SunSpider Benchmark Results

Version: 0.9.1

http://www2.webkit.org/perf/sunspider-0.9.1/sunspider.html

SunSpider emulates real-world examples of JavaScript. By asking the browser to perform common JavaScript functions, like cryptology, we can gauge how quickly a browser handles. The quicker the JavaScript is executed, the better the engine.


Acid3 Test

Acid3 Benchmark Results

http://acid3.acidtests.org/

The Acid3 test is actually a set of one hundred tests, grouped into six areas. The test is designed to gauge how well a browser handles various web standards elements. Each of the six areas are represented as colored boxes and a successful percentage score out of one hundred is shown below. The full test results can be quite detailed, if analyzed correctly.

Today I have included the percentage score for each browser. I recommend you visit the Wikipedia page for Acid3 if you wish to read more about it.


CSS3 Selectors Test

CSS3 Selectors Benchmark Results

http://tools.css3.info/selectors-test/test.html

The CSS3 Selectors Test runs through forty-one CSS3 selectors and has a total of five-hundred-seventy-four tests. Once the test is completed you will be able to view any buggy or unsupported selectors for your browser. To keep things simple, I have included a score out of five-hundred-seventy-four for each browser.


The HTML5 Test

HTML5 Benchmark Results

Version: 1.0

http://www.html5test.com/

The score for this test is determined by the browser’s support for new and upcoming features of HTML5. Points are awarded as each feature is passed, and bonus points are awarded for special features like supporting audio and video content. I have listed each browser’s score out of a possible three hundred points.


FishIE Tank

FishIE Benchmark Results

http://ie.microsoft.com/testdrive/Performance/FishIE%20tank/Default.html

This is a great visual test, clearly it has been designed to show off the advancements in IE9. Using the new canvas features of HTML5, we are shown a fish tank, FPS counter and the option to change the amount of fish on the screen at any time. This test certainly depends upon hardware acceleration, the higher end PC will always perform better than these kind of tests. The graph above shows the results for 50, 100, and 250 fish when the browser was maximized to full screen.


Psychedelic Browsing

Psychedelic Benchmark Results

http://ie.microsoft.com/testdrive/Performance/PsychedelicBrowsing/Default.html

I first tried this test in Firefox . . . and very little happened. It was only when I tried this in IE9, that I fully understood the purpose of the demo: to once again show off IE9′s hardware acceleration. Just like the FishIE Tank test, the results were recorded in frames per second. The higher the frame count, the better the performance.


IE Beatz

IEBeatz Benchmark Results

http://ie.microsoft.com/testdrive/Graphics/IEBeatz/Default.xhtm

I chose this test, because it is interactive, uses ‘GPU-powered HTML5 graphics’, Canvas, SVG and requires 27 audio elements. I almost removed this from these benchmark tests on the grounds that only two browsers loaded the audio elements. But I kept it in as I feel it highlights real-world problems when it comes to interoperability and modern web standards. The results were recorded after leaving the demo to run for five minutes.


Canvas Zoom

Canvas Zoom Benchmark Results

http://ie.microsoft.com/testdrive/Graphics/DeepZoom/Default.html

All I can say is they must have used one expensive camera to take a picture! If you have yet to see this panoramic canvas benchmark in action, I suggest you take a look now, because it truly is spectacular.

At first I wondered how I could accurately gather test results. Like the other tests I maximized the browsers. I then clicked each of the images along the bottom and used the first one to zoom in and out multiple times. I recorded the average frame rate for each browser in the graph below using the same method. Not exactly scientific, but I feel it gives an accurate depiction of a real-world example.


Benchmark Conclusion

Looking at the bar graphs as a whole, it’s clear to see two sides to IE9:

  1. A dedication to hardware accelerated graphics, which clearly pays off when working with HTML5′s canvas. You only need to look at the psychedelic test results to get an idea of how well IE9 plays with your GPU.
  2. An improvement over IE8′s efforts to work with modern standards, but it still flags behind when compared to the other browsers.

Here’s where things start to get interesting. Microsoft has been promoting IE9′s modern standards support all the way along the development trail. In fact, their Beauty of the Web and Test Drive websites have examples, demos, and games all over the place. But with the score of 96 in the HTML5 compatibility test (the lowest score out of all five browsers) I start to wonder how swayed their demos and examples really are.

Of course, some leeway can be given for companies trying to promote their own products, but filling dedicated websites with examples like psychedelic browsing and Canvas Zoom, (both of which cause extremely poor performance in all other browsers) clearly gives the wrong idea on just how HTML5 ready IE9 really is.

At this stage, I’m glad I chose independent benchmarking tools, like the HTML5 compatibility test website. Without moving away from Microsoft’s Test Drive demos, you could be fooled into thinking that the latest version of Internet Explorer actually ticked every box for HTML5 and other modern standards.

Unfortunately, the confusion doesn’t stop here. Throughout the release of five ‘Platform Preview’ versions of Internet Explorer 9, Microsoft have been collecting their own test data. These results can be seen at the IE Test Center.

Looking at the ‘Cross-Browser Test Results’ table, and the HTML5 section, I count only three fails when looking at an older version of IE9. The platform preview version shown in this article already has a greater pass rate than any other browser listed.

In this case, we have conflicting test results. I’m certainly not accusing either side of padding the stats, because you can perform your own tests with IE9 and HTML5 website. I just think you need to be careful when comparing results like this; after all, the HTML5 Compatibility website and the IE Test Center tested for different HTML5 elements.


Pros and Cons

Pros

  • Clean and interactive interface.
  • ‘One box’ – address bar, search engine query, and favorites/history search in one. This is also now resizable.
  • Tabs are now moved up a level and sit alongside the address bar.
  • No task/info bar at the bottom of the browser, instead notifications are now shown in an unobtrusive box that appears when necessary.
  • Excellent use of hardware acceleration to improve, graphics, text, and images across webpages.
  • Improved standards support, such as HTML5, CSS3, and SVG.
  • “Tear off” tabs can be pinned to Windows 7 task bar for extra functionality.
  • Opening a new tab will show your most popular sites, sorted by activity. You also given the options to reopen previously closed tabs and reopen your last session. Both great features for recovering a crashed/closed browser.

Cons

  • Removed Internet Explorer 8 without warning.
  • Some websites just refuse to load, even with semantically correct markup. In my experience, this seems to be specific to the odd website taking advantage of HTML5.
  • Smaller screens, may have problems with tabs sitting alongside the address bar.
  • A reboot is required as part of the installation process, this is a minor grievance and may be resolved with a standard Windows update prior to final release.
  • IE9 scored the lowest out of the five browsers on http://www.html5test.com. Considering how Microsoft continuously advertise IE9′s support for HTML5, you would of expected to perform better.
  • Tabs are now moved up a level and sit alongside the address bar. I like the way this looks and feels, but I get the feeling that it may just get in the way further down the line.

Summary

It appears Microsoft has clear goals when it comes to IE9. They want to embrace modern standards and contribute to governing bodies like W3C to aid interoperability. IE9 is a massive leap forward from IE8′s attempts at HTML5, CSS3 and SVG. And it also feels like this is the browser they wanted to release with Windows 7. Looking at some of the new interface changes, like Jump Lists, reinforces this.

The benchmarks have shown problems still exist between IE9 and HTML5, but the advancements in hardware acceleration really shine through. Bugs do exist, some websites fail to load and it may take some time to get used to the new layout, but we need to remember this is still in beta stages, so maybe we could forgive it for the odd problem throughout development. So despite it’s cons, I’m happy testing out my latest web designs in IE9 and I am really excited about the final product.

I hope you have enjoyed this introduction to IE9 Beta and try it out, even if it is only to play PacMan in the IE9 Test Center!

June 30 2010

08:15

IE9 gets a Web Timing API to measure performance

Web site performance is a very important topic. We should not let our end users wait for our sites and optimizing them for load time and rendering can save us thousands of dollars in traffic. There is a lot of great content out there on performance (spearheaded by Yahoo a few years back). When it comes to testing the performance after the page has loaded though there is a lot of things you can do wrong as you need to test things with timers and hope nothing else happening to your test machine interferes with your results.

The IE9 team wants to make it easier for developers and added a new Web Timing API in the browser. Web Timing is a W3C working draft and the API implemented the NavigationTiming part of the spec in window.msPerformance.timing and offers you a few sets of information without having to hack your own solution:

JAVASCRIPT:
interface MSPerformanceTiming{
     readonly attribute unsigned longlong navigationStart;
     readonly attribute unsigned longlong fetchStart;
     readonly attribute unsigned longlong unloadStart;
     readonly attribute unsigned longlong unloadEnd;
     readonly attribute unsigned longlong domainLookupStart;
     readonly attribute unsigned longlong domainLookupEnd;
     readonly attribute unsigned longlong connectStart;
     readonly attribute unsigned longlong connectEnd;
     readonly attribute unsigned longlong requestStart;
     readonly attribute unsigned longlong requestEnd;
     readonly attribute unsigned longlong responseStart;
     readonly attribute unsigned longlong responseEnd;
     readonly attribute unsigned longlong domLoading;
     readonly attribute unsigned longlong domInteractive;
     readonly attribute unsigned longlong domContentLoaded;
     readonly attribute unsigned longlong domComplete;
     readonly attribute unsigned longlong loadStart;
     readonly attribute unsigned longlong loadEnd;
     readonly attribute unsigned longlong firstPaint;
     readonly attribute unsigned longlong fullyLoaded;
}

You have even more granular control in timingMeasures

JAVASCRIPT:
interface MSPerformanceTimingMeasures{
     readonly attribute unsigned longlong navigation;
     readonly attribute unsigned longlong fetch;
     readonly attribute unsigned longlong unload;
     readonly attribute unsigned longlong domainLookup;
     readonly attribute unsigned longlong connect;
     readonly attribute unsigned longlong request;
     readonly attribute unsigned longlong response;
     readonly attribute unsigned longlong domLoading;
     readonly attribute unsigned longlong domInteractive;
     readonly attribute unsigned longlong domContentLoaded;
     readonly attribute unsigned longlong domComplete;
     readonly attribute unsigned longlong load;
     readonly attribute unsigned longlong firstPaint;
     readonly attribute unsigned longlong fullyLoaded;
}

Read the original post on MSDN and check out the demo on IE Test Drive

March 16 2010

17:34

IE9 May Actually Be a Fantastic Browser

Today, as part of MIX 2010, some exciting updates were released on the progress of Internet Explorer 9. The IE team is implementing some incredible features, such as HTML5, CSS3, SVG support, and a new lightning fast JavaScript engine, Chakra! Further, they’re currently scoring a 55 on the Acid3 test – a figure that’s surely to increase substantially before the official release. What about the idea of Microsoft contributing to an open source project, jQuery, with their proposed templating engine? Within moments of these announcements, the Twitter-verse spilled “tears of joy.”

Want to dive in and check out the developer preview? That’s available too, starting today!




Take IE9 for a Test Drive.

Finally, we announced the availability of the first IE Platform Preview for developers, and our commitment to update it approximately every eight weeks. We want the developer community to have an earlier hands-on experience with the progress we’re making on the IE platform. The Platform Preview, and the feedback loop it is part of, marks a major change from previous IE releases.
IE Blog

Demos

Check out some of the demos below in each browser to learn the unique code required for each.


New JavaScript Engine: Chakra

JavaScript Graph

“You’ll notice that IE9 is faster at this benchmark than IE8 and several other browsers. It’s interesting to note that the difference between today’s IE9 preview and the browsers to its right in this graph. It takes about 70 seconds to identify a 300ms difference between browsers.”
IE Blog

Miscellaneous Tweets about IE9 from MIX 2010

“Video tag and SVG support in IE 9 as well – and it’s crazy fast. Very impressed.”
John Resig

“Microsoft to Expand its Collaboration with the jQuery Community”: http://bit.ly/cxybri
@jquery

“Today makes me very happy to have come to work at Microsoft. Very excited right now to see the reactions of the community.”
Rey Bango

“They’re asking for help in getting ppl to move IE6 to IE8. They want users on modern browsers.”
Rey Bango

“Open source, open standards, open Microsoft. Today I woke up to a different world than I thought I was living in.”
Molly E. Holzschlag

“So what we have here is HTML5, CSS3, SVG 1.1 in IE9. If I weren’t seeing it with my own eyes, I wouldn’t freakin’ believe it.”
Molly E. Holzschlag

Check back for more details as they become available!


Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl