浏览器缓存问题

这篇文章主要介绍了浏览器缓存相关问题以及解决办法，希望对大家的学习或者工作具有一定的参考学习价值

浏览器缓存是前端优化的一个重要问题，缓存可以带来很多好处：

    （1）减少冗余的数据传输，节省带宽；

    （2）减轻服务器的请求负担，有缓存就可以少向服务器发送请求，尤其是对于一些访问量大的网站这点还是很重要的；

    （3）资源从缓存中读取，无需向服务器发送请求再等待返回，加快了客户端的访问速度。

    但是缓存同样给前端带来了一个很严重的问题，就是上面所说的项目更新的问题。如果项目更新了，但是用户访问时浏览器读取的是缓存资源，那么用户就获取不到最新的页面，影响用户使用。

浏览器的三级缓存原理

    1、先查找内存，如果内存中存在，从内存中加载；

    2、如果内存中未查找到，选择硬盘获取，如果硬盘中有，从硬盘中加载；

    3、如果硬盘中未查找到，那就进行网络请求，加载到的资源缓存到硬盘和内存；

问题产生原因

       如果在用户之前已经访问过系统，那么浏览器中会缓存该系统的CSS、JS，这些CSS、JS缓存未过期之前，浏览器只会从缓存中读取CSS和JS，如果在服务器上修改了css和js，那么这些修改在用户的浏览器中是不会有变化的。

解决办法

      1、前后端分离项目：

webpack进行相关资源打包时，css和js名字都加了哈希值，所以改动后打包生成的js和css是唯一的，页面请求的是新资源，不会有缓存问题，但是入口文件index.html会因为缓存造成更新问题，如果我们更新了，但是浏览器使用的是缓存，就会出现问题。所以需要对入口文件设置不使用强制缓存，需要每次去服务器验证文件是否修改，即使用协商缓存。

 使用nginx反向代理，在nginx.conf文件的对应server中设置，目前我自己实践出的可行的一种写法是：   

 server {
        listen       80;
        server_name  域名;
        root   文件目录;
        index  index.html;

        location / {  // 不加这一句，会出现nginx欢迎页面，无法正确加载资源
          try_files $uri /index.html;
        }

        location ~ .*\.(html)$ {  // 对html文件限制缓存
          add_header Cache-Control no-store;  // 不缓存
         // 或者用add_header Cache-Control no-cache;替代上面那一句，协商缓存
          add_header Pragma no-cache;
        }

}

（1）Cache-Control: no-cache和Cache-Control: no-store区别

    看字面意思容易误解，no-cache就是不缓存，但是no-cache并不是不缓存，而是使用协商缓存，所以并不能禁止缓存，no-store才是真正的禁止缓存。从节省带宽角度讲，使用no-cache更优一点，文件未发生改变时只传输很小的报文大小，只有在文件改变时才会传输整个文件大小。而不是no-store不管什么情况都传输整个文件大小。

（2）Pragma: no-cache：和Cache-Control: no-cache区别

    Pragma: no-cache跟Cache-Control: no-cache相同，Pragma: no-cache兼容http 1.0 ，Cache-Control: no-cache是http 1.1提供的。因此，Pragma: no-cache可以应用到http 1.0 和http 1.1,而Cache-Control: no-cache只能应用于http 1.1.

2、非前后端分离项目

在css、js资源文件后面添加版本号，让浏览器把这个文件当做新的文件重新向服务器获取资源，如使用Nginx作为缓存服务器时可用上面配置进行缓存设置；如不在Nginx配置文件上进行修改，也在在HTML文件里面进行配置。

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />