天天看點

YSLOW性能測試前端調優23大規則(19)使用一些無cookie的域

YSLOW性能測試前端調優23大規則(19)使用一些無cookie的域

在之前章節中我們介紹了如何通過減少cookie的大小來提升性能,cookie雖然有很多的優勢,但并不是說cookie是萬能的。

當我們浏覽器向伺服器發送一些靜态檔案時,如圖檔、CSS樣式等,在發送請求的同時會将cookie也同時發送到伺服器,如圖所示。

YSLOW性能測試前端調優23大規則(19)使用一些無cookie的域

上圖中發送的cookie是和圖檔的請求一同發送到我們網站域上的,因為這裡并沒有使用其它的子域來處理cookie的内容,在cookie的内容中可以看到。

但其實此時伺服器并不會對cookie做任何處理動作。這樣使用HTTP的響應時間變的更長,同時還會浪費網站的帶寬,是以我們建議使用cookie-free domains的方法來優化該性能。

是以我們希望發送靜态檔案時,不希望同時發送cookie,一些大型網站都不會在浏覽器向伺服器發送靜态檔案的同時發送cookie檔案或者由其它子域來完成,如圖13-21是Yahoo網站發送靜态圖檔的情況,并沒有帶cookie

YSLOW性能測試前端調優23大規則(19)使用一些無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來提供。

繼續閱讀