代码改变世界

【译】提高网站访问速度的34条军规 20-25

2009-02-20 00:37  拖鞋不脱  阅读(3066)  评论(0编辑  收藏  举报

这是雅虎上的一篇文章,最近正在研究提高网页响应速度和用户体验的方法,拿来翻译一下,加深理解。

 

原文:Best Practices for Speeding Up Your Web Site

 

 

20 分域部署部件:Split Components Across Domains

tag:内容

将部件分割能使你获得最大的并行下载效率。但你同时需要注意不使用多于2~4个域名,以避免DNS查询导致的问题。例如,你可以将HTML内容和动态的组建放于www.example.org域名下,将静态组件分别放于static1.example.org和static2.example.org之下。

查看Tenni TheurerPatty Chi的"Maximizing Parallel Downloads in the Carpool Lane"获取更多关于并行下载的信息。

 

21 减少Iframe的数量 Minimize the Number of iframes

tag:内容

Iframes 能够使HTML文档被插入进父级文档中。首先需要明确iframe的工作方式,才能有效的利用这一形式。

<iframe>的优点:

  • 对于第三方内容,比如广告,能够在不影响父级设计的情况下快捷插入。
  • 提供安全沙箱,不影响父级。
  • 能够并行下载脚本。

<iframe>的缺点:

  • 即使是空的也会有消耗。
  • 会锁住页面的onload事件。
  • 不支持语义表达。

 

22 避免404错误 No 404s

tag:内容

 

一个获得没用的404响应的HTTP请求对于宝贵的HTTP请求资源来说是完全不必要的,而且这样还会减慢用户的体验。

有的网站提供了有帮助的404错误信息,比如"你是否在寻找……?",这样虽然能提高用户体验,但同样浪费了服务端资源(比如数据库)。尤其不妙的是在请求一个外部的Javascript脚本文件失败时获得的一个404错误,因为这样不但会堵塞并行的下载,而且浏览器会尝试分析404响应的内容,来辨识它是否是有用的Javascript代码。

 

23 减少Cookie的大小 Reduce Cookie Size

tag:cookie

 

有多种理由让我们应用HTTP cookie,比如身份验证,或者个性化设置。Cookie中的信息在服务端和浏览器间被放在HTTP头中交换。尽量减少cookie的体积对减少用户获得响应的时间十分重要。

查看Tenni TheurerPatty Chi"When the Cookie Crumbles"获取更多信息。

  • 去除不必要的cookie。
  • 尽量减少cookie的大小。
  • 留心将cookie设置在适当的域名下,避免影响到其他网站。
  • 设置适当的过期时间。一个较早的过期时间或者不设置过期时间会更快的删除cookie,从而减少用户的响应时间。

 

24 为部件使用没有cookie的域名 Use Cookie-free Domains for Components

tag:cookie

 

当浏览其请求一个静态图片并一同发送cookie时,服务器并不需要这些cookie。这样只是毫无益处的创建了多余的网络流量。应当保证静态的部件在请求时没有携带cookie,所以需要把你的静态部件放在另一个子域名下。

如果你的域名是www.example.org,你可以将你的静态部件放在static.example.org中。如果你把cookie设置在顶级域名example.org上而不是www.example.org,那么所有发送至static.example.org的请求会包括那些cookie。在这种情况下,你可以买一个全新的没有cookie的域名来放置你的静态部件。Yahoo!使用了yimg.com,YouTube试用了ytimg.com,Amazon使用的是images-amazon.com。

将静态部件放于没有cookie的域名下的另一个好处是一些代理服务器会拒绝缓存有cookie的部件。于此相关的一点是,如果你怀疑你应该为你的首页使用example.org还是www.example.org,考虑cookie的赢下。省略www会让你不得不把cookie写到*.example.org下,所以考虑性能,最好使用www.子域名,然后把cookie写到这个子域名下。

 

25 减少DOM的读取 Minimize DOM Access

tag:javascript

 

利用Javascript读取DOM元素很慢,所以为了获得响应更快的页面,你应该:

  • 缓存被读取的元素的引用。
  • 脱机更新节点然后把它们加回到树结构中。
  • 避免利用Javascript定位布局。

查看Julien Lecomte"High Performance Ajax Applications"获得更多信息。