注:本文内容翻译之雅虎开发网站(http://developer.yahoo.com/performance/rules.html),系原创,如引用,请注明。
1.减少HTTP 请求
80%的终端用户都把时间浪费在前端。大部分时间都被束缚在下载页面的部件(components )上:图片,样式,脚本,Flash等。减少部件的数量能够减少传输页面时候需要的HTTP请求。这是页面快的关键。
一种降低部件数量的方法是简化页面设计。那么有没有一种方法设计富客户端(richer content)时,也能快速响应呢?
下面一些方法技术可以降低HTTP请求的,而且也支持富页面设计。
联合的文件(Combined files)通过整合所有的脚本到单个脚本中并且简化所有的CSS到一个样式文件中来减少HTTP请求的数量。当脚本和样式在页面中很多的时候,整合起来还是很有挑战性的,但是做完可以提高你系统版本的响应时间。
CSS Sprites(http://alistapart.com/articles/sprites)是一种比较好的方法来降低图片请求的方法。整合你的背景图片到一个图片,使用CSS的 background-image和background-position properties来满足你的图片布局需求。
Image maps整合多个图片到一个图片中。总的大小是一样的,但却降低了HTTP请求的数量,提高页面访问速度。图片地图只有在靠近的时候才起作用,比如导航条。定义图片坐标比较无聊,而且容易出错。在导航条中使用图片地图也是不容易访问。所以不推荐。
内联图片(Inline images)使用data:
URL scheme把图片陷入实际页面中。这也能增加页面的大小。整合内联图片到你的样式中,这也是一种减低HTTP请求,避免增加你页面大小的方法。但内联图片不被所有主流浏览器支持。
在你的页面中,从减少HTTP的请求数量开始,这是最重要的提高性能的准则。正如Tenni Thenurer的blog中写到“Browser Cache Usage - Exposed!”40%到60%的日常用户访问的时候,没有使用到缓存。让第一个访问你的页面的人感觉很快,这是好的用户体验的关键。
2.使用内容分发网络(Content Delivery Network)
接近你web服务器的用户对于响应时间比较有印象。把你的应用部署多种的,跨区域的服务器上能够是你的页面加载时间短于用户的预期,但是你该从哪里开始呢?
实施不同地区的部署的第一步,不要尝试重新设计你的WEB应用来适应分散的模型。随着应用的不同,改变设计模型可能带来风险,比如同步session状态和跨数据库的复制事务。尝试去降低你的用户和应用之间的距离,可能导致延迟,或者不能访问,
记住,80-90%的终端用户的响应时间花在下载所有的页面部件上:图片,样式,脚本,Flash等。这是性能黄金定律。与其进行重新设计你的应用模型这样困难,不如首先分散你的静态内容。这不但能大大缩小响应时间,而且用内容分发系统来实现很简单。
一个内容分发系统(CDN)是一个web服务器的收集,用于有效地跨区域发送应用给用户。服务器发送应用到特定的用于是基于网络距离来衡量。比如拥有比较少的网络跃点或者相应时间小的服务器将被选中。
一些大的互联网公司拥有自己的CDN,但比较有性价比的方法是使用CDN服务商提高的服务,比如Akamai Technologies, Mirror Image Internet, or Limelight Networks。对于刚起步的公司,或者个人的网络站点,一个CDN服务的费用可能负担不起,但是随着你的用户快速增长,并变得全球化,一个CDN服务让响应变快就显得很必要了。在雅虎,把静态资源移到CDN上使得终端用户的访问速度提高了20%。转变到CDN上是一个相对简单的变化,但是却能大幅提高网站的速度。
3.添加一个Expires或者Cache-Control Header
这一条有两点需要注意:
1)对于静态资源:通过设置很长时间的过期头,使用“永不过期(Never expire)”策略
2)对于动态内容:使用一个适当的Cache-Control头帮助浏览器处理相应请求。
页面设计变得越来越复杂,意味着使用了更多的脚本,样式,图片和Flash。
to be continued