Safari 4 first analysis of features, performance & developer tools
Posted in Development, Tech News on February 24th, 2009 by jeremy – 1 CommentSo everyone is talking about the new Safari 4 beta that was released today; another jab in the reignited browser wars. Which from a consumer standpoint is great because with 4 major browsers out (no I’m not looking at you Opera) we are starting to see some diversity in choice, features, and performance. From a developers perspective additional browser interest is both a blessing and a curse. It moves the technology forward in a competitive manner, which for those of us who view the Internet as a “platform”, that is a good thing. It also mostly is moving standards forward, which again is good. On the other-hand it greatly adds to our development time. In fact, I once watched a presentation with one of the leads for Google maps that said at least half of their dev time is spent on browser compatibility - ouch! And our experience isn’t much different. So that sort of thing definitely adds up to loss of productivity. It is what is though, and since Safari is the hot topic of the browser fight for the moment, I thought I’d look in a little more depth at the release beyond the typical technews PR rehash.
Consumer Features: Coverflow & Top Hits + (bugs?)
The flashy consumer features are really about safari’s new UI. It has a more streamlined interface: the “tabs on top” management I find slightly uglier but far better in terms of usability. The UI element Coverflow, which most are familiar with either directly through MAC OS or via iTunes and the iPhone, is now implemented directly when viewing your history and bookmarks. Using it for a few hours I found it works quite fast but I’m underwhelmed. What would have been really cool is if they would have implemented a quick native rendering version of search using coverflow. The infinitely cool startup company searchme does this, though I find it a bit slow and memory intensive since its done via web programming. If apple would buy out searchme and actually implement the thing natively within safari, now that would be cool.
Top Hits feature is also really cool, and I like that it opens by default in a new tab, which for one thing looks nicer then opening a blank page and actually seems quite useful in general. The only downside is you cant seem to add directly to that page, it really is your most frequently used pages, and I would have liked to had a way to manually override it.
The final UI element is less feature and more bug which is just the occasional incompatibility issues with sites. I’m currently writing this with the Wordpress editor (which is actually ‘codewise’ tinymce editor) and when I went to insert a link, the normal modal lightwindow view that should pop up just freezes and blocks your ability to do anything after that. This sort of thing happens with some JS rich sites and its been a show stopper with me using previous versions of safari (couldn’t use google docs for quite some time because it wasn’t “safari compatible”). In today’s wordpress example I was able to recover my locked window by using the dev tools (more on that in a minute) but still that would normally be a fail for a typical user. In fact I think Apple needs to work on some sort of compatibility mode so normal users don’t have these sorts of problems. If those were resolved I do think Safari could pickup even more steam.
Performance testing Safaris new Nitro Engine
Safari 4 Nitroengine performance
So one of the biggest things Safari 3 boasted and now even more so with Safari 4 is that its the fastest browser. Since fastest seems to be always subjective from a marketing side, I figured I’d actually run it through some real world analysis. I compared Safari 4 against Firefox 3, Internet Explorer 7 and Google Chrome. To keep the test fair I ran all browsers using the same machine (a dual core 2.2ghz imac with 1Gb ram) running the same OS( windows xp “native” via bootcamp). I did two tests that measured real world load speed with caching turned off. For a basic test I loaded the socialguides blog up in all 4 browsers. The socialguides blog is a fairly plain vanilla wordpress install with very little JS or other stuff so loading is fairly quick. I then compared that with socialguides web service that we are currently building which is very JS/AJAX rich to get a feel for the javascript rending and its speed in handling webapps in general. You can see the graphed results above (load times measured in seconds). While these tests are far from exhaustive and I’m sure someone like arstechnica will do some real hardcore testing, my own cursory testing seems to indicate that safari is in fact the fastest browser - even beating out Google Chrome. And well i n my eyes, that alone makes it a winner.
Safari Developer Tools
As a developer if there was one reason I use Firefox as my daily browser, I’d attribute it to my beloved Firebug. For those of you unfamiliar with Gods gift to web programmers - Firebug, basically lets you edit a website on the fly: you can mess with css styles, edit html, walk the dom tree, debug javascript, and a whole lot more. There’s an Internet Explorer add on called the IE developer toolbar that is sort of like it, but the IE toolbar is so abysmal comparatively, I shudder to even mention it in in the same sentence as Firebug. And as for safari…well it didn’t have much. Because of this, most webdevs I know will do most of their front development on FF first then painfully deal with incompatibilities with IE and safari after the bulk of the debugging has been done on FF.
Now with Safari 4 Apple has been kind enough to include a set of developer tools that seem very much to echo Firebugs functionality. While it will take some time to really get an accurate impression, the few hours of using it I already like it far more then IEs dev toolbar and almost as much as Firebug. In fact there are a number of features that I find superior. I like that it has its own menu which the lack of is a major annoyance with Firebug and the IE toolbar. I like that you can change the User Agent directly which requires either a different plugin on an annoying “about” hack with FF. I also really love the network timeline as it helps track down javascript timing problems. Also the ability to disable images, css, cache, javascript is really useful (though disabling site specific hacks is weird on multiple levels). And finally the web elements inspector is quite good and almost to par with firebug. The only thing I heavily dislike about it is that it seems not be able to insert completely new css “test” styles via the rightside pane on the fly, which I use in firebug all the time (though it could be there and i just haven’t found it yet).
Conclusion
Overall between the quickness of speed, the coolness of coverflow and tophits, and the impressiveness of the developer tools, I may be switching over for the first time using safari as my main browser, time will tell, but right now it definitely is in contention.