认识浏览器缓存

Posted 2020-09-07 TechSnail

　　浏览器缓存，也就是客户端缓存,既是网页性能优化里面静态资源相关优化的一大利器，也是无数web开发人员在工作过程不可避免的一大问题。浏览器缓存分为：强缓存和协商缓存

（1）原理：

　　1.浏览器加载资源时，先根据这个资源的http header中的Cache-Control判断是否命中强缓存，如果命中，浏览器直接从缓存中读取资源，根本不会向服务器发送请求；

　　2.当强缓存没有命中的时候，浏览器则会发送一个请求到服务器，通过资源的http header中的 Last-Modified 和If-Modified-Since来判断资源是否命中协商缓存，如果命中，服务器将会将这个请求返回，但不会返回这个资源的数据，而是告诉客服端可以从缓存中加载这个资源；

　　3.如果资源也没有命中协商缓存的话，浏览器直接从服务器端加载资源数据

（2）共同点与区别：

　　1.共同点：如果命中，都从客户端缓存中加载这个资源，而不从服务器端加载；

　　2.区别： 强缓存不发请求到服务器，协商缓存发请求到服务器；

（3）强缓存原理

　　命中强缓存，chrome里的network里面 status是200，且size会显示为from disk/memory cache,Cache Control :max-age:315360000 单位秒，也就是10年

　　1.浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Cache-Control的header

　　2.浏览器接收到这个资源后，会把这个资源连同所有的resoponse Header缓存下来

　　3.浏览器再次请求这个资源时，会从缓存中寻找，找到后，根据它第一次请求时间和Cache Control设定的有效期，计算一个过期时间。再拿这个过期时间跟当前请求时间比较，如果当前请求时间在过期时间之前，就能命中缓存。否则，就不行。

（4）协商缓存原理

　　如果协商缓存命中，请求响应返回的http状态为304并且会显示一个Not Modified的字符串。协商缓存是利用的是【Last-Modified，If-Modified-Since】

　　1.浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Last-Modified的header，这个header表示这个资源在服务器上的最后修改时间；

　　2.浏览器再次跟服务器请求这个资源时，在request的header上加上If-Modified-Since的header，这个header的值就是上一次请求时返回的Last-Modified的值；

　　3.服务器再次收到资源请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的Last-Modified是否有变化，如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。

（5）清除客户端缓存的方法

　　1.当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；

　　2.当f5刷新网页时，跳过强缓存，但是会检查协商缓存；

　　3.如果用的是chrome，可以f12在network那里把缓存给禁掉 Disable cache

　　4. 给资源加上一个动态的参数，css/index.css?v=2017032901