Google Chrome CSS Selector Speeds Compared

Google somewhat surprised us all and released it’s web browser on Sept. 2, 2008; most users of the shiny new browser have been extremely impressed with the initial speed and features. I have to say that even I am impressed by this new browser (as long as I’m not behind a corporate firewall).  Since the CNET article came out about the extreme speed of Google Chrome, I immediately wondered how it would perform against other browsers in the mootools.net tool Slickspeed CSS selectors test, so I decided to do some benchmarking of my own.

The Setup

To do some benchmarking I downloaded the “mootools-developed” Slickspeed PHP framework from it’s Google Code hosted location, along with XAMPP to serve up the PHP pages required for the tests.

Hardware

  • 2007 Compac nc8430
  • Intel Dual-Core T2500 @ 2.00GHz
  • 1.00 GB RAM

Software

  • MS Windows XP Professional SP 2
  • XAMPP 1.6.7
  • Slickspeed (svn trunk version)

Browsers

  • Safari 3.1.1
  • Opera 9.5.2
  • Firefox 3.0.1
  • Internet Explorer 7.0.5730
  • Chrome 0.2.149.27

JavaScript Libraries

  • Mootools 1.2
  • jQuery 1.2.6
  • Prototype 1.6.0.2

I only downloaded 3 JS libraries because I thought that was enough to tell the difference between the browsers; this isn’t meant as an exercise at “who has the fastest JS library”.

To generate the results I installed XAMPP, installed slickspeed and set it up with the 3 JS libraries; then I opened each browser one at a time and ran the local copy of the slickspeed test:

This test runs 40 different CSS selector tests with whatever JS libraries you have configured atainst this W3C document. Each test is run separately in separate IFRAME tags as not to interfere with one another and report false data.

Data Collection

Data was collected by running the above slickspeed setup 10 times for each browser. After each time the test was ran, I recorded the final time for that browser.

** I used the final time in the slickspeed test because I was testing for the overall effectiveness & speed of the browsers. If you want to see how it performs on a per test basis, run it yourself!

The Results

Mootools 1.2 Results

Mootools used to be my favorite JS library. It has some cool features that make it pretty nice (like a stab at code organization using the Class object).

Safari operated the best with the Mootools library. Opera started out as a good candidate; however, the longer you kept open the browser and the more times you ran the test, the worse the response time got. Opera will show the same results for other libraries as well.

IE sucks, Firefox is good, Chrome is pretty darn good.

JQuery 1.2.6 Results

What is up Opera? You leaking stuff? No JS garbage collection? I did “hard” refreshes so the caches would be expunged; I just don’t get it.

Chrome and Safari FTW. IE bad, bad, bad.

Prototype 1.6.0.2 Results

Prototype made IE 7 look like the biggest piece of junk in the world; I have since then see the same results in YUI.  The IE results are an order of magnitude greater than the speeds of any of the other browsers combined. Keep in mind that less is better.

This was an extremely disappointing test; moreover, Opera still showed signs of memory leaks and slowly increasing final result times.

Chrome wins this battle; Safari a close second, and almost every other browser is not far behind. Yuck IE!

Final Results

So now we decided to take the average of all 10 tests and put it onto one chart so you can see the important stuff all summed up.

Final result conclusions…

  • Chrome did very well considering it’s a partial mesh of Safari and Firefox components.
  • Safari on a local copy of slickspeed did surprisingly very well.
  • Opera is okay if you view a web page and then restart the browser. Otherwise, JS applications become slower and slower.
  • IE needs a lot of work (but who didn’t know that already)

16 thoughts on “Google Chrome CSS Selector Speeds Compared

  1. Your conclusions about Opera are doubtful – using memory doesn’t automatically slow down the browser unless it’s starting swapping to disk.

    It’s entirely possible that Opera runs slightly slower because it is doing garbage collection – it could be that FF is the one not reclaiming its memory.

    Try changing your Opera memory cache settings away from Auto, and to a fixed size, see if that changes the results.

  2. Pingback: mixed's me2DAY
  3. I use Opera as my main browser and sometimes keep it open for *weeks* (I rarely reset my computer – just put it to sleep), and I haven’t noticed any such speed degradation.

    BTW: on Prototype’s graph you’ve got Prototype instead of Opera.

    BTW2: Could you add IE8 to the results?

  4. Google’s chrome ..really rocks
    Mosty we hit the following websites daily google,orkut,youtube “””almost all are google’s””
    Dear, these web pages have excellent compatibility with chrome and opens like anything..even other webpages gets loaded quicker than ever it was.
    and the last but not the least its user interface is better than all other brownser’s ..
    It seems google is going to dominate in what ever there are creating…

  5. I don’t understand the mootools test.

    How come safari beats chrome in every mootools test but in the summary comes out second?

    Did you get the colours mixed up? Did you get jquery and mootools the wrong way round in the summary?

  6. No joy.It just don’t work.I have these lines on the verify page.I have tryed to put the write_close there to .. but also no joyIm blank :)Thanks for your wsngillneis

  7. Thank you for the update! It looks like MooTools now ccekhs the locale when deciding how to display dates from the data class. This means that all of my albums are now being displayed with DD-MM-YYYY when they used to be MM-DD-YYYY. Not a big deal really, but I’m attempting to change it back as an exercise, and finding it quite frustrating! My understanding is that I have to specify a locale for MooTools somewhere on the website, or use the Locale.use( en-US’) command inside one of the Javascript files, but I’m not having much luck when I try to add it. Could you perhaps give me a pointer on how to do this? Thanks for your time!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>