YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Avoid Redirects

前端性能优化:Avoid Redirects

今天要介绍的YSlow的前端性能优化规则是 Avoid Redirects(避免重定向)。

重定向的作用

重定向(Redirect)用于将用户从一个URL重新路由到另外一个URL。我们平时直观感觉最明显的重定向就是在很多网站登录和注销登录时的页面跳转。当然,重定向的有一个副作用就是重定向会使你的网页变慢。

重定向的类别

(说明:重定向的类别章节选至《High Performance Web Sites》一书)

当Web服务器向浏览器返回一个重定向时,相应中就会拥有一个范围在3xx的状态码。这表示用户代理必需进一步操作才能完成请求。以下是 3xx 状态码:

  • 300 Muliple Choices (基于 Content-Type)
  • 301 Moved Permancently
  • 302 Moved Temporarily (或者 Found)
  • 303 See Other (对 302的说明)
  • 304 Not Modified
  • 305 Use Proxy
  • 306 (不再使用)
  • 307 Temporary Redirect (对302的说明)

其中,“304 Not Modified”并不真是重定向——它用来响应GET请求,避免下载已经存在于浏览器缓存中的数据。

状态码 301 和 302 是使用最多的。状态码 303 和 307 是在 HTTP 1.1 规范中添加的,用来澄清对 302 的使用(滥用),但几乎没有人使用 303 和 307,绝大多数网站仍然使用 302。下面是 301 相应头的示例:

避免重定向-1

浏览器会自动将用户带到Location字段所给出的URL。301 和 302 响应在实际中都不会被缓存,除非有附带的头 —— 如 Expires 或者 Cache-Control 等,明确要求缓存内容。

这里补充说明一下 302状态码, 基本上个301一样,只是 Location 指向的地址是临时的。这对对于需要做全面的SEO优化的页面也是有负面影响的。所以在做网站全面的SEO优化的时候,也请确保网站所有的转向都是 301 永久的转向地址。

重定向对前端性能的影响

301 和 302 的相应内容通常是空的。需要正确地指向到了 Location 指向的地址,才会开始下载页面元素,开始显示页面。所以在跳转期间用户是看不到任何内容的。来看看一个实际的 301 跳转的网络请求图:

避免重定向-2

我们看到,第一个301状态的大小是184Byte,基本上就是一个头信息,没有实体内容的。跳转到Location指向的地址时才开始加载内容。很明显,响应301转向请求也花了2ms的时间。2ms时间不长,不过通常我们的转向会比我这里的示例要消耗的时间长。

仔细看301的头信息与200的对比,没有 Content-Encoding:gzip 和 Vary:Accept-Encoding头性息,更进一步表明它是没有任何实体内容的。通过Firebug看得很明显,产生了两次HTTP请求。

缺少结尾斜线引起的重定向

我们遇到的最多,也是最浪费的重定向就是缺少结尾斜线引起的重定向。上图的301重定向就是缺少结尾斜线引起的:

http://www.hubei.gov.cn/wsbs (缺少结尾斜线“/”引起重定向)
http://www.hubei.gov.cn/wsbs/ (推荐的URL写法)

造成301重定向的原因就是Web服务器一般都允许自动索引,会自动转向到index.html页面上。所以你的服务器上设置了允许浏览目录,就会自动跳转到当前文件夹的索引列表页面。

这里要说明的,如果是网站域名地址缺少斜线是不会出现301重定向的。例如:http://www.yaohaixiao.com。这是应为浏览器在请求时必须制定一些路径。如果没有,浏览器会简单的使用文档根(/)。

缺少结尾斜线引起的重定向是很多服务器默认的行为,包括上面图中的Nginx、Apache和IIS。不过,YSlow的文档提到了一点:

This is fixed in Apache by using Alias or mod_rewrite, or the DirectorySlash directive if you’re using Apache handlers.

Apache 的虚拟目录 Aliasmod_rewrite 和 DirectorySlash 修复这个自动重定向的问题。所以,在我的博客空间的Apache服务器上,使用 mod_rewrite 模块做伪静态处理的地址不会产生重定向。

http://www.yaohaixiao.com/wordpress/
http://www.yaohaixiao.com/wordpress

这两个地址都返回的200的状态码,大家可以用Firebug的网络工具分析一下。Apache的这个特性在《High Performance Web Sites》一书中是没有提到的。置于《High Performance Web Sites》中提到的 DirectorySlash 的设置是这样的:

<Location /doc>
    DirectorySlash Off
	SetHandler astrologyhandler
</Location>

避免重定向 美化URL

除去像登录,注销这样的页面,加上新旧域名更替而必要的域名间跳转,其余的页面的重定向我们都要避免。即便做必要的跳转,也尽量用前面提到的 Alias 和 mod_rewrite 方法做 301 的跳转。

置于美化URL,其实就是要检查页面的URL地址的写法,记得在结尾加上斜线。或者直接就用 http://www.yaohaixiao.com/frontend/index.php 这样完整URL地址,避免重定向带来的性能损失。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Avoid Redirects

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)