YAOHAIXIAO.COM

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

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

Rss

Home » Frontend » Performance » 前端性能优化:Use Cookie-free Domains for Components

前端性能优化:Use Cookie-free Domains for Components

今天要介绍的YSlow前端性能优化规则是:Use Cookie-free Domains for Components(使用Cookie自由的域名存储静态组件)。

Cookie-free Domains 的作用

前面介绍《Reduce Cookie Size》规则时,我们知道页面中的左右静态组件都会在Header包信息中包含Cookie信息。而这些Cookie信息基本上都不用,所以这些Cookie只能够带来额外的流量,减慢页面的加载响应时间。为了解决这个问题,我们就需要使用子域名或者其他域名(空间)来存储这些静态组件。这里的子域名和其它域名就是所谓的 Cookie-free Domains

来看看YSlow的文档是怎么说的吧:

When the browser makes a request for a static image and sends cookies together with the request, the server doesn’t have any use for those cookies. So they only create network traffic for no good reason. You should make sure static components are requested with cookie-free requests. Create a subdomain and host all your static components there.

Cookie-free Domains 的作用除了处理那些没有用的Cookie数据外,其实还有一个作用。就是我们之前介绍《Make fewer HTTP requests》规则时介绍过,服务器对HTTP并发请求的处理能力是有限的,使用不同的域名(Cookie-free Domains),其实就是使用另外的服务器来分担优化HTTP并发处理的能力,可以进一步优化前端性能。当然,Cookie-free Domains 也不能太多了,2-4个最好。

当然,如果你使用代理来访问组件,使用 Cookie-free Domains 也有好处,原来有些代理服务器请求来自 cookie-free domain 的组件时不会缓存Cookie信息,这样就可以起到 Reduce Cookie Size的作用。YSlow 文档是这么描述的:

Another benefit of hosting static components on a cookie-free domain is that some proxies might refuse to cache the components that are requested with cookies.

Subdomain or New Domain

前面说了,我们可以用子域名或者启用一个全新的域名来存储页面的静态组件,那应该选哪个比较好呢?YSlow 的文档其实也给出了一些建议:

If your domain is www.example.org, you can host your static components on static.example.org. However, if you’ve already set cookies on the top-level domain example.org as opposed to www.example.org, then all the requests to static.example.org will include those cookies. In this case, you can buy a whole new domain, host your static components there, and keep this domain cookie-free. Yahoo! uses yimg.com, YouTube uses ytimg.com, Amazon uses images-amazon.com and so on.

把 YSlow 的文档简单的解释一下意思就是:使用全新域名会比使用 Subdomain 更好(真正的 Cookie-free),以为在设置 Cookie 时,如果指定的域名(级别)为 top-level domain(具体的Cookie数据的读取设置操作请查阅 PPK 的 Cookie 说明),那么设置的这个 Cookie 值也会被存储到子域名的组件的 Cookie 值中。所以使用子域名并不是很可靠,不能真正做到 Cookie-free。

设置 Cookie 值时要注意的问题

那么如果我没有资金购买新的域名(服务器),我只能使用 Subdomain 来存储组件,这个时候设置Cookie时要怎么处理呢?看看 YSlow 的说明吧:

On a related note, if you wonder if you should use example.org or www.example.org for your home page, consider the cookie impact. Omitting www leaves you no choice but to write cookies to *.example.org, so for performance reasons it’s best to use the www subdomain and write the cookies to that subdomain.

其实,简单的说设置 Cookie 值时原则就是尽量缩小 Cookie 信息存储的域名范围。例如YSlow文档中说的,如果你使用 example.org or www.example.org 域名来作为网站首页的访问地址,在存储 Cookie 信息时应该将域名设置为 www.example.org,而不要使用 *.example.org 或者 example.org。因为 后者两个域名都是 top-level 的,会使网站的所有子域名的组件都会包含这段 Cookie 信息。这样不但优化不了前端性能,反而会增加 cookie size,而这正式我们要避免的。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Use Cookie-free Domains for Components

« »

发表评论

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

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

(Spamcheck Enabled)