关键词：
最近我在做前端面试题总结系列，感兴趣的朋友可以添加关注，欢迎指正、交流。
争取每个知识点能够多总结一些，至少要做到在面试时，针对每个知识点都可以侃起来，不至于哑火。
前言
缓存是应用程序中很重要的一个概念，在有大量数据交换的应用程序中，我们会采取一些方式将那些实时性要求不高的数据生成副本并存储在某个相对来说可快速到达、访问、获取的仓库，这样在需要这些数据的时候我们直接从这个仓库中获取数据。
缓存的目的主要有两点：
- 提升数据交换的性能（速度）
- 提高用户体验
- 减少网络传输
- 缓解服务器或数据库的压力
HTTP 缓存作为 WEB 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知识技能。
概念
HTTP 缓存指的是: 当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。
常见的 HTTP 缓存只能缓存 GET 请求响应的资源，对于其他类型的响应则无能为力，所以后续说的请求缓存都是指 GET 请求。
HTTP 根据是否要向服务器发送请求将缓存规则分为了两类：
- 强缓存
- 协商缓存
HTTP 缓存都是从第二次请求开始的。
第一次请求资源时，服务器返回资源，并在响应头中回传资源的缓存参数；第二次请求时，浏览器判断这些请求参数，命中强缓存就直接200，否则就把请求参数加到请求头中传给服务器，看是否命中协商缓存，命中则返回 304，否则服务器会返回新的资源。
缓存规则
当用户开始访问一个网站时，浏览器会从目标服务器获取一些资源用以构建最终的 WEB 页面，比如 css、js、html 等静态文件。
假设我们不采取任何措施，则用户每次访问这个网站都要发起一系列 HTTP 请求，试想，如果这个网站的 pv 达到上百万甚至上千万，会对网站的后台服务器造成多大的压力。
为了尽可能提升网站的性能，HTTP 协议给出了一个优化方案，其大体规则如下图所示：
- 当用户第一次请求一个资源时的时序图，浏览器会先询问是否有命中缓存
- 没有命中的缓存则浏览器再从服务器获取资源并将资源放进缓存仓库中，下次则可以从缓存中拿资源了。
为方便理解，我们认为浏览器提供了缓存数据库，只要浏览器发现满足了某些缓存规则，就可以直接从缓存数据库中取出你需要的资源。
上述是一个简单过程，但是事实上的缓存策略还要更复杂一点。下面是一个较为完整的缓存流程：
总结
- HTTP 缓存是保存在浏览器上的
- HTTP 缓存是应用程序性能优化的重要手段
- HTTP 缓存针对的是那些时效性不是很强的资源，比如 JS、CSS、HTML 等
- HTTP 缓存分为强缓存和协商缓存
- HTTP 缓存的相关设置参数都是在头信息中携带的
以上就是有关 HTTP 缓存的概述内容，后面我会详细讲解强缓存和协商缓存的原理和应用。
~
~本文完，感谢阅读！
~
学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！
你来，怀揣期望，我有墨香相迎！ 你归，无论得失，唯以余韵相赠！
知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！
前端面试-http
状态码httpmethodsRestfulAPIRequestHeadersResponseHeaders缓存相关的浏览器的缓存机制catch-control（强缓存）协商缓存刷新操作对缓存的影响 查看详情
前端面试题总结(代码片段)
1.Http缓存策略，有什么区别，分别解决了什么问题强缓存：服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。协商缓存：让客户端与服... 查看详情
前端http缓存
...送请求，回答的不让面试官满意，索性抽点时间整理一下前端相关的缓存，希望下次回答的时候能够多讲点。前端缓存分为强缓存和协商缓存，强缓存就是在缓存未失效时，不在请求服务端，协商缓存就是去跟服务器比较是否需... 查看详情
前端知识总结--性能优化
前端性能优化方案大体分为网络传输优化和页面内容优化，网络方面1、减少http请求合并js文件合并css文件雪碧图的使用(csssprite)使用base64表示简单的图片2、减小资源体积gzip压缩js混淆css压缩图片压缩3、使用缓存DNS缓存CDN部署与... 查看详情
面试总被问到http缓存机制及原理？看完你就彻底明白了
...应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知识技能。但是对于很多前端同学来说，仅仅只是知道浏览器会对请求的静态文件进行缓存，但是为什么被缓存，缓存是怎样生效的，却并... 查看详情
2018面试总结第三轮
百信银行一面：前端负责人，前端小组9人+。HTML5新增的内容（标签和JS部分）离线存储CSS3新增的单位和内容CSS实现hoverA元素修改B元素的宽度CSS定位元素绝对水平垂直居中CSS选择器权重。10个Class权重大于单个IDES6新增的内容。ES6... 查看详情
前端八股文浏览器系列：浏览器渲染前端路由前端缓存（http缓存）缓存存储（http缓存存储本地存储）(代码片段)
文章目录渲染步骤DOM树与render树回流与重绘前端路由hash模式history模式两种模式对比前端缓存HTTP缓存强缓存协商缓存一般哪些文件对应哪些缓存HTTP缓存总结缓存存储HTTP缓存存储本地存储参考本系列目录：【前端八股文】目... 查看详情
前端性能的优化总结
前端性能优化可以分为两大类分别是页面级别优化包含了http请求数以及内联脚本位置优化，代码级别的优化包含DOM操作优化，CSS选择符优化以及图片优化等前端里面包含的内容是丰富的，它包括HTML，CSS以及JS和图片等各种各样... 查看详情
前端面试八股文_http1.0http1.1和http2.0的区别
本系列文章不谈风月，只谈干货，是实实在在的前端面试八股文，希望帮助大家拿到理想的offer。目录一、为什么要了解二、HTTP网络请求过程三、HTTP1.0vsHTTP1.1四、HTTP1.1vsHTTP2.0五、总结一、为什么要了解了解不同版本H... 查看详情
牛客网面试题总结（试券）(代码片段)
【2021】小米秋招前端方向第二场笔试1、使用浏览器访问http://miui.com/时，以下哪些过程发生在浏览器端？构建HTTP请求✔解析HTTP请求发送HTTP响应渲染页面✔浏览器端构建HTTP请求，并发送->服务器端接收到HTTP请求ÿ... 查看详情
前端总结·基础篇·css
前端总结·基础篇·CSS1常用重置+重置插件（Normalize.css,IE8+）*box-sizing:border-box; /*IE8+*/body margin:0; /* 去除边距*/ul margin:0;padding-left:0; /*&nbs 查看详情
node实战前端缓存总结(代码片段)
总结1、浏览器第一次发起一个http/https请求，读取服务器的资源2、服务端设置响应头（cache-control、Expires、last-modified、Etag）给浏览器2.1.cache-control、Expires属于强缓存，last-modified、Etag属于对比缓存（协商缓存）3、浏览器不关闭ta... 查看详情
前端技能树，面试复习第32天——计算机网络：http状态码详解
⭐️本文首发自前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、答疑解惑、面试辅导以及职业发展。。首先，我们先对HTTP状态码的类别进行一个总结：类别... 查看详情
2018年前端面试总结(代码片段)
2018年前端面试总结再有两个月，2018就快过完了，因而有必要在年末对2018年的前端学习做一个总结，本文主要从前端面试中的一些基础知识来对前端进行相关的总结。本文根据网络面试题进行总结。基础知识本部分主要从以下几... 查看详情
缓存有关http缓存的总结(代码片段)
HTTP缓存缓存的目的主要作用是可以加快资源获取速度，提升用户体验，减少网络传输，缓解服务端的压力。强缓存不需要发送请求到服务端，直接读取浏览器本地缓存，显示的HTTP状态码是200，强缓存又分为DiskCache(存放在硬盘中... 查看详情
http总结
HTTP复习HTTP概念HTTP特点HTTP请求报文&HTTP相应报文头部字段状态码请求方法POST与GET的区别HTTP缓存技术1、强制缓存2、协商缓存（条件GET）HTTP/1.1特性1、优点2、缺点性能HTTP与HTTPS1、HTTP与HTTPS区别2、HTTPS解决了HTTP的哪些问... 查看详情
前端学习笔记--http缓存
原文地址：https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn缓存并重用之前获取的资源的能力是性能优化的一个关键方面。每个浏览器都自带了HTTP缓存实现功能，只需要确保每个服务器响应都... 查看详情
一名自由程序员：我所整理和收集的前端面试题
经典面试题合集（绝大多数都是超高频面试题）从浏览器地址栏输入url到显示页面的步骤（这是详细版本）在浏览器地址栏输入URL浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤如果资... 查看详情