Gmail是最好的web应用之一，这篇文章开始详细分析Gmail客户端的架构。

首先加载JavaScript file

https://mail.google.com/mail?view=page&name=browser&ver=1k96igf4806cy  

首先用js来检验客户端用的是什么浏览器，navigator.userAgent.toLowerCase()函数得出是以下哪种浏览器：opera, msie,mac,gecko,safari,palmsource,regking,windows ce,avantgo,stb,pda; sony/com2。Script 2计算加载一个象素的时间，用来测试客户的网络速度。

   function GetRoundtripTimeFunction(start)  
   {  
     return function()  
     {  
     var end = (new Date()).getTime();  
     SetGmailCookie(”GMAIL_RTT”, (end - start));  
     
     }  
   }  

gmail使用iframe，这个script确认加载正确的home page

top.location = self.location.href

 

同时写入cookie，确认使用的是哪个google services。然后显示登录页面。



Script 3 请求https链接，设置安全登录cookie

 https://www.google.com/accounts/ServiceLoginAuth?service=mail 

登录成功显示正常google帐户页面。 service=mail 参数表示登录的是gmail服务。

location.replace(”http://www.google.co.in/accounts/SetSID?……etc etc”);

记录session和设置登录cookies后，页面http://mail.google.com/mail 自动加载：

<meta content=”0;URL=http://mail.google.com/mail/” http-equiv=”Refresh”/> 

当加载mail页面，差不多有 28 个ajax 请求传送加载mail内容，labels标签，频道等。第一个 DIV tag 是用来显示"loading..." 信息.

当 Ajax 请求传送，同时有一个计时器计算加载时间，如果超过预期时间，将会显示: "This seems to be taking longer than usual" 同时提供一个简单HTML版本链接。

Gmail 用户界面由以下 iFrames 组成:

    * HIST_IFRAME
    * SOUND_IFRAME
    * CANVAS_IFRAME
    * JS_IFRAME

SOUND_IFRAME 用来加载一个flash对象提供音频服务，当用户使用gmail聊天服务时。

<embed id=”flash_object” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” quality=”high” style=”position: absolute; top: 0px; left: 0px; height: 100px; width: 100px;” src=”im/sound.swf”/> 

Gmail 记录每个部分，标签，mails等，emails使用数组，每个mail有一个唯一的id，这个唯一id被ajax查看和更新使用。例如:

http://mail.google.com/mail/?ui=2&ik=42e598c952&view=tl&start=50&num=70&auto=1&ari=120&rt=j&search=inbox  

以上url和图片都作为一个javascript数组来调用，你可以登录你的gmail查看一下，你的标签，你受到的emails，你的设置，你的最新的70封email等等，都是通过Javascript数组编码。gmail总是这样调用：

http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=93079&SID=584B451AB93DBDC&RID=16351&zx=lniy7w-6psisw&t=1  

如果通过Post方式自动远程有更新，请求url和上面类似：

http://mail.google.com/mail/?ui=2&ik=42e598c952&view=tl&start=0&num=70&auto=1&ari=120&rt=j&search=inbox  

如果得到新的数据，新的数据同样通过javascript数组加载。无论你打开哪封邮件，浏览器始终同时发送广告代码：

http://mail.google.com/mail/?ui=2&ik=42e598c952&view=ad&th=118e57dc03d67f16&search=inbox 

CANVAS_IFRAME 是 main iframe ，调用所有的布局元素，组成gmail界面：包含左侧的聊天部分，收件箱，打开邮件，广告部分等。左侧使用HTML table创建，JS_IFRAME 包含所有的javascripts文件，总共有89 个js文件。



如果你和某人聊天，请求的url是：

http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=891&SID=7D4E9A779225DC1&RID=50595&zx=hrsqkf-nwummu&t=1  

通过Post函数发送以下参数：

  

req2_text <your chat>  
   req2_to <sender’s email address>  
   req0_type cf  
   req1_cmd a  
   req0_focused 1  
      
    http://mail.google.com/mail/channel/bind?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=531&RID=rpc&SID=48DD6BA8E1D3A326&CI=1&AID=176&TYPE=xmlhttp&zx=m0iiwn-ok5jqr&t=1 

现在，上面的url返回给你聊天的朋友列表，以及他们的状态，使用同样url得到聊天信息，比如当 kenney.jacob@gmail和我聊天，消息数组通过这样的方式发送：

[184,[”m”,”kenney.jacob@gmail.com”,”730DFDF6F013F640_161″,”active”,”hi da”,”hi da”,1206444193169,   
   2. ,,0,0,0,0,[],”square”] 

这里有一个提示聊天是活动的或者不是，通过以下url：

http://mail.google.com/mail/channel/test?at=xn3j2zpul6ptan694kr6javrldi43s&VER=6&it=24343&MODE=init&zx=1vyx51-ze670&t=1  

返回数组类似下面：

[”b”,”chatenabled”]  

以上是gmail客户端详细架构第一部分，希望你喜欢。其他部分将在未来呈现。