Nginx配置浏览器缓存

一. 浏览器从哪读取缓存

• memory cache

  当直接刷新页面的时候,页面资源会从内存中直接获取

• disk cache

  如果服务器指定了强缓存它会缓存到硬盘上,如果网页关掉再打开浏览器会从磁盘上去加载资源

二. 缓存的分类

• <-:表示服务器给浏览器发送的,->:表示浏览器给服务器发送的

• 强缓存,文件资源直接从缓存中获取

  • <- cache-control: max-age=600
    • cache-control是http1.1中的响应头,max-age=600是缓存600s的意思. 不设置的话默认缓存时间是4天.在这个时间段浏览器不会去服务器获取数据,直接从缓存中获取.
    • 对于JS,CSS等文件可以设置成强缓存
  • <- expires: Mon, 14 Sep 2020 09:02:20 GMT
    • expires是http1.0中的响应头,他没有max-age属性,功能没有cache-control强大.当cache-control和expires都设置了的时候,只会生效cache-control

• 协商缓存,访问服务器是否从浏览器缓存中获取

  • <- last-modified: Fri, 07 Aug 2020 02:35:59 GMT
    • 服务器告诉浏览器资源最后的修改时间,
  • -> if-modified-since: Fri, 07 Aug 2020 02:35:59 GMT
    • 当浏览器请求数据时会带上浏览器上次请求数据的修改时间,服务器会把这个时间和当前文件最后修改时间作对比,如果修改时间一致说明浏览器之前拿到的是最新文件,则返回304状态码告诉浏览器从缓存中读取.如果浏览器拿到的时间比服务器修改的时间要早那么说明浏览器目前缓存的不是最新文件,则把该文件发送给浏览器并返回200状态码. 但是有的时候文件修改时间变了但是内容没变,这样的话并不准确,所以有了etag属性.
  • <- etag: W/“5f2cbe0f-2382"
    • 当服务器返回响应的时候会告诉浏览器文件etag的值,etag类似一种hash值,它代表文件内容
  • -> if-none-match: W/“5f2cbe0f-2382”
    • 当浏览器去服务器请求资源的时候,会带上服务器上次返回的etag值.服务器根据这个etag值和当前资源的etag值进行对比.如果一致说明文件没有变动,返回304状态码,如果不一致说明有变动返回200状态码.
  • 默认nginx是开启etag和last-modified的

三. Nginx下配置文件的缓存方式

• 打开终端下载nginx配置文件

scp [email protected]:/etc/nginx/nginx.conf ./

• 打开下载好的配置文件,在http中添加gizp相关配置,加快传输速度

http {
  # 开启gzip
  gzip on;
  # 启用gzip压缩的最小文件；小于设置值的文件将不会被压缩
  gzip_min_length 1k;
  # gzip 压缩级别 1-10 
  gzip_comp_level 2;
  # 进行压缩的文件类型。
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  # 是否在http header中添加Vary: Accept-Encoding，建议开启
  gzip_vary on;
  # etag协商缓存 默认是开启的
  etag on;
}

• 在server中添加协商缓存和强缓存配置,解决缓存问题

server {
	# html设置成协商缓存或者不缓存
	location ~* \.(html)$ {
		# 关闭访问日志
	    access_log off;
	    # 添加响应头,no-cache:协商缓存,no-store:不缓存
	    add_header  Cache-Control  max-age=no-cache;
  	}
	
	# 特定文件设置强缓存
  location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
	    access_log off;
	    add_header    Cache-Control  max-age=360000; # 4天
  	}
}

• 上传修改好的nginx.conf到服务器

 scp nginx.conf [email protected]:/etc/nginx/nginx.conf

• 到服务器重启nginx服务器即可

nginx -s reload