【前端 · 面试】HTTP 总结（七）—

最近我在做前端面试题总结系列，感兴趣的朋友可以添加关注，欢迎指正、交流。

争取每个知识点能够多总结一些，至少要做到在面试时，针对每个知识点都可以侃起来，不至于哑火。

前言

缓存是应用程序中很重要的一个概念，在有大量数据交换的应用程序中，我们会采取一些方式将那些实时性要求不高的数据生成副本并存储在某个相对来说可快速到达、访问、获取的仓库，这样在需要这些数据的时候我们直接从这个仓库中获取数据。

缓存的目的主要有两点：

提升数据交换的性能（速度）
提高用户体验
减少网络传输
缓解服务器或数据库的压力

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 总结（七）—— HTTP 缓存概述相关推荐

前端对所有文件请求添加header_【前端面试必问】浏览器缓存原理？送你满分答案...
(本文适合所1-3年的前端阅读) 原文链接: http://blog.poetries.top/2019/01/02/browser-cache/ 一.浏览器缓存基本认识分为强缓存和协商缓存浏览器 ...
前端面试查漏补缺--(三) 跨域及常见解决办法
前言本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...
2020年前端面试复习必读精选文章【赠复习导图】
前言之前写过一篇一年半经验如何准备阿里巴巴前端面试,给大家分享了一个面试复习导图,有很多朋友说希望能够针对每个 case 提供一个参考答案. 写答案就算了,一是精力有限,二是我觉得大家还是需要自己 ...
github大佬呕心沥血整理的2020年前端面试复习必读精选文章【赠复习导图】
2021年前端面试必读文章[超三百篇文章/赠复习导图] 转载.原文链接哈哈,之前是 2020 年必读文章,到了 2021 年了,感觉这些文章还都是经典,那就改个标题吧.[手动狗头] 前言之前写过一 ...
前端面试查漏补缺--(一) 防抖和节流
前言本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...
前端面试-综合问题版
一.基础 #1.1 HTML html5新标签有哪些 canvas.svg.webGL 你是如何理解 HTML语义化的,有什么好处前端需要注意哪些SEO? manifest.worker.socke ...
9月，水了几个大中厂前端面试的一些总结分享 | 掘金技术征文
写在前面工作吧,我觉得就像谈恋爱,不一定是找高富帅或者白富美,互相确认过眼神是对的人就可以~而面试的自信和对工资的要求,源于你过硬的基础和平时的思考.积累以及总结~ 8月底离职,其实是裸辞,当然大概 ...
web前端面试问答_Web服务面试问答
web前端面试问答在这篇文章中,我们涵盖了您需要熟悉的Web服务概念的几乎所有部分,以回答任何层级问题. 您还将在分类中找到最佳的Web服务面试问题和答案,因此只有在必要时才可以使用特定条款. 今天 ...
前端面试技巧和注意事项_前端面试百分之九十九过的技巧
2020最全的前端面试指南,一个多月 1.8w 字的面试经验积累,凭借它最终成功入职大厂-- 今年的金三银四刚好赶上疫情,很多大公司都停止招聘甚至裁员,想跳槽的小伙伴被打的措手不及. 需求减少要求肯定 ...
2018年中高级前端面试题目小结
2018年中高级前端面试题目小结前言关于前端面试,及面试题目,我之前有很多文章总结过,可以在右侧搜索面试,进行查找.其实面试中可以问的问题很多,最近几年,我也面试过很多工作2-4年的前端,我一般会 ...

【前端 · 面试】HTTP 总结（七）—— HTTP 缓存概述

前言

概念

缓存规则

总结

【前端 · 面试】HTTP 总结（七）—— HTTP 缓存概述相关推荐

最新文章

热门文章

【前端 · 面试 】HTTP 总结（七）—— HTTP 缓存概述

前言

概念

缓存规则

总结

【前端 · 面试 】HTTP 总结（七）—— HTTP 缓存概述相关推荐

最新文章

热门文章

【前端 · 面试】HTTP 总结（七）—— HTTP 缓存概述

【前端 · 面试】HTTP 总结（七）—— HTTP 缓存概述相关推荐