Rooooar!
I've been optimizing the performance of one of our larger site productions the last week and took quite good care at making page elements cache correctly using expiry dates for each element type individually and gzipping any content that would benefit from it.
Well, today was time to test the performance of the front-page on multiple browsers. The site is really very complex. Initially we load 130kb of (unzipped) JavaScript and make 2200 method or function calls before anything is rendered. I tested the overall performance with and without a primed cache and must say Safari's performance blew me away.
For instance, IE7 takes 300 milliseconds to run the initialization procedures of the JavaScript classes.
Safari: 28 milliseconds.
What? Ten times faster? Even Firefox, which I to this day thought to have the best JavaScript engine of all browsers, takes 89 milliseconds.
Initial page load times on Safari seemed to be a little better than on Firefox, although lacking extensions like Firebug, I was not able to test that scientifically.
But what most impressed me was page load times with a primed cache. The site is designed so that all static elements like CSS or images have expiration dates, so essentially all that needs to be loaded when navigating back to the front-page would be the dynamically generated HTML. And looking at the server logs I confirmed that none of the browsers actually requested or revalidated any of the static elements.
Still Firefox and IE take about one second to render the page.
Safari: Instant. Really, you have to experience it to believe it. I've never experienced anything like it on any browser before. You hit the link and boom - its there. No delay whatsoever (well, ok, maybe the 28 milliseconds which it executes the JS in).
And the best part? I'm running Safari on Windows Vista on my MacBook Pro. Yep, hell has frozen over.
Comments
Why in god's name would you make 2200 function calls?
Posted by: Ben | 18 Sep 2007 22:30:03
Can you remove my email address from the comment above? I assumed it was only needed for posting and would not be displayed on the page.
Thanks.
Posted by: Ben | 18 Sep 2007 22:31:56
Note that the OS you are running this tests on matters. You really have 6 'separate' browsers to test:
1. IE (Windows)
2. IE (Mac)
3. Safari (Windows)
4. Safari (Mac)
5. Firefox (Windows)
6. Firefox (Mac)
And even more if you include Linux, Opera, etc. I imagine you will find that the 6 trials listed above will produce 6 different timings.
Posted by: Nate Chatellier | 19 Sep 2007 03:43:11
Sure, but IE Mac? That's sooo last century.
Posted by: Tuomas Artman | 19 Sep 2007 08:20:51
What about Opera 9.5?
Posted by: maliboo | 19 Sep 2007 12:39:29
Ben, we're using a somewhat sophisticated JS framework which binds certain JS classes to DOM id's, classes and tags. For example, if you want a image to act as a button (highlight fade's in on rollover, ...) you can accomplish this by adding the "button" class-name to an image element and parametrize it using hidden inputs. We have about 100 of these classes ranging from buttons to form input validation which are all applied during initialization. That's where the 2200 method or function calls come from.
Mailboo, haven't tried out Opera yet, but my guess is that it'll be right between Safari and Firefox.
Posted by: Tuomas Artman | 19 Sep 2007 22:29:20
Good aftenoon !
http://renerpal.com
There was merrily!
I wish you health!
Posted by: Enlalera | 19 Mar 2008 08:58:01
