web优化 之 缓存

目录

• 准备

• 服务

• 浏览器缓存

• 协商缓存

• 强制缓存

• 小结

准备

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默认配置相同

• index.html

cat ~/docker/nginx-cache/html/index.html

    
    



    
Welcome to nginx!

• index.js

cat ~/docker/nginx-cache/html/index.js

console.log('from index.js');

上述文件和代码 在这里可以找到

服务

• 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详细介绍 参考Docker入门

• nginx.conf

vim ~/docker/nginx-cache/conf/nginx.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";
        }
    }
}

docker restart nginx-cache

• hosts

sudo vim /etc/hosts

127.0.0.1   console.zhgcloud.com
127.0.0.1   a.zhgcloud.com

浏览器缓存

• 首次访问http://console.zhgcloud.com

cache-01.png

• 再次访问http://console.zhgcloud.com

cache-02.png

关于浏览器缓存时长 可以参考How long does Google Chrome cache a resource if expires and/or no-cache headers are not set? / Why is this response being cached?

协商缓存

• (约5分钟后) 再次访问http://console.zhgcloud.com

cache-03.png

cache-04.png

协商缓存基于以下两个方面

Response Header: ETag

Request Header: If-None-Match

关于304 Not Modified更多介绍 可以参考304 Not Modified

• 更新Etag

touch ~/docker/nginx-cache/html/index.js

• (约5分钟后) 再次访问http://console.zhgcloud.com

cache-05.png

强制缓存

• nginx.conf

vim ~/docker/nginx-cache/conf/nginx.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";
        }
    }
}

docker restart nginx-cache

• (强制刷新) 再次访问http://console.zhgcloud.com

cache-06.png

• (立即) 再次访问http://console.zhgcloud.com

cache-07.png

• (强制刷新20s后) 再次访问http://console.zhgcloud.com

cache-08.png

自己动手: 1: 修改Cache-Control验证浏览器缓存周期是否会随之更新? 2: Cache-Control缓存周期内更新Etag是否会影响浏览器请求?

小结

	原理	HTTP请求
浏览器缓存	本地缓存	不发送 & from local cache
协商缓存	ETag/If-None-Match & Last-Modified/If-Modified-Since	发送 & 返回304
强制缓存	Cache-Control & Expires	不发送 & from local cache

综上所述 完整的前端缓存方案如下

• 开启Etag: nginx默认开启

• 设定Cache-Control: max-age=31536000 即1年

• 资源Hash: 详细参考web优化 之 hash & web优化 之 增量更新

参考

• HTTP 缓存

• How long does Google Chrome cache a resource if expires and/or no-cache headers are not set?

• 大公司里怎样开发和部署前端代码？

• 掌握 HTTP 缓存——从请求到响应过程的一切（上）

• 你应该知道的浏览器缓存知识

• 浏览器的协商缓存与强缓存

更多文章, 请支持我的个人博客