摘要：浏览器缓存问题简单来说，浏览器缓存就是把一个已经请求过的资源如页面，图片，，数据等拷贝一份副本储存在浏览器中。只有当网站明确标识资源已经更新，浏览器才会再次下载网页。
浏览器缓存问题：
简单来说，浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新，浏览器才会再次下载网页。
为什么使用缓存：
（1）减少网络带宽消耗
（2）降低服务器压力
（3）减少网络延迟，加快页面打开速度
浏览器端的缓存规则：
新鲜度（过期机制）：也就是缓存副本有效期。
校验值（验证机制）：资源的实体标签Etag（EntityTag）
举个栗子
解决方法：
（1）使用HTMLMeta标签
Web开发者可以在HTML页面的
节点中加入标签，代码如下
事实上这种禁用缓存的形式用处很有限：
a.仅有IE才能识别这段meta标签含义，其它主流浏览器仅识别“Cache-Control:no-store”的meta标签。
b.在IE中识别到该meta标签含义，并不一定会在请求字段加上Pragma，但的确会让当前页面每次都发新请求（仅限页面，页面上的资源则不受影响）。
（2）使用缓存有关的HTTP消息报头
在HTTP请求和响应的消息报头中，常见的与缓存有关的消息报头有：
|
规则 |
消息包头 |
值/示例 |
类型 |
作用 |
|
新鲜度 |
Pragma |
no-cache |
响应 |
告诉浏览器忽略资源的缓存副本，每次访问都需要去服务器拉取【http1.0中存在的字段，在http1.1已被抛弃，使用Cache-Control替代，但为了做http协议的向下兼容，很多网站依旧会带上这个字段】 |
|
Expires |
Mon,15Aug201603:56:47GMT |
响应 |
启用缓存和定义缓存时间。告诉浏览器资源缓存过期时间，如果还没过该时间点则不发请求【http1.0中存在的字段，该字段所定义的缓存时间是相对服务器上的时间而言的，如果客户端上的时间跟服务器上的时间不一致（特别是用户修改了自己电脑的系统时间），那缓存时间可能就没啥意义了。在HTTP1.1版开始，使用Cache-Control:max-age=秒替代】 |
|
|
Cache-Control |
no-cache |
响应 |
告诉浏览器忽略资源的缓存副本，强制每次请求直接发送给服务器，拉取资源，但不是“不缓存” |
|
|
no-store |
响应 |
强制缓存在任何情况下都不要保留任何副本 |
||
|
max-age=[秒] |
响应 |
指明缓存副本的有效时长，从请求时间开始到过期时间之间的秒数 |
||
|
public |
响应 |
任何路径的缓存者（本地缓存、代理服务器），可以无条件的缓存改资源 |
||
|
private |
响应 |
只针对单个用户或者实体（不同用户、窗口）缓存资源 |
||
|
Last-Modified |
Mon,15Aug201603:56:47GMT |
响应 |
告诉浏览器这个资源最后的修改时间。服务器将资源传递给客户端时，会将资源最后更改的时间以“Last-Modified:GMT”的形式加在实体首部上一起返回给客户端【只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间】 |
|
|
If-Modified-Since |
Mon,15Aug201603:56:47GMT |
请求 |
其值为上次响应头的Last-Modified值，再次向web服务器请求时带上头If-Modified-Since。web服务器收到请求后发现有头If-Modified-Since则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），包括更新Last-Modified的值，HTTP200；若最后修改时间较旧，说明资源无新修改，则响应HTTP304(无需包体，节省浏览)，告知浏览器继续使用所保存的cache |
|
|
校验值 |
ETag |
"fd56273325a2114818df4f29a628226d" |
响应 |
告诉浏览器当前资源在服务器的唯一标识符（生成规则又服务器决定） |
|
If-None-Match |
"fd56273325a2114818df4f29a628226d" |
请求 |
当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match（Etag的值）。web服务器收到请求后发现有头If-None-Match则与被请求资源的相应校验串进行比对，决定返回200或304 |
实际工作中我们完全可以时用上面这些参数的设置来组织/控制、更好的利用缓存来为我们服务。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/2278.html
答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...
答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...
答案自己谷歌或百度找。 一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目，我一直在收集题目长期一个一个的记录下来的，可能会有重复，但基本前端的面试大纲和需要掌握的知识都在其中了，面试题仅做学习参考，学习者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 二、532道前端真实大厂面试题 express和koa的对比，两者中间件的原理，koa捕获异常多种情...
摘要：以下为大家整理了阿里巴巴史上最全的面试题，涉及大量面试知识点和相关试题。的内存结构，和比例。多线程多线程的几种实现方式，什么是线程安全。点击这里有一套答案版的多线程试题。线上系统突然变得异常缓慢，你如何查找问题。 以下为大家整理了阿里巴巴史上最全的 Java 面试题，涉及大量 Java 面试知识点和相关试题。 JAVA基础 JAVA中的几种基本数据类型是什么，各自占用多少字节。 S...
摘要：前言腾讯一面，相比阿里一面来说，腾讯一面先给打电话预定时间，这也给了我们这些面试者去准备的时间。其实闭包也就是指有权访问另一个函数作用域的函数而已。常用的创建闭包的方法就是在函数内部创建另一个函数。 前言 腾讯一面，相比阿里一面来说，腾讯一面先给打电话预定时间，这也给了我们这些面试者去准备的时间。但是也正是因为这种确定性，也有在等待电话的时候的心情的忐忑。 背景 我是一名大三学生，大一...
阅读 2401·2021-11-15 11:36
阅读 1133·2019-08-30 15:56
阅读 2197·2019-08-30 15:53
阅读 959·2019-08-30 15:44
阅读 620·2019-08-30 14:13
阅读 965·2019-08-30 10:58
阅读 428·2019-08-29 15:35
阅读 1260·2019-08-29 13:58
