Cache缓存机制

论，如何定义一个前端工程师。前天看了篇文章，做者把前端攻城狮称做是全部攻城狮角色中最具备也最须要‘工匠精神’的攻城狮。从最直观的角度来说就是视觉方面，不只要百分百还原设计稿（静态以及动态交互），还要考虑代码是否工整、冗余、复用、性能等方面问题，并且说得更博大一些还要培养点产品和设计的思惟（培养个P啊，这是开发和他们的鸿沟，纯属扯淡。）正儿八经的对于前端不仅是会JavaScript就好了，要学的东西真是太多了，做为一名初生牛犊的我，仍是至关有必要扩展下一个web开发要掌握的知识面，好比今天要总结的缓存机制。

1、缓存的概念：

Web缓存是指一个Web资源（如html页面，图片，js等）存在于Web服务器和客户端（浏览器）之间的副本。缓存会根据进来的请求保存输出内容的副本；当下一个请求来到的时候，若是是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，仍是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，若是网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新，浏览器才会再次下载网页。

2、缓存的做用（简述）：

• 减小网络带宽消耗
  不管对于网站运营者或者用户，带宽都表明着金钱，过多的带宽消耗，只会便宜了网络运营商。当Web缓存副本被使用时，只会产生极小的网络流量，能够有效的下降运营成本。
• 下降服务器压力
  给网络资源设定有效期以后，用户能够重复使用本地的缓存，减小对源服务器的请求，间接下降服务器的压力。同时，搜索引擎的爬虫机器人也能根据过时机制下降爬取的频率，也能有效下降服务器的压力。
• 减小网络延迟，提高页面渲染速度
  带宽对于我的网站运营者来讲是十分重要，缓存的使用可以明显加快页面打开速度，达到更好的体验。

3、缓存的类型（手打星号）：

• 数据库数据缓存：为了提供查询数据库表的性能，通常会将查询后的数据放到内存中进行缓存，以便下次使用时直接从内存返回，提升响应效率
• 服务器端缓存：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应用层缓存：这种缓存指的是代码层面上，经过代码逻辑和缓存策略实现对数据、页面、图片等资源的缓存。

4、生成缓存

本文要介绍的是浏览器缓存，其实就是指服务器和客户端（浏览器）之间的一个副本（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...