Performance optimizations aside, and even if you concatenate all your JS files into a single file, you still have to load the library into the browser after the request has been made, and you can’t do anything with it until that has finished loading.

Wouldn’t it be so great if the browser had a copy of YUI or jQuery or Dojo or Prototype or GWT in memory at all times? Then your library using decision would not be influenced by the size of the library but by its speed and performance, and perhaps features and functionality provided. I mean you don’t go loading new fonts and new plugins every single time you go to a new page right? Then why do we have to download the same 5 or 6 JS libraries over and over all day long as we browse the web? And if this was an option how many companies would spend time rolling out their own rather than adopting one?

I understand there would be tons of politics involved and it will probably never happen in a million years but it is worth a try. Perhaps at least a FF only version could be done through an add-on that loads the latest major version of all these libraries and checks for updates on startup, similar to how other plugins get updated in FireFox today. The browser would have to namespace the libraries to avoid confusion. Developers would then just do a test to see if the browser has a required library in memory, and if not then make a server call for it as a fail safe.

It would take lots of collaboration and standardization. JavaScript was the sleeping giant that was brought to center stage with the success of frameworks and libraries that have fueled its standardization and resulting wider adoption. Why not give those libraries some credit and package them into your browsers?

What we knew so far about Chrome

• Uses V8 JavaScript engine which supports Classes and compilation. There is a V8 JavaScript benchmark suite that gives FireFox 3 a score of 83, while giving Chrome a score of 1213! Safari 3 gets a score of 128. Judging by this alone, V8 blows away the competition.
• Uses Webkit rendering engine.
• Tabs run as independent processes which can be managed.
• Lots of other features.

First Impressions

• Installation was a breeze and imported FireFox settings.
• No status bar, You only see the status bar when you hover over a hyperlink.
• The Task Manager (Shift + Escape) updates in real time and shows memory, CPU and network usage for each tab, each plugin, and the main Chrome process separately. There is also a link to Stats for Nerds with lots more gritty info.
• The Flash plugin is extremely CPU usage intensive and causes sluggishness when scrolling. I just loaded a popular flash website and noticed my machine came down to a near halt. It seems to happen more with Flash files that contain infinite loops, using as much as 70% of the CPU.
  
• The built in JavaScript console looks like a combination of FireBug and Web Inspector.
• There is a built in JavaScript Debugger (Alt + `)
• Passes the Acid 2 test.
• Chrome gets a score of 78 on the Acid 3 test, which is higher than FireFox 3 at 57, Safari at 72, and Opera at 45.
  
• Omnibar – this is the URL/location bar in Chrome that has some fuzzy logic built in to suggest “smart” autocompletes. This is the current order of the drop down in the auto complete list. There seems to be no way of changing this ordering as of now. Would be nice to be able to customize them.
   
  
   
  1. Search Google for FOOBAR
  2. FOOBAR/ (I’m not sure how useful this one is really)
  3. Link to the FOOBAR Wikipedia page
  4. Link to I’m Feeling Lucky URL for term FOOBAR. This item gives you the ability to search within the URL. For example if you type in Amazon in the Omnibar and select the amazon.com option using the down arrows, you will see “Press Tab to Search Amazon”. See below instruction on implementing this search functionality for your website.
  5. Search Google for FOOBAR ANOTHER TERM
  6. Search Google for FOOBAR ANOTHER TERM
  7. A page in your history pertaining to FOOBAR
  8. Link to history search for pages about FOOBAR

Cool Developer related stuff in Chrome

Google Chrome User Agent String:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.X.Y.Z Safari/525.13.

Chrome has a menu option called “Create application shortcuts…” that uses Google Gears to create a shortcut to your webapp. Users can choose to place the shortcut to your webapp on their Desktop, on the Start menu and even the Quick launch bar in Windows. This is a pretty powerful feature. When a user clicks this icon, Chrome opens up without the Omnibar, and your website will appear in an “Application” format. You can customize how Chrome creates these shortcuts using meta tags. These tags are named: application-name, description, application-url, and shortcut icons in both 32×32 or 48×48 formats. The favicon is used if not specified. For example you can use the following HTML code in the head of your document. Note that with the Mozilla added support which is used in Chrome, you can use any supported graphic format as your favicon, and not just the old school favicon.ico file.

<head>
  <meta name="application-name" content="Gmail"/>
  <meta name="description" content="Google's approach to email"/>
  <meta name="application-url" content="http://www.gmail.com"/>
  <link rel="icon" href=gmail_32x32.png sizes="32x32"/>
  <link rel="icon" href=gmail_48x48.png sizes="48x48"/>
</head>

To open a new tab from your webapp in a separate process using JavaScript you can do this in Chrome.

var w = window.open();
w.opener = null;
w.document.location = "http://differentsite.com/index.html";

Chrome lets users search your website from its ominbar. To enable and include your website’s search in Chrome you have to create an OpenSearch description document (OSDD).
For example you can create something like this:

<?xml version="1.0" encoding="UTF-8"?>
 <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
   <ShortName>Web Search</ShortName>
   <Description>Use Example.com to search the Web.</Description>
   <Tags>example web</Tags>
   <Contact>admin@example.com</Contact>
   <Url type="application/atom+xml"
        template="http://example.com/?q={searchTerms}&amp;pw={startPage?}&amp;format=atom"/>
   <Url type="application/rss+xml"
        template="http://example.com/?q={searchTerms}&amp;pw={startPage?}&amp;format=rss"/>
   <Url type="text/html" 
        template="http://example.com/?q={searchTerms}&amp;pw={startPage?}"/>
   <LongName>Example.com Web Search</LongName>
   <Image height="64" width="64" type="image/png">http://example.com/websearch.png</Image>
   <Image height="16" width="16" type="image/vnd.microsoft.icon">http://example.com/websearch.ico</Image>
   <Query role="example" searchTerms="cat" />
   <Developer>Example.com Development Team</Developer>
   <Attribution>
     Search data Copyright 2005, Example.com, Inc., All Rights Reserved
   </Attribution>
   <SyndicationRight>open</SyndicationRight>
   <AdultContent>false</AdultContent>
   <Language>en-us</Language>
   <OutputEncoding>UTF-8</OutputEncoding>
   <InputEncoding>UTF-8</InputEncoding>
 </OpenSearchDescription>

Fore more tips read the Google Chrome FAQ for web developers page.

ps. Don’t use the Google gears Chrome download page which gives a JavaScript error!

_GU_SetupOneClick is not defined
onload(load )

There is a less painful way to do this in the advanced settings of FF3. Just open up about:config and look for browser.cache.check_doc_frequency. The value can be:
0 once per session
1 everytime
2 never
3 when out of date (default)

I recommend changing this value to 1 if you are developing and testing code.

You will then see lots of 304 not modified messages, and get 200s for your changed files.

Web Inspector Overview

To get started open Web Inspector by going to Safari 3.1/Develop/Show Web Inspector and you will see the new window open up. The initial window is split up into a top row with navigation buttons and search box. The navigation buttons take you the the next and last actions you make within Web Inspector and come in handy when debugging. The left navigation lets you view and inspect the loaded web resources including Documents, StyleSheets, Images, Scripts, WebFonts, Databases and Other files, as well as buttons to load the Console and Network details. Ajax request and responses show up under the Other file category. If any errors are found, the number of errors are placed on the file name in the navigator. For example here, Safari has found 1 bug in the file diggthis.js The main content area shows you the web source details for viewing. JavaScript errors are marked with an orange pop, while HTML and CSS errors have a red color. If you want to attach Web Inspector to the bottom of your Safari Window click the small box on the bottom left corner of the window. I found this this to be a more usable placement.

DOM Editing

Clicking on any HTML Document on the left loads the source on the right. Documents can also be viewed as a DOM resrouce by clicking ont he DOM button on the top nav. (Note you have flip between DOM and Source view for HTML files.)

Searching supports DOM and CSS elements and you can nest your DOM element searches to filter out exactly what you’re looking for. For example #page a returns all anchor tags in the div with the page id. The corresponding display element in Safari is highlighted as you select DOM elements.

The right pane displays Styles, Metrics and Properties for seleted DOM elements. Styles show you both the computed style as well as all the defined style rules for that object. Like FireBug you can edit your CSS rules in real time in the Styles boxes for each CSS rule. To edit any CSS property double click the name or value and an edit box opens allowing you to type in your changes. This is great for testing out new ideas on the fly.

The metrics pane shows you the layout rules including offset, margin, border, padding, width and height for the element. Finally the Properties pane lists all of the DOM object properties that apply to the selected element.

Downloadable Web Fonts

If you are using downloadable web fonts the Fonts file group shows you a rendering of all the fonts that are loaded into the user’s browser.

Client Side Databases

Also if you are using the client side database features of HTML5, the Databases category will let your explore the databases loaded in the client along with the all the tables and rows in each client side database. From here you can also execute SQL queries against the databases.

The Console

The console feature lets you type in JavaScript commands and view JavaScript errors, along with HTML and CSS rule errors. Clicking on any error jumps to the file, but unfortunately doesn’t go the corresponding line. The console has an input area for testing out JavaScript and DOM commands on the bottom. There is in fact a console object and my tests showed that Safari supports only a few of the functions for the console object. Here is a list of the FireBug console methods of which only a few are supported in Safari namely log, info, warn and error.

Supported methods:
log info warn error
Unsupported methods:
debug assert dir dirxml trace group groupEnd time timeEnd profile profileEnd count

Network

The network tab is actually quite nicely designed and show you what the transfer time or the transfer size for each resource and in total for the page. The capsule graph is color coded and breaks down the file types by Docs, CSS, Images, Script and Other. You can switch between time or size from the drop down. Web Inspector makes some suggestions as well for improving speed, for example here we see a recommendation to use file compression to save bandwidth. (I don’t really use this method now since IE6 is buggy with gzip deflation.) Click on any file to see the HTTP request and response header for that file.

Snippet Editor

The Snippet Editor is a little utility that allows you to enter blocks of HTML and CSS and have it rendered on the fly. It is quite useful for testing out your CSS and Layout in little chunks.

Note: While using the Web Inspector and Snippet Editor, I came across numerous little annoying bugs and usability issues here and there. Also lots of features that I would expect are not there. For example you can not click on elements to inspect them, you can not add new style rules if they don’t exist already, and you can’t edit rules for CSS files loaded using @import. I would have to say that FireBug is a superior tool at this time for professional debugging, but Safari is about half way there.

Developer Menu

The first thing you will notice is the addition of the “Develop” menu (Preferences/Advanced/Show Develop menu in menu bar) item with the following tasks:

Open Page with: (Other browsers installed on your system including FireFox, Internet Explorer, Opera)

User Agent: Set you user agent from the list of options, or enter your own user-agent. Finally! This was previously part of the hidden debug menu and you had no way of specifying a custom user-agent. The other exciting additions here are the ability to set your user-agent as Mobile Safari 1.1.3 for either iPhone or the iPod touch.

You can also pull up the Web Inspector, Error console, Network Timeline and a Snippet Editor. Lastly the Developer menu allows you to disable various browser features such as Caches, Images, CSS Styles, JavaScript, Runaway JavaScript Timers, and Site-Specific Hacks. You can now also edit CSS in the Web Inspector. More on these in a later post.

Standards Support

Support for CSS 3 web fonts using CSS @font-face rules. check out what can be done with downloadable fonts in these working samples here, here, here, here, here, and here. The CSS and a sample web font are show below. If you are using Safari 3.1 you should see a cool font.

@font-face {
  font-family: "Acorn Initials";
  src: url(http://www.domain.com/Acorn___.ttf) format("truetype");
}

Safari 3.1

Support for CSS transforms and transitions. Below are some demos of these.

Here is a sample of the -webkit transform CSS which is now supported by Safari 3.1. Click on the Safari logo to rotate it 1440 degrees.

The following Safari logo is skewed 35 degrees using -webkit-transform: skew(45deg, 0deg).

The following image changes its scale using -webkit transform:scale() to zoom in 30% when you mouse over it.

Support for HTML 5 <video> and <audio> elements. Watch out Adobe and Flash. Here is a demo of the video tag. There is also added support for SVG images in <img> elements and CSS images and SVG advanced text.

Support for offline storage for Web applications in SQL databases. That means you can now store your databases locally on the client’s machine. Here’s some sample JavaScript to do the client side databases. Check out this demo that shows you how it works.

database.executeSql("SELECT * FROM test", function(result1) {
   // do something with the results
   database.executeSql("DROP TABLE test", function(result2) {
     // do some more stuff
     alert("My second database query finished executing!");
   });
});

 
Running the CSS3 Selector tests reveals that Safari 3.1 has full support for CSS3 Selectors while FireFox 2 and IE 7 are still playing catch up.

Performance Improvements

Apple claims that Safari 3.1 “executes JavaScript up to 6 times faster than Internet Explorer 7 and up to 4 times faster than Firefox 2″. Performance measured in seconds. Testing conducted by Apple in March 2008 on a 2.4GHz Intel Core 2 Duo-based iMac system running Windows XP Professional SP2, configured with 1GB of RAM and an ATI Radeon HD 2600 with 256MB of VRAM. HTML and JavaScript benchmarks based on VeriTest’s iBench Version 5.0 using default settings. Testing conducted with a beta version of Safari; all other browsers were shipping versions. Performance will vary based on system configuration, network connection, and other factors.” I tested IE7, FF2, and Safari 3.1 with 3 JavaScript performance testers and the Acid 3 test kit. The tools used are
1. Acid3 tests.
2. JavaScript speed test written by Jason Orendorff
3. SunSpider test kit from WebKit.org
4. slickspeed test from Mootools.net

Here are the results in milliseconds from the tests which seem to agree with the results found by Apple. You can see that Safari 3.1 does in fact have a much more efficient JavaScript processing engine, and is three quarters of the way there when comes to passing the Acid3 tests.

Detail links at SunSpider:   IE7     FireFox 2.2     Safari 3.1

Microsoft Windows

• Improves Back/Forward performance
• Supports signed Java applets
• Shows Caps Lock icon in password fields
• Adds support for showModalDialog
• Localized in 16 languages
• Adds support for International Domain Names
• Improves handling of Japanese, Chinese, and Korean text
• Contextual menu now allows opening a link in a window or tab
• Improves pop-up blocking to work with plug-ins

Other Improvement

• Double clicking on the Tab Bar opens new tab
• Includes URL metadata when images are dragged or saved from browser
• Opens Download and Activity window in current Space
• Supports trackpad gestures for back, forward, and magnify on MacBook Air and compatible MacBook Pro computers
• Shows Caps Lock icon in password fields
• 13 Security Fixes
• Increased site compatibility
• Improved application stability

Mozilla/5.0 (Aspen Simulator; U; Aspen 1_2 like Mac OS X; en-us) AppleWebKit/525.7 (KHTML, like Gecko) Version/3.1 Mobile/5A147p Safari/5525.7

This means if you load up sites that only look right on the iPhone they won’t render correctly on the Aspen Simulator. An example of this is the Yahoo Ajax Flickr website designed specifically for the iPhone. This page renders correctly if you’re on an iPhone, but will show you the basic mobile version if it doesn’t see iPhone in your user-Agent. Next version of Aspen will hopefully have an option to easily edit the user agent string of the Safari browser. For reference the mobile Safari app is located in this folder:

/Developer/Platforms/AspenSimulator.platform/Developer/SDKs/AspenSimulator1.2.sdk/

Here are top 7 reasons why you really should check out Get Clicky.

1. Spy

Spy is a live view of visitors interacting with your web site. Its like having your own digg like spy page. This gives you the power of knowing in real time when and where your visitors are coming from, what pages they are visiting and where they are going when they leave. You see the user IP address as well as their browser and operating system. You can even trace specific users and see a breakdown of the history of their visits and actions made on the site. For each visitor you also see a nice set of stats such as their browser, operating system, language, resolution and whether JavaScript is enabled. As a side note Clicky works regardless of JavaScript support using image source loading.

2. Tagging and Filtering

You can go a bit further with IP address tracking in Clicky. You can tag certain IP addresses so you can easily identify them. You can also filter out specific IP addresses from the stats. For example If you want to exclude your own hits to your blog from being counted in your stats, enter the IP address(es) you use regularly and have them filtered out.

3. RSS

Stats via RSS is another amazing feature that gives you the power of keeping a tab on your site. Clicky gives you customizable RSS feeds that are updated every 30 minutes. Using these RSS feeds you are able to for example take a quick look at the action on your blog from any RSS reader. Now you can easily monitor the recent incoming links, popular incoming links, popular urls, recent searches, popular searches, recent visitors and dashboard data. A cool trick you can try is to change the duration for a feed. For example to see the hits in the past hour, append hours=1 to the feed url. Or to see popular incoming links in the past week append days=7 to the feed url. Another neat feature of the RSS feed is that it obviously doesn’t require authentication, so you can share the url with others as you wish and or transform the RSS data and publicly display your stats on your blog.

4. Clouds, CSV, XML, JSON, API

Stats data is presented to you in tabular format by default, however you can easily change the view of any table to a cloud view by clicking on a little cloud icon. I find the cloud visual more useful, especially when looking at long tables of data. For example, the Search keywords page in cloud view easily highlights the most popular search terms and search engines that are sending you traffic. For offline viewing you can also download your stats in popular formats such as CSV for Excel, and also XML or JSON which can be useful for feeding them to your own applications. If you are comfortable with programming, you can even use the API provided to access the data from Clicky using your sitekey and site_id.

5. Powerful Dashboard

You can edit your main dashboard page to see the blocks that you are most interested in. By default you get the basics, Links, Searches, and Content. I also like Recent Visitors and Locale. On the Basics widget a summary stats table gives you the birds eye view of what is going on. You see the number of visitors, the number of actions performed, total time spent on your blog, as well as averaged numbers such as Average actions per visit and Average time per visit. If that wasn’t enough you also see a comparison percentage column which shows you how today’s stats compare against the previous day’s data, or the same day last week.

6. Google Maps

For those of you that like to see geographical data, Google Maps is very nicely intergrated into Clicky in a few places. You can see the geolocation of any specific user as well as the locations of all visitors to your site on the map.

7. WordPress Plugin

If you use WordPress, and you should be, this plugin automatically puts your tracking code at the bottom of all pages on your site and filters out all traffic from site admins like yourself. It also does the whole ‘custom data tracking’ thing to automatically name your visitors inside the Clicky interface based on what they entered on your comment form.

There are a ton of other features that I don’t have time to go into here, such as tracking custom data, tracking downloads, FeedBurner integration, HTTPS support and more. You can try out a demo of a sample tracking site to get a feel for the clean and easy to use user interface.

When you first register, you get 21 days of premium service free, so you can try out all the features. You can track up to 3 web sites and 1,000 daily page views per day per site for Free. Beyond that level there are reasonably priced premium services which get you more sites, more features, and higher traffic levels – starting at less than $2/month.