浏览器缓存机制（含开发运用）

2017-09-12 本文已影响190人 Ricoywang

刚看到javascript日刊小编面试前端小姐姐，问到关于浏览器缓存的一些问题，小姐姐没有回答上！，但是在小编细心教导下，还是通过面试！！通过啦！！人性险恶，我也想有一个妹纸一起打代码。不过看看我们面试官的爱♂好，我也不指望这些了，还是代码好玩。

话不多少，开始今天的话题---浏览器的缓存机制

先啰嗦几句，后面介绍开发过程中常用的几种缓存方案。觉得比较枯燥的可以直接跳到后面的 ## 开发运用 ##，毕竟还是实用为主。

前端对浏览器加载文件缓存操作，主要是通过HTTP头部信息cache-control，控制单个请求文件缓存状态。静态资源挂载到服务器上，使用CDN引入不经常更改的资源，HTML5缓存功能。以及通过更改资源文件名或者添加时间戳，强制重新加载新文件。

缓存策略
└───浏览器缓存
│   │
│   └───HTTP缓存机制
│       │
│       └───本地缓存阶段
│                 │  Cache-Control
│                 │  Expires
│       └───协商缓存阶段
│                 │  Last-Modified&if-modified-since
│                 │  ETag&If-None-Match

│   
└───服务器缓存
    │   CDN缓存
    │   Combo服务
└───HTML5缓存
    │   离线存储manifest
    │   本地存储localStorage

HTTP缓存

HTTP缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下，浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文件，chrome控制台下的Frames即展示的是浏览器的HTTP文件级缓存。以下是浏览器缓存的整个机制流程。主要是针对重复的HTTP请求，在有缓存的情况下判断过程主要分3步：

判断expires，如果未过期，直接读取HTTP缓存文件，不发HTTP请求，否则进入下一步
判断是否含有etag，有则带上if-none-match发送请求，未修改返回304，修改返回200，否则进入下一步
判断是否含有last-modified，有则带上if-modified-since发送请求，无效返回200，有效返回304，否则直接向服务器请求

以上3步可以也可以视为3个阶段：

读取本地缓存阶段：先在本地查找该文件资源消息报头，也就是header中的Expires,Cache-Control，查看缓存资源是否能重新被使用，是否需要再次加载。如果该缓存文件允许被使用，浏览器就直接从缓存中加载这个文件，连请求都不会发送到网页所在服务器；
协商缓存，如果本地缓存没有被允许直接加载使用，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否有修改，如果没有被修改，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源；
缓存调用失败：如果协商缓存发现服务器上资源比对本地缓存有修改，或者完全是一个新的资源，浏览器直接从服务器上加载资源数据。

通俗易懂的说法，你的冰箱里有一瓶牛奶（浏览器加载好的资源文件），瓶子上有生产日期，保质期，品牌名称（服务器）。作为资深宅男的你，肯定是得看一看牛奶的生产日期，毕竟喝过上次喝过82年的雪碧后通透的感觉影响了你很久，如果牛奶还在生产日期内（Cache-Control），你当然是可以直接使用的，如果你牛奶到期了，你很穷舍不得直接扔掉，假如没坏扔了不可惜么，于是你拿着牛奶找到该品牌检测，别人首先拿着他们产品应该有的标准比对你拿过来的牛奶的检测结果，如果别人告诉你没有什么变化，你想了想，也没什么毛病，舔舔继续喝了（继续使用浏览器缓存）。如果别人告诉你这个牛奶的品质已经改变了，为了你的身体健康，给你换了瓶新的牛奶（直接加载新的资源文件）。
PS：以上纯属虚构，码农怎么会有牛奶喝呢，穷的只能舔盖儿了。
PPS：为了您和您家人的身体健康，请定期清理过期食品。

开发运用

如果我们不去设置expires和cache-control，浏览器会默认缓存图片、css和js等静态资源，这对用户来说是挺不错的优化，用户不用每次都重新加载文件，可以直接使用浏览器的缓存。但对于我们开发者来说，会碰到需要缓存的场景和不需要缓存的场景，那么我们如何按照不同的需求去设置呢。

1、在html的head部分添加meta属性，这种添加是很不靠谱的，基本不会生效

<meta http-equiv="Cache-Control" content="no-store"/>  
<meta http-equiv="Pragma" content="no-cache"/>  
<meta http-equiv="Expires" content="0"/>

2、通过在ajax请求时添加header属性

$.ajax({
    url : 'url',
    dataType : "json",
    cache: true,
    success : function(xml, status){    
          }
 });

3、或者在请求中加入时间戳ts参数，

$.ajax({
      url:url,
      data:{
            ts:'20179121480'
      }
})

4、由后端添加Cache-Control字段
Node.js
response.setHeader('Cache-Control', 'max-age=31536000');

静态资源

那些通过链接形式加载的Css、js、图片等资源文件，浏览器将一直使用本地缓存而导致得不到更新，我们可以通过改变文件的url来让浏览器重新下载文件，

1、打包过程中生成hash文件名，每一次更新的版本都是不同的url加载，
<script type="text/javascript" src="../src/js/dfdswghejkfd.js"></script>
2、URL中添加时间戳ts
<script type="text/javascript" src="../src/js/default.js?ts=20179121480"></script>
3、文件名中加入版本号原理和生成hash文件名是一样的，都是更改了文件名，如果有大量这类操作，一般使用用打包工具完成
<script type="text/javascript" src="../src/js/lib/jquery-1.11.3.min.js"></script>
4 通过后端给资源请求添加ts时间戳字段，强制资源重新加载。

CDN

CDN的全称是Content Delivery Network，即内容分发网络**。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。类似分布各地的物流仓储网络，CDN网络可以将源站的内容缓存到分布全球的CDN节点，根据用户的访问IP，就近连接CDN，提高网站响应速度。

Combo

实现静态资源合并的。combo服务，也就是我们在最终拼接生成页面资源引用的时候，并不是生成多个独立的link标签，而是将资源地址拼接成一个url路径，请求一种线上的动态资源合并服务，从而实现减少HTTP请求的需求，比如前面的例子，稍作调整即可得到这样的结果：
<link rel="stylesheet" type="text/css" href="/file1"/>
<link rel="stylesheet" type="text/css" href="/file2"/>
<link rel="stylesheet" type="text/css" href="/file3"/>
合并==>
<link rel="stylesheet" type="text/css" href="//??file1,file2,file3,…"/>
这个 /??file1,file2,file3,… 的url请求响应就是动态combo服务提供的，它的原理很简单，就是根据url找到对应的多个文件，合并成一个文件来响应请求，并将其缓存，以加快访问速度。

数据库数据缓存

后端数据库方面的，不是很清楚，挖个坑，后面补足后端知识后再填。

常用的HTML5缓存

manifest
通过一个入口文件manifest罗列需要被缓存的文件清单。
单开补充
localStorage
作为可以让前端脱离沙盒工作模式，为数不多的技术，单独拿出来聊一聊。
前端开发者的后花园locaStorage

参考

HTML5 离线缓存-manifest简介
 HTTP缓存（推荐阅读）
浏览器缓存机制剖析
 Web缓存策略总结（推荐阅读）
日刊公众号：FedJavaScript