Slow Web Site Won't Win !!!

luyued 发布于 2011-04-19 13:44   浏览 N 次  

Slow Web Site Won't Win !!!

Slow Web Site Won't Win !!!

Slow Web Site Won't Win !!!

这句话应该再重复一万遍，直到这个观念彻底植入我们的脑袋里，彻底融入我们的血液里面，彻底嵌入我们的DNA里面，因为我们做事情是为了Win，不是Lose，Slow Web Site Can't Win !!!

传统软件开发中，习惯上把Performance（效率）和Feature（功能）分开考虑；在网络服务中，performance就是最重要的一项feature。你的网络服务再花哨，如果用户感觉慢的话，就会转向其他的服务提供商。看看最近Redfin放弃Microsoft的Virtual Earth(VE)完全使用Google Maps，你就知道这是事实。

“In the end, it was speed, speed, speed that convinced us to switch. In our worst case scenario of 500 pushpins on the map in IE6, GMaps is 385% faster.”

Redfin也承认，VE能够提供比Google Maps更多的feature，但是速度（Speed）让他们作出这个决定。

道理大家都应该明白，现在让我们来看看为什么VE比Google Map慢。

就Redfin和其他Map API的使用者而言，使用VE或者Google Maps，其实就是在自己的网页里面嵌入VE或者Google Maps提供的javascript，网页在被访问的时候，这些javascript从VE或者Google Maps的服务器获取图片等信息，让后把地图绘制在网页上。

Redfin称Google Maps有时候能够比VE快385%，我敢断定，这不可能主要是因为服务器端的差距，这么大的差异肯定主要还是客户端的差异。因为Redfin已经不使用VE API了，所以我只能自己制作两个网页，分别使用VE和Google Maps来显示同一地区的地图，然后来分析一下二者的差距。

根据VE和Google Maps的API介绍，我写了两个网页，一个是使用VE API，内容如下

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
  
  
  
 src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2">
  1:  
 2: 
  
  
  

另一个是使用Google Maps API

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  
  
  
  
  1:  
 2: 
  
  
  

这两个网页都只是用了最简单的API功能，用同样的Zoom显示中心坐标为(37.4419，-122.1419)位置的地方，那里就是著名的的Palo Alto市，你要是不知道Palo Alto就该补补计算机科学的历史课了:-)

通过浏览器分别访问这两个网页，VE的显示如下

Google Maps显示如下

两个API都是用缺省参数，看起来VE提供的内容比Google Maps要多啊，但是不是这些内容导致了效率的差异，因为这些多出来的道路名称都是在Server端就render进图片里面去了。

有一个分析网页效率的利器FireBug，听这名字你就该猜到这使一个FireFox的插件，再配合使用YSlow，我们的家伙什就齐备了。顺便说一下，YSlow的作者Steve Sounders在创造YSlow并提出一系列提高网站效率建议的时候，还供职于Yahoo!（要不然怎么叫YSlow呢），现在他已经加入Google了，但是他提出的这些建议是很浅显易懂而且天下人皆知的，这样一个Web Site Performance的专家加入了Google不能成为我们的performance就可以比别人差的理由，更不能成为不使用他提出来的Best Practices的借口。

我们通过FireBug来看看这两个网页的效率，也就是PLT(Page Load Time)，有三个方面，一个是PLT 1.0，也就是用户首次访问一个网页的时间；一个是PLT 2.0，这个是用户第二访问网页的时间；还有一个PLT 1.5，是用户在浏览器中按F5（注意，不是Control+F5）做Refreshi的PLT。因为存在浏览器缓存（caching）的存在，所以基本上PLT1.0 >= PLT1.5 >= PLT2.0。我重复测试了几遍，平均下来是这样的一个结果： VE Google Maps PLT 1.0 ~5.5 seconds ~3.5 seconds PLT 1.5 ~2.2 seconds ~0.6 seconds PLT 2.0 ~0.4 seconds ~0.6 seconds

似乎各方面VE均落后于Google Maps，尤其是PLT 1.5。

YSlow可以给网页打分，这个打分和实际的PLT无关，只看网页结构是否有利于更快的PLT。YSlow给VE打出86分B级

YSlow给Google Maps打出95分A级

VE和Google Maps的结果差9分，差了一个级别，主要就差在这几个方面

• Add an Expires header
• Gzip Components
• Put CSS at the top
• Configure ETags

第一条"Add an Expires header"和第四条"Configure ETags"，是直接导致VE的PLT 1.5和Google Maps相比不是一个数量级的原因，之前我写过两篇文章解释这个问题:

Config HTTP Header For Better Client Performanc