目錄
準(zhǔn)備
tree ~/docker/nginx-cache
/Users/kevin/docker/nginx-cache
├── conf
│ └── nginx.conf
└── html
├── index.html
└── index.js
2 directories, 3 files
- nginx.conf
cat ~/docker/nginx-cache/conf/nginx.conf
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
# server {
# listen 80;
# server_name console.zhgcloud.com;
# location / {
# root /usr/share/nginx/html;
# try_files /index.html $uri;
# }
# }
# server {
# listen 80;
# server_name a.zhgcloud.com;
# location ~* \.js$ {
# root /usr/share/nginx/html;
# add_header Cache-Control "max-age=20";
# add_header Cache-Control "max-age=31536000";
# }
# }
}
以上nginx.conf與nginx1.10.3默認(rèn)配置相同
- index.html
cat ~/docker/nginx-cache/html/index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<script src="http://a.zhgcloud.com/index.js"></script>
</head>
<body>
<h1>Welcome to nginx!</h1>
</body>
</html>
- index.js
cat ~/docker/nginx-cache/html/index.js
console.log('from index.js');
上述文件和代碼 在這里可以找到
服務(wù)
- nginx
docker pull nginx:1.10.3 // 最近的Ubuntu LTS 1604官方源的nginx版本就是1.10.3
docker run -d --name nginx-cache -p 80:80 -v ~/docker/nginx-cache/conf/nginx.conf:/etc/nginx/nginx.conf -v ~/docker/nginx-cache/html:/usr/share/nginx/html/ nginx:1.10.3
curl localhost
docker詳細(xì)介紹 參考Docker入門
- nginx.conf
vim ~/docker/nginx-cache/conf/nginx.conf
{
# 省略未改動(dòng)部分
server {
listen 80;
server_name console.zhgcloud.com;
location / {
root /usr/share/nginx/html;
try_files /index.html $uri;
}
}
server {
listen 80;
server_name a.zhgcloud.com;
location ~* \.js$ {
root /usr/share/nginx/html;
# add_header Cache-Control "max-age=20";
# add_header Cache-Control "max-age=31536000";
}
}
}
docker restart nginx-cache
- hosts
sudo vim /etc/hosts
127.0.0.1 console.zhgcloud.com
127.0.0.1 a.zhgcloud.com
瀏覽器緩存
- 首次訪問(wèn)http://console.zhgcloud.com
cache-01.png
- 再次訪問(wèn)http://console.zhgcloud.com
cache-02.png
關(guān)于瀏覽器緩存時(shí)長(zhǎng) 可以參考How long does Google Chrome cache a resource if expires and/or no-cache headers are not set? / Why is this response being cached?
協(xié)商緩存
- (約5分鐘后) 再次訪問(wèn)http://console.zhgcloud.com
cache-03.png
cache-04.png
協(xié)商緩存基于以下兩個(gè)方面
Response Header: ETag
Request Header: If-None-Match
關(guān)于304 Not Modified更多介紹 可以參考304 Not Modified
- 更新Etag
touch ~/docker/nginx-cache/html/index.js
- (約5分鐘后) 再次訪問(wèn)http://console.zhgcloud.com
cache-05.png
強(qiáng)制緩存
- nginx.conf
vim ~/docker/nginx-cache/conf/nginx.conf
{
# 省略未改動(dòng)部分
server {
listen 80;
server_name console.zhgcloud.com;
location / {
root /usr/share/nginx/html;
try_files /index.html $uri;
}
}
server {
listen 80;
server_name a.zhgcloud.com;
location ~* \.js$ {
root /usr/share/nginx/html;
add_header Cache-Control "max-age=20";
# add_header Cache-Control "max-age=31536000";
}
}
}
docker restart nginx-cache
- (強(qiáng)制刷新) 再次訪問(wèn)http://console.zhgcloud.com
cache-06.png
- (立即) 再次訪問(wèn)http://console.zhgcloud.com
cache-07.png
- (強(qiáng)制刷新20s后) 再次訪問(wèn)http://console.zhgcloud.com
cache-08.png
自己動(dòng)手: 1: 修改Cache-Control驗(yàn)證瀏覽器緩存周期是否會(huì)隨之更新? 2: Cache-Control緩存周期內(nèi)更新Etag是否會(huì)影響瀏覽器請(qǐng)求?
小結(jié)
| 原理 | HTTP請(qǐng)求 | |
|---|---|---|
| 瀏覽器緩存 | 本地緩存 | 不發(fā)送 & from local cache |
| 協(xié)商緩存 | ETag/If-None-Match & Last-Modified/If-Modified-Since | 發(fā)送 & 返回304 |
| 強(qiáng)制緩存 | Cache-Control & Expires | 不發(fā)送 & from local cache |
綜上所述 完整的前端緩存方案如下
開啟Etag: nginx默認(rèn)開啟
設(shè)定Cache-Control: max-age=31536000 即1年
資源Hash: 詳細(xì)參考web優(yōu)化 之 hash & web優(yōu)化 之 增量更新
參考
更多文章, 請(qǐng)支持我的個(gè)人博客
