摘要：缓存会根据进来的请求保存输出内容的副本当下一个请求来到的时候，如果是相同的，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。同时，搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率，也能有效降低服务器的压力。
论，如何定义一个前端工程师。前天看了篇文章，作者把前端攻城狮称作是所有攻城狮角色中最具有也最需要‘工匠精神’的攻城狮。从最直观的角度来讲就是视觉方面，不仅要百分百还原设计稿（静态以及动态交互），还要考虑代码是否工整、冗余、复用、性能等方面问题，而且说得更博大一些还要培养点产品和设计的思维（培养个P啊，这是开发和他们的鸿沟，纯属扯淡。）正儿八经的对于前端不只是会JavaScript就行了，要学的东西真是太多了，作为一名初生牛犊的我，还是相当有必要扩展下一个web开发要掌握的知识面，比如今天要总结的缓存机制。
Web缓存是指一个Web资源（如html页面，图片，js等）存在于Web服务器和客户端（浏览器）之间的副本。缓存会根据进来的请求保存输出内容的副本；当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新，浏览器才会再次下载网页。
减少网络带宽消耗
无论对于网站运营者或者用户，带宽都代表着金钱，过多的带宽消耗，只会便宜了网络运营商。当Web缓存副本被使用时，只会产生极小的网络流量，可以有效的降低运营成本。
降低服务器压力
给网络资源设定有效期之后，用户可以重复使用本地的缓存，减少对源服务器的请求，间接降低服务器的压力。同时，搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率，也能有效降低服务器的压力。
减少网络延迟，提升页面渲染速度
带宽对于个人网站运营者来说是十分重要，缓存的使用能够明显加快页面打开速度，达到更好的体验。
数据库数据缓存：为了提供查询数据库表的性能，一般会将查询后的数据放到内存中进行缓存，以便下次使用时直接从内存返回，提高响应效率
服务器端缓存：a.代理服务器缓存-浏览器端和源服务器之间的一个中间服务器，共享缓存，同一个副本会被重用多次，为大多用户提供服务；b. CDN缓存（Content Delivery Network, 顾名思义，内容分发网络），CDN和CDN缓存是两个概念，切勿混淆，本篇文章谈缓存。举个例子，如果你要更新CDN上的资源，然后你把资源直接放到了CDN替换上边的旧资源，文件名未修改（路经以及代码未改），这时就很有可能造成页面读取旧缓存的情况出现，而这时倘若出现在线上......[泪奔-.-!!]，so ! 切记替换CDN资源时加个时间戳或是设置好请求报头里的参数，避免飞来横锅。
浏览器缓存：这个就是常见在浏览器端的缓存，常用清除方法：控制台-Application-Clear storage-选中Cache-Clear site data，Ctrl+F5（强制刷新），鼠标按住页面刷新按钮不放或按住滑动，会出现刷新选项（截不了图sad）选项包括：正常重新加载 Ctrl + R || 硬性重新加载 Ctrl + shift + R || 清空缓存并硬性重新加载 ，不过我发现并不是所有的网站都可以，原因可能是部分站点设置的缓存不同（有待研究）。
web应用层缓存：这种缓存指的是代码层面上，通过代码逻辑和缓存策略实现对数据、页面、图片等资源的缓存。
本文要介绍的是浏览器缓存，其实就是指服务器和客户端（浏览器）之间的一个副本（static sources like html/css/js）。一个完整的网络请求大概是这样的；
第一次请求： 客户端发送请求 -> 本地无缓存 -> 向服务器发送请求 -> 返回静态资源 -> 呈现（并缓存到本地）
第二次请求：如下图一所示：
这里要先说下缓存中相关的消息报头参数，具体如图二（标红处重点理解 ）：
现在讲图一中发生的第二次请求，此次请求会读取本地的缓存副本，但首先读取的时候浏览器会判断缓存的过期时间（假如设置的话），倘若没有过期就会读取缓存。倘若过期就会和服务器校对ETag（Entity tag用于缓存验证）如果ETag非空，浏览器就会把ETag的值给If-None-Match进行对比，同时，也会对比Last-Modified和If-Modified-Since的值，如果相同则证明服务器没有修改内容，就会返回304 Not-Modified读取本地缓存，HTTP304状态码是指该本地缓存资源与服务端资源相比没有被修改过所以会直接读取本地缓存内容，反之重新向服务器发出请求并返回。此时Last-Modified和ETag的值都会被重置。
以上所述都是自己总结的一些知识，如有错误还请指正，感谢。
感谢以下前辈的解惑，向大佬看齐【敬礼！】
http://www.alloyteam.com/2012...
https://segmentfault.com/a/11...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91982.html
浏览器缓存机制学习总结 最近在做一个考试系统时，由于经常加载试卷或图片等等静态资源，抽空学习了一下缓存机制，在此记录 为什么要使用缓存 1、通过HTTP协议，在客户端和浏览器建立连接时需要消耗时间，而大的响应需要在客户端和服务器之间进行多次往返通信才能获得完整的响应，这拖延了浏览器可以使用和处理内容的时间。这就增加了访问服务器的数据和资源的成本，因此利用浏览器的缓存机制重用以前获取的数据就变成了性...
摘要：对于浏览器缓存，相信很多开发者对它真的是又爱又恨。那么浏览器缓存究竟是个什么样的神奇玩意呢什么是浏览器缓存简单来说，浏览器缓存就是把一个已经请求过的资源如页面，图片，，数据等拷贝一份副本储存在浏览器中。 对于浏览器缓存，相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验，而另一方面有时会因为读取了缓存而展示了错误的东西，而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟...
摘要：对于浏览器缓存，相信很多开发者对它真的是又爱又恨。那么浏览器缓存究竟是个什么样的神奇玩意呢什么是浏览器缓存简单来说，浏览器缓存就是把一个已经请求过的资源如页面，图片，，数据等拷贝一份副本储存在浏览器中。 对于浏览器缓存，相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验，而另一方面有时会因为读取了缓存而展示了错误的东西，而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟...
摘要：缓存缓存，也叫网关缓存反向代理缓存。浏览器先向网关发起请求，网关服务器后面对应着一台或多台负载均衡源服务器，会根据它们的负载请求，动态将请求转发到合适的源服务器上。虽然这种架构负载均衡源服务器之间的缓存没法共享，但却拥有更好的处扩展性。 一、前言 工作上遇到一个这样的需求，一个H5页面在APP端，如果勾选已读状态，则下次打开该链接，会跳过此页面。用到了HTML5 的本地存储 API ...
摘要：根据标准，到目前为止，一共有种缓存机制，有些是之前已有，有些是才新加入的。首次请求缓存有效期内请求缓存过期后请求一般浏览器会将缓存记录及缓存文件存在本地文件夹中。 腾讯 Bugly 特约作者：贺辉超 1. H5 缓存机制介绍 H5，即 HTML5，是新一代的 HTML 标准，加入很多新的特性。离线存储（也可称为缓存机制）是其中一个非常重要的特性。H5 引入的离线存储，这意味着 web ...
阅读 1701·2021-10-18 13:30
阅读 2557·2021-10-09 10:02
阅读 2928·2021-09-28 09:35
阅读 2066·2019-08-26 13:39
阅读 3498·2019-08-26 13:36
阅读 1930·2019-08-26 11:46
阅读 1080·2019-08-23 14:56
阅读 1664·2019-08-23 10:38
