YSLOW性能测试前端调优23大规则(19)使用一些无cookie的域

在之前章节中我们介绍了如何通过减少cookie的大小来提升性能，cookie虽然有很多的优势，但并不是说cookie是万能的。

当我们浏览器向服务器发送一些静态文件时，如图片、CSS样式等，在发送请求的同时会将cookie也同时发送到服务器，如图所示。

上图中发送的cookie是和图片的请求一同发送到我们网站域上的，因为这里并没有使用其它的子域来处理cookie的内容，在cookie的内容中可以看到。

但其实此时服务器并不会对cookie做任何处理动作。这样使用HTTP的响应时间变的更长，同时还会浪费网站的带宽，所以我们建议使用cookie-free domains的方法来优化该性能。

所以我们希望发送静态文件时，不希望同时发送cookie，一些大型网站都不会在浏览器向服务器发送静态文件的同时发送cookie文件或者由其它子域来完成，如图13-21是Yahoo网站发送静态图片的情况，并没有带cookie

如果将cookie设置在顶级域（例如http://yourwebsite.com），则所有子域（例如http://iym.yourwebsite.com）也将包含已设置的cookie。因此，在这种情况下，如果要使用无cookie域，则需要使用单独的域名来提供静态内容。但是，如果您在www子域上设置cookie，则http://www.yourwebsite.com可以创建另一个子域（例如http://static.yourwebsite.com）来托管所有静态文件，这样这些文件将不再导致发送任何cookie。

使用cookie free域有以下优点：

1. 减少网络流量；

2. 减少静态内容的加载时间；

以nginx为例，如果需求从无cookie域提供静态内容，那么必须先创建一个不包含cookie的子域，并将其指向与主域所在的同一服务器，如以下代码：

http://test.com A 192.168 .3 .13

static . http://test.com A 192.168 .3 .13

http://test.com是我们的网站，static. http://test.com是存放无cookie内容的地方。

接下来，需要在NGINX配置文件（ngix.conf）并添加以下代码：

server {

listen ip:80;

server_name test.com;

root /srv/http/nginx/ test.com;

access_log logs/ test.com.access.log;

location / {

index index.html;

charset utf-8;

}

}

}

server {

listen 192.168.13.33:80;

server_name static.test.com;

root /srv/http/nginx/test.com;

location / {

if (KaTeX parse error: Can't use function '\.' in math mode at position 21: …st_filename ~ "\̲.̲(jpg|css|gif|pn…") {

break;

}

return 404;

}

}

接下来需要修改前端访问服务器上的内容，如以下代码：

正常是使用以下代码来访问图片的：

< img src = “ / images /testimage.png” />

现在应该修改为以下访问图片的方式：

< img src = “http://static.test.com/images/testimage.png” />

现在如果向服务器请求testimage.png这个静态文件时，nginx就会使用http://static.test.com来提供。