HTTP：静态资源缓存

HTTP缓存是WEB性能优化的重要手段

也是WEB工程师的必备知识技能

1. 缓存作用？

降低网络带宽消耗；

降低服务器压力；

降低资源下载延迟，加快页面响应速度；

2. 本文重点...

浏览器会缓存一些东西(CSS、JS、图片)，那么...

缓存哪些？不缓存哪些？

缓存多长时间？何时过期？

缓存何时更新？

如何不用缓存？

F5、Ctrl+F5有何异同？

....

3. F5、Ctrl+F5有何异同？

先来感受一波浏览器缓存机制；

测试环境：IE11、Firefox、Chrome、Opera

分析工具：Fiddler

测试代码：

测试场景：

下面直接晒测试结果...

场景1：首次加载资源（浏览器无缓存）

各浏览器表现一致，从服务器端下载完整资源，响应码200。

场景2：地址栏按ENTER重新加载

各浏览器会向服务器确认自身缓存是否过期，服务器若发现资源未改变，则响应304，指示浏览器可继续使用自身缓存，无需重新下载资源。

注：IE/Firefox的请求头一样；Chrome/Opera的请求头一样；

场景3、场景4：按F5、刷新按钮

与在地址栏按ENTER类似，各浏览器会向服务器确认自身缓存是否还可以继续使用。

场景5：按Ctrl+F5

按Ctrl+F5，浏览器会放弃自身缓存，重新从服务器下载资源。

4. HTTP缓存体系

下面展开讲解

If-Modified-Since、ETag、304、412

等内容

4.1. 浏览器缓存使用流程

注：GET请求才会涉及缓存问题，浏览器不会缓存POST请求；

4.2. 三大缓存策略

1. 缓存存储策略：

用于决定 HTTP 响应内容是否可被浏览器缓存。

响应首部：

Cache-Control:no-store，禁止浏览器缓存响应内容；

示例：禁止浏览器缓存CSS、JS、PNG、HTML文件

2. “新鲜度检验”策略：

HTTP可以指定缓存的过期时间，未过期的缓存是“新鲜的”，可以在不联系服务器的情况下，直接使用缓存。

响应首部：

Cache-Control:max-age=，HTTP1.1，定义缓存的最大有效期（秒）；

Expires:, HTTP1.0,定义缓存过期的绝对日期；

注1：建议给JS、CSS、PNG等静态资源设定一个较大的缓存过期时间，最大限度利用缓存，减少HTTP请求量；

注2：若响应中含有Cache-Control:max-age=0或Cache-Control:no-cache或Pragma:no-cache，可使浏览器在每次使用缓存前，都去跟服务器确认缓存的可用性；

注3：请求中也可携带Cache-Control:no-cache或Pragma:no-cache，这样会迫使服务器不返回缓存文件；（浏览器的Ctrl+F5原理）

示例：使浏览器使用缓存前，必须去确认有效性；

3. “服务器再验证”策略：

“不新鲜”的缓存并不一定意味着它和服务器上的文件有差异，只意味着需要同服务器确认一下缓存是否有更新的必要。

响应首部：

Last-Modified:，文件上次修改时间；

ETag:，文件的指纹信息；

请求首部：

If-Modified-Since:，若文件从指定日期后被改过，就返回新的文件；否则只响应304，指示浏览器缓存仍可继续使用；与Last-Modified配合使用；

If-None-Match:，若与服务器端文件指纹不匹配，就返回新的文件；否则只响应304，指示浏览器缓存仍可继续使用；与ETag配合使用；

5. 412响应代表什么？

412

Precondition Failed

先决条件失败

响应示例：

响应时机：

会在缓存条件检测失败时返回412响应码，例如：

注：如何清理各浏览器缓存？

各浏览器都可通过[Ctrl+Shift+Delete]快捷键完成缓存清理。

参考：

《图解HTTP》

《HTTP权威指南》

《高性能网站建设指南》

走过路过不要错过

赶紧关注一下