摘要：加快页面打开速度降低服务器压力减少网络损耗浏览器缓存有标签控制一般不用，所以本文不介绍与头信息控制两种。是服务器端在响应请求时用来规定资源是否需要被浏览器缓存以及缓存的有效时间等。
浏览器缓存究竟有什么作用呢？在这里我将浏览器缓存的作用简单地归结为以下几点。
加快页面打开速度
降低服务器压力
减少网络损耗
浏览器缓存有 HTML Meta 标签控制（一般不用，所以本文不介绍）与 HTTP 头信息控制两种。
缓存标识字段便是 Expires 和 Cache-Control。
Expires 是服务器端在响应请求时用来规定资源的失效时间。
Cache-Control 是服务器端在响应请求时用来规定资源是否需要被浏览器缓存以及缓存的有效时间等。
Expires 是 HTTP 1.0 的字段，而 Cache-Control 是 HTTP 1.1 的字段，当 Expires 与 Cache-Control 同时存在时，Cache-Control 的优先级要高于 Expires。
在浏览器缓存中，还保存了其它关于资源副本的描述字段，这些字段都是服务器返回信息头带过来的，如 Last-Modified 和 ETag。
Last-Modified 是服务器端在响应请求时用来说明资源的最后修改时间。与之对应的是 If-Modified-Since 字段。在服务器再验证过程中，浏览器发送的 HTTP 请求的请求头中会带上 If-Modified-Since 字段，值为该资源 Last-Modified 属性的值。
当服务器端接收到带有 If-Modified-Since 属性的请求时，则会将 If-Modified-Since 属性的值与被请求资源的最后修改时间做对比。如果相同，说明资源没有新的修改，则响应 HTTP 304，浏览器会继续使用原先保存的该资源的副本；如果最后修改时间比较新，则说明资源被修改过，则响应 HTTP 200，并且返回最新的资源。
ETag 是服务器端在响应请求时用来说明资源在服务器端的唯一标识。与之对应的是 If-None-Match 字段。在服务器再验证过程中，浏览器发送的 HTTP 请求的请求头中会带上 If-Modified-Since 字段，值为该资源 Etag 属性的值。
当服务器端接收到带有 If-None-Match 属性的请求时，则会将 If-None-Match 属性的值与被请求资源的唯一标识做对比。如果相同，说明资源没有新的修改，则响应 HTTP 304，浏览器会继续使用原先保存的该资源的副本；如果不同，则说明资源被修改过，则响应 HTTP 200，并且返回最新的资源。
那么当 Last-Modified / If-Modified-Since 和 Etag / If-None-Match 同时存在是什么情况呢？
事实上，当两者同时存在时，Etag / If-None-Match 的优先级要高于 Last-Modified / If-Modified-Since
最后，虽然说浏览器缓存对用户体验有极大的好处，但是作为开发者，我们在开发的时候则需要禁止这「讨厌」浏览器缓存，我的方法是打开浏览器的开发者工具，在 Network 中有个 Disable cache ，钩上就可以了，钩上后浏览器会忽略掉文档过期验证和服务器再验证的过程，直接向服务器请求最新的资源。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100065.html
摘要：我在工程实践中直接使用类作为对应实体类的。因此我的结论是，此库并不适用于我的工程实践。工程实践中对其应用方式的考虑在的官方教程中建议针对每请求创建新的实例，查询请求结束则实例们的生命周期结束。 因为自己写过基于react的前端应用，因此一看到GraphQL就被深深吸引，真是直击痛点啊！服务端开发一直是基于java, Spring的，因此开始研究如何在现有工程框架下加入graphql的支...
摘要：在一个成熟的系统中，能够运用到缓存的地方其实并不是一处。那么在以终端用户为起点，系统所用的数据库为终点的这条道路上可以作为缓存设立点的位置大致有以下这些。缓存也有一系列的副作用需要考虑。 如果这是第二次看到我的文章，欢迎文末扫码订阅我个人的公众号（跨界架构师）哟~ 本文长度为3578字，建议阅读10分钟。坚持原创，每一篇都是用心之作～ 此前的「伸缩性」章节结束了，此文是「高性能」章...
摘要：第一阶段基础阶段基础程序员重点把搞熟练核心是安装配置基本操作目标能够完成基本的系统安装，简单配置维护能够做基本的简单系统的开发能够在中型系统中支持某个功能模块的开发。本项不做重点学习，除非对前端有兴趣。 第一阶段：基础阶段（基础PHP程序员） 重点：把LNMP搞熟练（核心是安装配置基本操作） 目标：能够完成基本的LNMP系统安装，简单配置维护；能够做基本的简单系统的PHP开发；能够在P...
摘要：如果没有学习过计算机科学的程序员，当我们在处理一些问题时，比较熟悉的数据结构就是数组，数组无疑是一个很好的选择。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常见 CSS 布局方式详见： 一些常见的 CSS 布局方式梳理，涉及 Flex 布局、Grid 布局、圣杯布局、双飞翼布局等。http://cherryb...
阅读 1179·2021-09-03 10:44
阅读 555·2019-08-30 13:13
阅读 2783·2019-08-30 13:11
阅读 1918·2019-08-30 12:59
阅读 1011·2019-08-29 15:32
阅读 1567·2019-08-29 15:25
阅读 951·2019-08-29 12:24
阅读 1255·2019-08-27 10:58
