前端缓存走起来

说到前端优化,“缓存”是必须要说说的,总结一下缓存的一些东西,也加固一下自己的记忆

前端主要涉及的是浏览器端缓存:

页面的缓存状态是由 http-header来决定的,一个是服务器响应信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。。

1
2
3
4
5
6
7
8
9
10
//Request:
1.Cache-Control: max-age=0 以秒为单位
2.If-Modified-Since: Mon, 19 Nov 2012 08:38:01 GMT 缓存文件的最后修改时间。
3.If-None-Match: "0693f67a67cc1:0" 缓存文件的Etag值
4.Cache-Control: no-cache 不使用缓存
5.Pragma: no-cache 不使用缓存

Cache-Control: 是控制缓存的比较关键的,设置如果同时存在cache-control和Expires怎么办呢?

浏览器总是优先使用cache-control,如果没有cache-control才考虑Expires

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// response:
Cache-Control: public 响应被缓存,并且在多用户间共享, (公有缓存和私有缓存的区别,请看另一节)
Cache-Control: private 响应只能作为私有缓存,不能在用户之间共享
Cache-Control:no-cache 提醒浏览器要从服务器提取文档进行验证
Cache-Control:no-store 绝对禁止缓存(用于机密,敏感文件)
Cache-Control: max-age=60 60秒之后缓存过期(相对时间)
Date: Mon, 19 Nov 2012 08:39:00 GMT 当前response发送的时间
Expires: Mon, 19 Nov 2012 08:40:01 GMT 缓存过期的时间(绝对时间)
Last-Modified: Mon, 19 Nov 2012 08:38:01 GMT 服务器端文件的最后修改时间
ETag: "20b1add7ec1cd1:0" 服务器端文件的Etag值

ETag:
ETag是实体标签, 根据实体内容生成的一段hash字符串(类似于MD5或者SHA1之后的结果),可以标识资源的状态。 当资源发送改变时,ETag也随之发生变化。

ETag是Web服务端产生的,然后发给浏览器客户端。浏览器客户端是不用关心Etag是如何产生的。

为什么使用ETag呢? 主要是为了解决Last-Modified 无法解决的一些问题。

  1. 某些服务器不能精确得到文件的最后修改时间, 这样就无法通过最后修改时间来判断文件是否更新了。

  2. 某些文件的修改非常频繁,在秒以下的时间内进行修改. Last-Modified只能精确到秒。

  3. 一些文件的最后修改时间改变了,但是内容并未改变。 我们不希望客户端认为这个文件修改了。


强行告诉浏览器不适用缓存?

  1. 浏览器发送Http request, 给Web 服务器, header中带有Cache-Control: no-cache. 明确告诉Web服务器,客户端不使用缓存。

  2. Web服务器将把最新的文档发送给浏览器客户端.


2现在我们如何使用缓存

我们团队现在开发时候,所以静态资源都是采用“版本号+永久缓存

业界有几种缓存策略:

  • 第一个:请求加参数
1
2
3
4
5
6
7
8
1 永久缓存静态文件,请求加参数,标记文件的是否更改
<script type='type/javascript' src="a.js?t=20151232">
//存在问题:
1.html文件 和 js文件上线替换时有时间差,如果先HTML生效,
就会访问到就的 js文件,
2. 如果js下替换下来,一个全新的用户,浏览器上没有缓存过js
文件,就会发生 旧的html用新js文件

第二个:修改文件名,永久缓存

1
2
3
4
5
6
7
8
9
10
11
12
<script type='type/javascript' src="a_20151232.js">
// 优点:
1、线上的a.js不是同名文件覆盖,而是文件名+时间戳或者内容hash,
所以可以先上线静态资源,再上线html页面,不存在间隙问题;
2、遇到问题回滚版本的时候,无需回滚a.js,只须回滚页面即可;
由于静态资源版本号,因此所有静态资源可以开启永久强缓
存,只有更新了内容的文件才会缓存失效,缓存利用率大增;
3、修改静态资源后会在线上产生新的文件,一个文件对应一个版本,
用cdn加速也方便

注:现在大部分静态资源,都会走cdn加速,cdn自带缓存设置,所以对于网站的优化,对静态资源cdn加速是必要的,上面所说的的缓存策略,增加版本号,一键部署cdn,都可以通过构建工具(神马 gulp、grunt、webpack、fis来实现,注:我们tema现在是用百度内部的轮子,edp构建)。 不过这些构建工具都大同小异,有兴趣的可以了解其中一二个

~就写这些么,可能内容比较水,也算自己的一个小总结


作者 [@sha Qihe]
QQ:330630770
2015 年 10月 9日