缓存参考资源

缓存重要性

前端开发:
性能一直是重点. 性能最直观体现:网页打开速度. 提高网页速度主要办法就是缓存.

优秀的缓存策略: 减少延迟. 重复利用缓存文件. 减少带宽.降低网络负荷.

缓存分类

  • 数据库缓存
  • 代理服务器缓存
  • CDN缓存
  • 浏览器缓存.
  • LocalStorage
  • SessionStorage

各种缓存简介

LocalStorage: 本地存储的公共资源.根据页面域名来划分. PC上兼容性不太好.

浏览器缓存:

把文件保存在客户端. 在一个会话中会检查缓存的副本是否足够新. 在后退页面时.会直接使用浏览器缓存.

页面的缓存状态是由 headers 参数决定的 header 参数: 开发者工具 → Network → 单击Name栏任意文件 → 弹出headers信息

header 缓存参数(四种)

一: Cache-Control

cache-control:private, max-age=0, proxy-revalidate, no-store, no-cache, must-revalidate

1. max-age (秒)

设置缓存最大有效时间. 当浏览器第一次访问服务器发送请求后. 在max-age 这段时间内浏览器不会再向服务器发送请求了

例1 : max-age=2592000 也就是说缓存有效期为2592000秒(也就是30天)。 于是在30天内都会使用这个版本的资源,即使服务器上的资源发生了变化,浏览器也不会得到通知。max-age会覆盖掉Expires,后面会有讨论。

例2: cache-control:max-age=691200 这个是 某个CDN文件. 一般的CDN都会设置缓存时间的.

2. public/private
  • Public 默认值: 响应会被缓存.且可以在多个用户直接共享.
  • Private : 可以缓存.但是不能共享.
  • Public Private 区别: 假如服务器把: main.css 放到CDN上. 如果设置为Public. 那么全球所有用户都可以使用这个CDN上的 main.css 如果设置为Private. 那么只有一个用户 可以使用这个文件
3. no-cache

不缓存响应/也就是不进行缓存. 设置了 no-cache 不代表浏览器不缓存! 原因复杂.知道就像. 所以只设置 no-cache 不够保险. 可以再加上Private, 还可以将过期时间设置为过去的时间.

4. must-revalidate

如果页面是过期的.那就去服务器进行获取. 不常用.pass

二: Expires

缓存过期时间= max-age + 请求时间 expires:Fri, 10 Feb 2017 02:52:27 GMT 服务器端的具体时间. 需要和 last-modified 结合使用. Cache-control 的优先级比Expires 高 Expires是Web服务器响应消息头字段,在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求。

三: Last-modified

last-modified:Mon, 18 May 2015 10:10:12 GMT 服务器端 文件的最后修改时间.配合Cache-control一起使用.

是检查服务器端资源是否更新的一种方式. 比如本地一个缓存到期了.再次请求的时候. 会向服务器发送 if-modified-since 报头.来询问 last-modified时间点后资源是否被修改过. 如果没有修改 → 返回304码. 继续使用缓存. 如果有被修改 → 下载新的文件. 返回码200: 代表资源是服务器最新资源.

四: ETag

etag:W/”b56eecc7424d9754f2848d5df85fda0b” 服务端.根据文件实体内容生成一段 hash 字符串. 浏览器会把这串文字传回给服务器.如果对应 说明服务器上文件没被修改.

ETag 主要解决 Last-modified 的一些缺陷. 如:

  • Last-modified 只能精确到秒. 但是如果改变非常频繁就要用ETag.
  • 有些文件的最后修改时间改变了,但是文件内容没改! 用ETag就认为 资源是没有被修改的. 不用进行下载.
  • 有些服务器不能精确得到资源的最后修改时间. 这样就无法通过Last-modified来判断资源是否更新. 就需要ETag

使用缓存流程图

(http://oduizitoj.bkt.clouddn.com/2017-02-07-Screen%20Shot%202017-02-07%20at%2017.06.11.png)

缓存命令选择图

(http://oduizitoj.bkt.clouddn.com/2017-02-07-Screen%20Shot%202017-02-07%20at%2017.08.11.png)

‼️缓存背景详解:

  • H5 新实习员工: ServiceWorker

    试验功能(新实习员工:试用中). 字面意思: 服务工人 → 服务员

  • H5 老员工: Web Worker:
  • Boss: 浏览器

    准确来说,每个页面的javascript运行主线程都是一个Boss。

缓存大背景。

Boss很厉害,在页面上指点江山,呼风唤雨。但他有个局限:同一时刻只做一件事(单线程)。

当一些很耗时的杂事让Boss去处理时,在处理的过程中他就无暇顾及其它重要的事了。 在用户看来,页面没人管了,Boss不干事了!这时Boss就很郁闷。

为了保证Boss能处理更重要的事情,董事会(W3C)终于招聘了一个新员工:Web worker。 这下,Boss终于可以从耗时的杂事中解放出来了,他只需要把Web worker叫过来说:“这些事情拿去做,没做完不要来找我”。 Web worker领到任务后默默地到自己的工位(线程)去干活,完成之后给Boss发了个邮件(postMessage)。 Boss收到邮件(onmessage)后欣慰地点了点头。

扯了半天好像还没谈到新员工啊。。。不急,下面就讲到了。 Boss下班了(页面关闭),Web worker也收拾东西回家了。 这样执行了很久,直至2014年6月,董事会发现一个问题:“居然没有人在老板下班后加班?”。 于是,又招了一个专职加班的:Service Worker。 它被赋予的绩效目标如下: . 入职(install)后永不下班,而能更新。 . 能处理Boss需要的资源(HTTPS请求),以便离线时也能让BOSS取到数据(从cache中)。 . 能向客户推送消息(push notifications) . 不允许越权管理Boss的事(DOM ACCESS) 总地来说,Service worker是独立于页面的一个运行环境,它在页面关闭后仍可以运行。 同时,也能对它负责的页面的网络请求进行截取和返回请求(类似于Fiddler)。

manifest. 废弃中!!!! 使用 Service Workers 替代. manifest. 废弃中!!!! 使用 Service Workers 替代. manifest. 废弃中!!!! 使用 Service Workers 替代.

Service Worker 文档 Manifest 文件 (强烈不建议使用)

AppCache — 看起来是个不错的方法,因为它可以很容易地指定需要离线缓存的资源。
但是,这个方法假定了你使用时会遵循很多规则,如果你不严格遵循这些规则,它会把你的APP搞得一团糟!!!!!
就像我的博客. 主页居然被缓存了.. 根本没有设置过….

离线存储技术简介

 数据缓存分为两种:AppCache & DOM/Web Storage.

Web Storage分两种: Session & Local Storage

HTML5 两大新离线存储技术:localstorage与Application Cache. + 传统离线存储技术:Cookie. HTML5 两大新离线存储技术:localstorage与Application Cache. + 传统离线存储技术:Cookie.

  经过实践我们任务localstorage应该存储一些非关键性ajax数据,做锦上添花的事情;   Application Cache用于存储静态资源,仍然是干锦上添花的事情;    cookie只能保存一小段文本(4096字节);所以不能存储大数据,这是cookie与上述缓存技术的差异之一,而因为HTTP是无状态的,服务器为了区分请求是否来源于同一个服务器,需要一个标识字符串,而这个任务就是cookie完成的,这一段文本每次都会在服务器与浏览器之间传递,以验证用户的权限。

  所以Application Cache的应用场景不一样,所以使用也不一致。   

Application Cache简介

  Application Cache的使用要做两方面的工作:   ① 服务器端需要维护一个manifest清单   ② 浏览器上只需要一个简单的设置即可

如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session。 但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 SessionStorage 本地存储基于会话

他们是因为页面开发者的直接行为而产生。所有的缓存数据都由开发者直接完全地掌控。

AppCache 缓存

AppCache使我们能够有选择的缓冲web浏览器中所有的东西,从页面、图片到脚本、css等等。 尤其在涉及到应用于网站的多个页面上的CSS和JavaScript文件的时候非常有用。其大小目前通常是5M。

DOM/Web Storage 缓存: Session & Local Storage

如果需要存储一些简单的用key/value对即可解决的数据,DOM Storage是非常完美的方案。 根据作用范围的不同,有Session Storage和Local Storage两种.

两者使用格式都一样,但区别是 SessionStorage基于会话,关闭浏览器会消失。而LocalStorage 需要使用销毁: SessionStorage基于会话,关闭浏览器会消失。而LocalStorage 需要使用销毁: SessionStorage基于会话,关闭浏览器会消失。而LocalStorage 需要使用销毁:

比如用户调整了栏目宽度. 把这个宽度记录到 LocalStorage 中. 下次就从这里读取. 就实现了… 人性化设计.

Session Storage

会话级别的存储(页面关闭即消失)

Local Storage

本地化存储(除非主动删除,否则数据永远不会过期)。

Local Storage 实例

博客 cate/tag/filename/structure 栏目的宽度设置.

Local Storage 增删查数据

推荐使用: getItem(), setItem(),removeItem().

如果希望一次性清除所有的键值对,可以使用clear()。 设置值: 三种方法 localStorage.a = 3; //设置a为”3” localStorage[“a”] = “sfsf”; //设置a为”sfsf”,覆盖上面的值 localStorage.setItem(“b”,”isaac”); //设置b为”isaac”

获取值: 三种方法
var a1 = localStorage.a;            //获取a的值
var a2 = localStorage["a"];         //获取a的值
var b = localStorage.getItem("b");  //获取b的值

删除值: 
localStorage.removeItem("c");       //清除c的值

下载数据先放到内存空间中. 内存空间达到一定容量再保存到硬盘.

可以减少磁盘操作.避免磁盘损坏.

HTTP 头实例

.   Request URL:https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css
.   Request Method:GET
.   Status Code:200  (from disk cache)
.   Remote Address:101.227.182.130:443
.   
Response Headers
.   access-control-allow-origin:*
.   age:18378
.   cache-control:max-age=691200
.   content-encoding:gzip
.   content-type:text/css
.   date:Tue, 07 Feb 2017 07:01:20 GMT
.   etag:W/"b56eecc7424d9754f2848d5df85fda0b"
.   expires:Fri, 10 Feb 2017 02:52:27 GMT
.   last-modified:Mon, 18 May 2015 10:10:12 GMT
.   server:marco/0.24
.   status:200
.   vary:Accept-Encoding
.   via:T.101171.H.1, V.mix-hz-fdi-166, T.182139.H.1, M.ctn-sh-sha2-136
.   x-cache:HIT from mix-hz-fdi-166; HIT from ctn-sh-sha2-136
.   x-request-id:b3eb1699b50a0c2b30cf04cb4908693d; 80dbb35daa31bf73a92b667dd61aab38
.   x-source:U/200
.   
Request Headers
.   Provisional headers are shown
.   accept:text/css,*/*;q=0.1
.   Referer:http://127.0.0.1:4000/
.   User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

HTTP 缓存.

HTTP 中关于缓存的字段头 一个是请求.一个是响应

Expires:

时间.

Cache-Control:

优先级比expires高,但是目前来说通常两者并存,采用绝对时间Cache-Control: max-age=60单位是秒

Last-Modified:

上一次更改时间,注:这里的更改并非狭义上必须对内容进行相应的更改,哪怕是打开文件再直接进行保存也会刷新该时间。

Etag:

与内容紧密相关的一个字段,是对文件内容进行Hash散列后得到的值(Hash会需要消耗一部分CPU时间),比Last-Modified可靠

正常情况 只对 get 请求进行缓存.

为什么要缓存. 互联网. 最影响性能/最耗时部分在 网络传输. 有限的带宽下.提高性能 就靠缓存了.

后端缓存: 两种: 一种存硬盘中. 一种存内存中.

前端缓存:

核心就在上面4个字段. main.css 举例:

第一次请求: 服务器4个字段都会传过来.

前端: 首先检查 cache-control 与 expires. 有cache-control的 已这个为标准. 如果超时 就向后端发送请求. 请求会带上 If-Modified-Since,If-None-Match。

后端:

收到服务器请求. 会对这两个字段进行对比. 同样以If-None-Match为标准,没有If-None-Match的情况下,比对If-Modified-Since,如果比对后发现文件没有过期,即Etag没有发生变化,或者Last-Modified与If-Modified-Since一致(只存在If-Modified-Since时)。如果改变了,就会发送新的文件,反之,则直接返回304。

浏览器 三种刷新方式

F5 刷新 Ctrl + F5 强制刷新 地址栏 按回车.. 前进后退

普通刷新:

缓存没有过期. 状态码 200. 因为没有向后端发送请求.而是直接重现上次的请求结果. 唯一的区别是 来源显示 from cache.

强制刷新

无视 cache-control / expire 是否过期. 直接在 发送的请求头中 设置:Cache-Control: max-age=0. 并发送给服务器.

服务器根据 If-None-Match和If-Modified-Since进行判断是否过期。 大多数情况下,我们对静态资源设置时间比较久,很多没有过期。 这时候,我们就会看见许多304(另一种情况是过期后请求得到304)。

设置过期时间

cache-control 有个 public / private 属性. 默认public.

public: 允许代理服务器进行缓存(也就是CDN),可以明显加快网页加载速度

http 缓存 好像需要后端服务器支持的….

9种浏览器缓存机制

浏览器缓存. 避免重复的资源请求. 快速读取文件.

开发者工具: → APPlication → 就有8种!!!!!

HTTP 缓存

针对文件的重复请求. 浏览器可以根据协议头判断是从服务器请求文件还是从本地读取文件.

开发者工具: → APPlication → Frame 显示的就是 浏览器的http 文件级缓存.

  1. 先判断expires 有没有过期
    • 没过期就直接读取缓存.不发http请求.
    • 过期 进入下一步.
  2. 判断是否含有 etag.
    • 有则带上 if-none-match发送请求. 服务器未修改就返回304. 服务器修改就重新下载.
    • 无 进入下一步
  3. 判断是否含有 last-modified,
    • 有则带上if-modified-since发送请求,无效返回200,有效返回304,
    • 否则直接向服务器请求

websql