系统相关
首页 > 系统相关> > (010)Nginx静态资源web服务_浏览器缓存原理与演示

(010)Nginx静态资源web服务_浏览器缓存原理与演示

作者:互联网

  1、浏览器缓存原理

  我们都知道浏览器是有缓存的,有了缓存,客户端不会每次都去请求服务端,这样能减轻服务器的压力,并且使浏览器的读取速度更快。浏览器缓存是基于HTTP协议定义的缓存机制(如:Expires,Cache-control等)实现的。浏览器会根据一定的规则校验缓存是否可用。浏览器访问服务端时会去临时文件夹中查找是否有临时文件,如果没有,会请求服务器。如果有的话就会就行缓存校验,浏览器通过3个参数校验缓存文件,下面具体说一下。

  1)Expires或Cache-control:HTTP协议1.0版本用Expires,1.1版本用Cache-control,Cache-control中有一个max-age,它定义了缓存周期,即缓存文件在多久以内生效,超期了则进行下一步校验。

  2)Last-Modified:协议中Last-Modified头信息校验,后面跟时间,缓存中的文件与服务器文件的最后修改时间进行比较。

  3)Etag:协议中Etag头信息校验,后面跟字符串,缓存中的文件与服务器文件的Etag参数进行比较。

  客户端先检查本地Cache-control是否过期,如果没有过期从缓存文件中读取,如果过期了,再校验则Etag或者Last-Modified。校验这两个参数会访问服务器,Last-Modified只能精确到秒,所以会优先校验Etag。

  2、演示

  首先说一点,原理上如上述,但是实际中大多数浏览器会有修改,比如每次请求的的max-age等于或者小于0,在有缓存的情况下,使浏览器每次都对比服务器,验证文件是否修改过,现实中这样做也是合理的。

  配置语法:

  Syntax:expires [modified] time;
                 expires epoch | max | off;(不常用)
  Default:expires off;
  Context:http,server,location,if in location

  新建测试文件/opt/app/code/time.html

<html>
<head>
    <meta charset="utf-8">
    <title>admin</title>
</head>
<body style="background-color:red;">
<h1>Hello!Word! 2017-07-16 11:46</h1>
</body>
</html>

  修改配置文件,指定首页路径

location ~ .*\.(html|htm)$ {
    root  /opt/app/code;
}

  访问:http://192.168.7.151/time.html

  

  

  刷新,状态为304,当校验Etag和Last-Modified时,发现内容没有改变则返回304,从缓存中读取。 

  

  

  这一次刷新request header里面有了max-age=0,第一次请求的时候,服务端并没有返回给缓存文件max-age=0的信息,这是浏览器自己加的,目的每一次都校验服务器。

  下面配置缓存。在上的配置中增加expires。

location ~ .*\.(html|htm)$ {
    expires 24h;
    root  /opt/app/code;
}

  

  校验配置文件,并重新启动nginx。清空浏览器缓存,重新访问:

  返回200,response返回了设置的24h,因为第一次请求没有缓存,所以Cache-control:no-cache。

  

  

  刷新一下:返回304,request header里面依然是浏览器默认的max-age=0。其实expires配置是不起作用的。

  

  

 

标签:control,web,缓存,浏览器,Cache,校验,010,Nginx,Etag
来源: https://www.cnblogs.com/javasl/p/12837819.html