A web browser is the most important piece of software for the internet. This might be why there are so many companies and versions out there striving to give users the best solution. Part of the challenge for web developers is creating websites that work across all of these different browsers while still pushing the envelope of web design and programming.

Definition of a Modern Web Browser

With all the web browsers and versions out there, what qualifies as a modern web browser?

For the scope of this roadmap, we will talk about Safari 4, Chrome, and Firefox 3.5 (formerly 3.1) as examples of modern browsers. All 3 of these browsers share some important similarities that make them stand out from the browsers of the past.

• Consistent and W3C standard web page rendering
• Intuitive and responsive user interface
• Beginning support for advanced HTML5 and CSS3
• Fast JavaScript performance!

Websites are becoming more advanced and reliant on AJAX and JavaScript frameworks  (i.e. mootools, jQuery, yui) to deliver interactive and responsive web solutions. Each of the 3 browsers mentioned above have custom implementations to dramatically improve JavaScript performance over the browsers of yesterday. With such improvements, it allows web developers to continue advanced JavaScript coding while still ensuring a good customer experience.

The following pages include SunSpider benchmarks to get a better idea of the JavaScript improvements that have been made. SunSpider is a standard benchmarking suite, developed by the WebKit team, used to compare the various browsers and their capabilities.

Safari 4

Safari 4 (currently in beta) uses the open source WebKit engine to render web pages. WebKit has evolved significantly over the last year and is blazing fast when it comes to rendering pages and especially shines in JavaScript performance.

WebKit implements a new JavaScript rendering engine called SquirrelFish Extreme (Apple calls this the Nitro engine – its referring to the same thing). According to the SunSpider JavaScript benchmark shown in Figure 1, Safari 4 outperforms all other browsers listed including Firefox 3.5 (listed as 3.1 in the Figure 1), and Chrome.

Figure 1: Safari 4 outperforms all other browsers listed including Firefox 3.5 (listed as 3.1), and Chrome. Obtained via http://www.apple.com/safari.

Case Study:

I've worked on a website that uses JavaScript to display very large amounts of XML (we're talking megabytes of data), manipulate the data, and create dynamic HTML. Running one of these XML reports in Safari 3 took upwards of 10 minutes, while Safari 4 ran the same XML report in 30 seconds! That was with no code changes at all, the updated WebKit engine made that dramatic of a difference.

Chrome

Chrome is based on the open source Chromium project (which is based on WebKit) developed by Google. Chrome is very similar in performance to Safari 4 since they are both based on WebKit. The only downside to Chrome is they only officially have a windows version. Google is hard at work to release a native osx version in the near future.

Chrome implements a new JavaScript engine called V8. This engine speeds up JavaScript execution and the browser itself to provide a solid alternative to the more established browsers out there. According to CNET’s tests, Chrome has the advantage over the other browsers.

Figure 2: According to the CNET tests, Chrome has the advantage over the other browsers. Obtained via http://news.cnet.com/safari-challenges-chrome-on-web-app-speed/.

Case Study:

The same XML report mentioned above in the Safari 4 section was tested in Chrome with similar improvements. The speed increase was not quite as much, but it still took under 60 seconds to render the same XML report.

Firefox 3.5

Firefox 3.5 (formerly 3.1 – currently in beta) uses the Gecko engine to render web pages. While not as dramatic as my experience with the WebKit engine, Firefox 3.5 offers definite speed increases over Firefox 3. The overall browser experience is more responsive in addition to the JavaScript performance.

Firefox 3.5 implements a new JavaScript engine called TraceMonkey. Recently there has been some back and forth between Firefox and Chrome regarding the JavaScript rendering speed. Mozilla released some SunSpider benchmarks to show their TraceMonkey engine vs. Chrome's V8 engine.

Figure 3: Mozilla released benchmarks to show their TraceMonkey engine vs. Chrome's V8 engine. Obtained via http://weblogs.mozillazine.org/roadmap/archives/2008/09/tracemonkey_update.html

In Conclusion

As we can see above, each browser is going to naturally have benchmarks that favor their particular JavaScript engine. However, one thing is clear across the board – all of these modern browsers are going to blow away the performance of older browsers. It is also important to note these browsers are in constant development, with optimizations being added nightly.

Browser technology is taking a major step forward in terms of speed and responsiveness. Web developers can continue to implement JavaScript heavy web applications and have confidence their sites will render and behave as intended.

About WebAssist

WebAssist helps you build better websites faster by offering software, solutions, and training needed to succeed on the web. WebAssist.com hosts a thriving community of over 300,000 designers, developers, and business owners. WebAssist's partners include Adobe, Microsoft, and PayPal.

Join our Community

From free software and training, to special offers, there is something for everyone. Come take a look at what is waiting for you and sign up today to gain access to all of the valuable benefits awarded to the members of our community. Click here to join our community.