by

First Glance Dissection of the Gmail Web UI

Wonder how the Gmail web UI is so blazing fast? I sure did, so I hooked it up to netmon spent some time dissecting it to see what makes it tick. In the end, I was awed by the genius and cleverness that is its technical design. So, I’ll go over the basics.

 

  • JavaScript — when Gmail loads, it loads in to a couple of frames, the most important of all being one called “js”, which hosts 200k+ of JavaScript, all of which gets cached (for what looks like 20 days)
  • Debug Hooks — all the debug hooks are still there in the code, such as Debug(“Cannot open window. Is there a popup blocker?”). Debug is defined as function Debug(){}, so it looks like the production builds don’t have the plumbing
  • Inbox is a Search — based on the URL of the inbox (http://gmail.google.com/gmail?search=inbox&view=tl&start=0) and the URL of a search (http://gmail.google.com/gmail?view=tl&search=query&start=0&q=google) it looks like the inbox is just another search view
  • Login Window is an IFRAME — this one I don’t get. It actually hurts page load times. I noticed this on a slow DSL line this weekend as the login box on the main Gmail page took a while longer to load than the rest of the page
  • XmlHttp— Gmail uses XmlHttp extensively to have the web page talk to the server. This prevents the page from having to roundtrip and can happen while the user is going something else
    • XmlHttp GETs
      • Main_LoadContacts — load contacts
      • SC_ShowSuggestionMenu — gets a list of suggestions based on a word. Also returned as a two dimensional JS array. If you use http://gmail.google.com/gmail?view=sc&sg=1&ms=cofeee, you get back [0,[“coffee”,”coffer”,”Coffey”,”Codee”,”cover”]
      • CV_SendAdRequest — sends the request for the ads on the side and gets them back as an array (notice a trend here?)
    • XmlHttp POSTs
      • DB_SendJSReport — sends a report of a JavaScript error to
      • SC_SendSpellcheckRequest — sends the whole draft of the message over and gets a two dimensional array of incorrect words (I think). It starts like: [4,[“”,”asf”,” “,”ljasldkj”,” “,”lfasdjf”,” “,”alskjdf”,” rnrnOn Sat, 1 May 2004 19:37:00 -0700
  • JavaScript as the transport — it seems like they move a lot of data back from their web servers as JavaScript. Digging thru their JS, it seems a lot like they do it in order to just be able to say “eval(blob)” and have it fill in to the context instantaneously. For example:
    • When loading contacts: new_contacts=eval(xmlhttp.responseText)
    • When spelling checking: eval(xmlhttp.responseText)
    • When loading spelling suggestions. var response=eval(xmlhttp.responseText);if(response[0]!=0){SC_ShowSuggestionMenu(win,idn,n,[]);

 

I won’t continue any more, but it’s really clever stuff, isn’t it? It’s a very novel way to build web pages. Basically (from my cursory analysis), they’ve taken a XmlHttp and used it as the high-speed interface to their web servers. By using JavaScript as the transport (instead of XML or HTML), they’ve offloaded the data parsing to the server so the client can simply take the JS blob and execute it to fill in the data structures and they can quickly then render the rest of the UI. Very impressive.