浏览器缓存机制学习总结

JiaXinYi 发布于2019-08-02 10:32 / 870人阅读

浏览器缓存机制学习总结

最近在做一个考试系统时，由于经常加载试卷或图片等等静态资源，抽空学习了一下缓存机制，在此记录

为什么要使用缓存

1、通过HTTP协议，在客户端和浏览器建立连接时需要消耗时间，而大的响应需要在客户端和服务器之间进行多次往返通信才能获得完整的响应，这拖延了浏览器可以使用和处理内容的时间。这就增加了访问服务器的数据和资源的成本，因此利用浏览器的缓存机制重用以前获取的数据就变成了性能优化时需要考虑的事情。
2、流量啊，现在云服务器流量都是收费的（- -玩笑）

浏览器缓存机制简介

一般使用中，缓存策略都是通过http 请求或响应里的header字段定义的，且许多是搭配使用的
各个字段定义详见 http 缓存 MDN

常用的字段个人看来主要分为两个部分

缓存策略字段

缓存校验字段

接下来依次介绍

缓存策略字段

Pragma（http1.0）,cache-control（http1.1）

Pragma

Pragma：no-cache可以禁用浏览器缓存，使得浏览器每次都会发起新请求去获取资源
Pragma的优先级比expires高，如果给Pragma：no-cache且给expires一个未过期的事件，浏览器仍会发起新请求
expires时服务端的时间，与客户端时间可能不一致哦

cache-control（重点）

http1.1新增加的cache-control字段来弥补Pragma的不足，来对缓存策略提供更细粒度的控制，可以定义的值如下
request header 请求头header可以定义的值：

response header 相应header可以定义的值：

对几个字段加以解释

cache-control：no-cache ，强制浏览器不直接使用缓存，每次需要向服务器发起请求校验缓存有效性

cache-control：max-age=1000 ，1000秒内，该资源有效，浏览器无需再次请求获取资源（response 200 from cache）

cache-control：public ，可以被任何中间人（比如中间代理、CDN等）缓存。

cache-control：private，该响应是专用于某单个用户的，中间人不能缓存此响应

cache-control优先级高于expirse

对缓存策略进行简单总结就是：
不会发起请求的场景：

cache-control：max-age在有效期内

当前客户端时间未超过expirse

需要发起请求验证缓存是否有效的场景（需要配合if-modified-since || if-none-match），返回304可以在缓存取值：

cache-control：no-cache

cache-control：max-age超出有效期

当前客户端时间超过expirse

必须发起请求获取新资源的场景：

cache-control：no-store

缓存校验字段 last-modifed,e-tag last-modified

该字段定义了资源上次的修改时间
场景：（cache-control:no-cache）
当客户端请求相应资源时，服务端会返回last-modified字段
客户端再次请求相应资源时会带上if-modified-since:(last-modified)value，
如果资源未改动（资源的last-modified <=if-modified-since）则返回304，
如资源已更新，返回新资源（200），同时更新last-modified的值

如果是cache-control:max-age=?,请求之前还会判断有效期(可能就无需请求了，直接从浏览器缓存获取)

e-tag

e-tag是服务端对某个资源计算出来的唯一指纹值，如果资源有改动，计算出来的指纹值会变化。
客户端请求时会带上之前服务端返回的 if-none-match:e-tag，服务端以指纹值是否相等为依据判断客户端的缓存是否有效。
如有效，返回304，如失效，返回200和新资源

e-tag的出现是弥补last-modified的不足

last-modifie只能精确到秒，如一秒内多次更新，则不能获取最新资源

如果某资源是定期更新的但内容却可能未改变，

则last-modified每次都会更新而导致重复返回资源，
而e-tag值不会变因为内容不变，所以e-tag在这种场景下高效利用了缓存。

注意

如果服务端相应同时具有last-modified和e-tag，那么下次请求时会带上两者

if-none-match： e-tag；

if-modified-since：（last-modified）value

且这两者同时满足才会返回304，否则返回200。

实例

找个网站请求实例看一下字段我们都理解了没

如图这里的这个js资源是直接从http缓存直接加载的，肯定是上次请求的时间与现在相比没超过max-age。

写在最后

现在看这张图应该有点清晰了，这篇作为个人学习总结，许多细节不够详尽，实例操作不够，推荐各位去更加详尽参考资料中细细品读。

Reference

通过浏览器看缓存

web性能优化:详说浏览器缓存

浅谈浏览器http的缓存机制

MDN

GPU云服务器云服务器 php缓存技术总结三级缓存机制 cdn缓存机制 php缓存机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52422.html

深入分布式缓存 -- 学习总结

摘要：浏览器缓存根据一套与服务器约定的规则进行工作检查确定副本是否最新，通常只要一次会话。数据库缓存是一类特殊的缓存，是数据库自身的缓存机制。存储成本当，系统会从数据库或者其他数据源取出数据，然后放入存储，这个过程需要时间和空间，这就是缓存成本。什么是缓存存储在计算机上的一个原始数据复制集，以便于访问。 --维基百科缓存是系统快速响应中的一种关键技术，是一组被保存起来以备将来使用的...

pkwenda 2019-08-06 13:35 评论0 收藏0
原理解释 - 收藏集 - 掘金

摘要：巧前端基础进阶全方位解读前端掘金我们在学习的过程中，由于对一些概念理解得不是很清楚，但是又想要通过一些方式把它记下来，于是就很容易草率的给这些概念定下一些方便自己记忆的有偏差的结论。计算机程序的思维逻辑 (83) - 并发总结 - 掘金从65节到82节，我们用了18篇文章讨论并发，本节进行简要总结。多线程开发有两个核心问题，一个是竞争，另一个是协作。竞争会出现线程安全问题，所以，本...

AlphaGooo 2019-08-21 11:41 评论0 收藏0
原理解释 - 收藏集 - 掘金

摘要：巧前端基础进阶全方位解读前端掘金我们在学习的过程中，由于对一些概念理解得不是很清楚，但是又想要通过一些方式把它记下来，于是就很容易草率的给这些概念定下一些方便自己记忆的有偏差的结论。计算机程序的思维逻辑 (83) - 并发总结 - 掘金从65节到82节，我们用了18篇文章讨论并发，本节进行简要总结。多线程开发有两个核心问题，一个是竞争，另一个是协作。竞争会出现线程安全问题，所以，本...

forrest23 2019-08-16 10:36 评论0 收藏0
后台开发常问面试题集锦（问题搬运工，附链接）

摘要：基础问题的的性能及原理之区别详解备忘笔记深入理解流水线抽象关键字修饰符知识点总结必看篇中的关键字解析回调机制解读抽象类与三大特征时间和时间戳的相互转换为什么要使用内部类对象锁和类锁的区别，，优缺点及比较提高篇八详解内部类单例模式和 Java基础问题 String的+的性能及原理 java之yield(),sleep(),wait()区别详解-备忘笔记深入理解Java Stream流水...

spacewander 2019-08-21 17:42 评论0 收藏0