关于缓存1

1.想写关于缓存的起因

　　最近在做de一个企业的官网，之前做手机端网页，p2p网站时都出现过修改页面，手机电脑刷新没有效果。

 

2.什么是浏览器缓存

　　浏览器缓存是把一个已经请求过的资源拷贝一份副本在储存在浏览器中。当同一个url再次发生请求的时候，缓存机制决定是使用副本还是向服务器发送请求；浏览器会缓存访问过的网站，再次访问这个url时，如果网页没有更新则不会向服务器发送请求；直接使用本地缓存的资源；当网站标明资源已更新，才会再次下载网页；

 

3.怎样判断请求是从服务器获取还是使用缓存

　　打开F12开发者工具network，再次刷新页面看网络请求，Size一列对应的是from cache则是从缓存中读取的。

 

4.为什么要使用缓存

　　1.减少网络带宽消耗，当使用缓存时，网络流量很小，降低运营成本；(带宽需要进一步理解)

　　  2.降低服务器压力，使用本地缓存，减少网络请求从而减轻服务器压力。

　　  3.减少网络延迟，使用缓存加快页面打开速度，优化体验；

 

5.浏览器缓存机制

　　1.使用html的meta标签 

　　　　<meta http-equiv=“  Pragma” content="no-cache"></meta>

　　　　作用是告诉浏览器不缓存，每次访问都需要去服务器拉取。

　　　　这种缓存的缺点： 仅有IE才能识别这段meta标签含义，其它主流浏览器仅识别“Cache-Control: no-store”的meta标签。在IE中识别到该meta标签含义，并不一定会在请求字段加上Pragma，但的确会让当前页面每次都发新请求。

　　2.使用缓存有关的HTTP消息报头

　　　　在HTTP请求和响应的消息报头中，常见的与缓存有关的消息报头有：

　　　　A：

　　　　Expires： Mon, 15 Aug 2016 03:56:47 GMT  启用缓存和定义缓存时间。告诉浏览器资源缓存过期时间，如果还没过该时间点则不发请求;

　　　Cache-Control：no-cache  告诉浏览器忽略资源的缓存副本，强制每次请求直接发送给服务器，拉取资源，但不是“不缓存”；

　　　   Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。

　　　　B：

　　　　Last-Modified:告诉浏览器这个资源最后的修改时间。服务器将资源传递给客户端时，会将资源最后更改的时间以“Last-Modified: GMT”的形式加在实体首部上一起返回给客户端;

　　　　ETag:告诉浏览器当前资源在服务器的唯一标识符（生成规则由服务器决定）；

　　　　配置Last-Modified/ETag的情况下，浏览器再次访问统一URI的资源，还是会发送请求到服务器询问文件是否已经修改，如果没有，服务器会只发送一个304回给浏览器，告诉浏览器直接从自己本地的缓存取数据；如果修改过那就整个数据重新发给浏览器；

　　　　比较：

　　　　Cache-Control/Expires则不同，如果检测到本地的缓存还是有效的时间范围内，浏览器直接使用本地副本，不会发送任何请求。两者一起使用时，Cache-Control/Expires的优先级要高于Last-Modified/ETag。即当本地副本根据Cache-Control/Expires发现还              在有效期内时，则不会再次发送请求去服务器询问修改时间（Last-Modified）或实体标识（Etag）了。

 

　　6.http网络请求过程

　　第一次请求：

　　

　　再次请求：

　　

 

　7.解决页面读取缓存的办法：

　　时间戳，版本号

 

　8.用户行为对缓存的影响

　　　　F5：刷新页面，有可能还是从缓存中获取的数据；

　　　　crtl+F5：跳过缓存，从服务器重新获取数据；

 

 

　　　　

 　参考资料：

　　https://www.cnblogs.com/wangtao_20/p/4589898.html

　　http://www.cnblogs.com/520yang/articles/4807408.html

　　https://mp.weixin.qq.com/s/yf0pWRFM7v9Ru3D9_JhGPQ

　　https://www.jianshu.com/p/9639b38ea010

 

　　

转载于:https://www.cnblogs.com/HONGYE1994/p/9176428.html