1.什么是缓存?

缓存是一种数据结构,用于快速查找以及执行的操作结果。因此,如果一个操作执行起来很慢,对于常用的输入数据就可以将操作的结果缓存,并在下次调用该操作时使用缓存的数据。

缓存是一个到处都存在的用空间换时间的例子。通过使用多余的空间,我们能够获取更快的速度。

首先,看看没有网站没有接入CDN时,用户浏览器与服务器是如何交互的:

用户在浏览网站的时候,浏览器能够在本地保存网站中的图片或者其他文件的副本,这样用户再次访问该网站的时候,浏览器就不用再下载全部的文件,减少了下载量意味着提高了页面加载的速度。

但是如果在中间加上一层CDN,那么用户浏览器与服务器的交互如下:

客户端浏览器先检查是否有本地缓存是否过期,如果过期,则向CDN边缘节点发起请求,CDN边缘节点会检测用户请求数据的缓存是否过期,如果没有过期,则直接响应用户请求,此时一个完成http请求结束;如果数据已经过期,那么CDN还需要向源站发出回源请求(back to the source request),来拉取最新的数据。

CDN的典型拓扑图如下:

可以看到,在存在CDN的场景下,数据经历了客户端(浏览器)缓存和CDN边缘节点缓存两个阶段

2.下面分别对这两个阶段的缓存进行详细的剖析:

(1)CDN缓存

  什么是CDN缓存?

    其实CDN缓存就相当于火车票代售点

    8年前,还没有火车票代售点一说,12306.cn更是无从说起。那时候火车票还只能在火车站的售票大厅购买,而我所住的小县城并不通火车,火车票都要去市里的火车站购买,而从县城到市里,来回就是4个小时车程,简直就是浪费生命。后来就好了,小县城里出现了火车票代售点,可以直接在代售点购买火车,方便了不少,全市人民再也不用在一个点苦逼的排队买票了。

    CDN就可以理解为分布在每个县城的火车票代售点,用户在浏览网站的时候,CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求,这样海南移动用户的请求就不会千里迢迢跑到北京电信机房的服务器(假设源站部署在北京电信机房)上了。

  CDN的优势很明显:

    (1)CDN节点解决了跨运营商和跨地域访问的问题,访问延时大大降低;
    (2)大部分请求在CDN边缘节点完成,CDN起到了分流作用,减轻了源站的负载。
 
  CDN缓存

    浏览器本地缓存失效后,浏览器会向CDN边缘节点发起请求。类似浏览器缓存,CDN边缘节点也存在着一套缓存机制。

  CDN缓存的缺点

    CDN的分流作用不仅减少了用户的访问延时,也减少的源站的负载。但其缺点也很明显:当网站更新时,如果CDN节点上数据没有及时更新,即便用户在浏览器使用Ctrl +F5的方式使浏览器端的缓存失效,也会因为CDN边缘节点没有同步最新数据而导致用户访问异常。

  CDN缓存策略

    CDN边缘节点缓存策略因服务商不同而不同,但一般都会遵循http标准协议,通过http响应头中的Cache-control: max-age的字段来设置CDN边缘节点数据缓存时间。

    当客户端向CDN节点请求数据时,CDN节点会判断缓存数据是否过期,若缓存数据并没有过期,则直接将缓存数据返回给客户端;否则,CDN节点就会向源站发出回源请求,从源站拉取最新数据,更新本地缓存,并将最新数据返回给客户端。

    CDN服务商一般会提供基于文件后缀、目录多个维度来指定CDN缓存时间,为用户提供更精细化的缓存管理。

    CDN缓存时间会对“回源率”产生直接的影响。若CDN缓存时间较短,CDN边缘节点上的数据会经常失效,导致频繁回源,增加了源站的负载,同时也增大的访问延时;若CDN缓存时间太长,会带来数据更新时间慢的问题。开发者需要增对特定的业务,来做特定的数据缓存时间管理。

  CDN缓存刷新

    CDN边缘节点对开发者是透明的,相比于浏览器Ctrl+F5的强制刷新来使浏览器本地缓存失效,开发者可以通过CDN服务商提供的“刷新缓存”接口来达到清理CDN边缘节点缓存的目的。这样开发者在更新数据后,可以使用“刷新缓存”功能来强制CDN节点上的数据缓存过期,保证客户端在访问时,拉取到最新的数据。
(2)浏览器(客户端)缓存
    客户端缓存的缺点

    客户端缓存减少了的服务器请求,避免了文件重复加载,显著地提升了用户地方。但是当网站发生了更新的时候(如替换了css、js以及图片文件),浏览器本地仍保存着旧版本的文件,从而导致无法预料后果。
    曾几何时,一个页面加载出来,页面各元素位置乱飘,按钮点击失效,前端GG都会习惯性地问一句:“缓存清了没?”,然后Ctrl+F5       ,Everything is OK。但有些时候,如果我们是简单地在浏览器地址栏中敲一个回车,或者是仅仅按F5刷新,问题依然没有解决,你可知道这三种不同的操作方式,决定浏览器不同的刷新缓存策略?
   
   浏览器缓存刷新

    1.  在地址栏中输入网址后按回车或点击转到按钮
    浏览器以最少的请求来获取网页的数据,浏览器会对所有没有过期的内容直接使用本地缓存,从而减少了对浏览器的请求。所以,Expires,max-age标记只对这种方式有效。

    2.  按F5或浏览器刷新按钮
    浏览器会在请求中附加必要的缓存协商,但不允许浏览器直接使用本地缓存,它能够让 Last-Modified、ETag发挥效果,但是对Expires无效。

    3.  按Ctrl+F5或按Ctrl并点击刷新按钮
    这种方式就是强制刷新,总会发起一个全新的请求,不使用任何缓存。
 
   浏览器如何来确定使用本地文件还是使用服务器上的新文件?下面来介绍几种判断的方法。
    Expires

    Expires:Sat, 24 Jan 2015 20:30:54 GMT
    
如果http响应报文中设置了Expires,在Expires过期之前,我们就避免了和服务器之间的连接。此时,浏览器无需向浏览器发出请求,只需要自己判断手中的材料是否过期就可以了,完全不需要增加服务器的负担。
 
    Cache-control:max-age
    
 
Expires的方法很好,但是我们每次都得算一个精确的时间。max-age 标签可以让我们更加容易的处理过期时间。我们只需要说,这份资料你只能用一个星期就可以了。

Max-age 使用秒来计量,如:
Cache-Control:max-age=645672
指定页面645672秒(7.47天)后过期。
 
    Last-Modified

  服务器为了通知浏览器当前文件的版本,会发送一个上次修改时间的标签,例如:Last-Modified:Tue, 06 Jan 2015 08:26:32 GMT

  这样浏览器就知道他收到的这个文件创建时间,在后续的请求中,浏览器会按照下面的规则进行验证:
    1.  浏览器:Hey,我需要jquery.min.js这个文件,如果是在 Tue, 06 Jan 2015 08:26:32 GMT 之后修改过的,请发给我。
    2.  服务器:(检查文件的修改时间)
    3.  服务器:Hey,这个文件在那个时间之后没有被修改过,你已经有最新的版本了。
    4.  浏览器:太好了,那我就显示给用户了。
  在这种情况下,服务器仅仅返回了一个304的响应头,减少了响应的数据量,提高了响应的速度
   下图是按F5刷新页面后,页面返回304响应头。
 
 
 
    ETag
    通常情况下,通过修改时间来比较文件是可行的。但是在一些特殊情况,例如服务器的时钟发生了错误,服务器时钟进行修改,夏时制DST到来后服务器时间没有及时更新,这些都会引起通过修改时间比较文件版本的问题。

    ETag可以用来解决这种问题。ETag是一个文件的唯一标志符。就像一个哈希或者指纹,每个文件都有一个单独的标志,只要这个文件发生了改变,这个标志就会发生变化。

    服务器返回ETag标签:
    ETag:"39001d-1762a-50bf790757e00"
 
 

    接下来的访问顺序如下所示:
    1. 浏览器:Hey,我需要jquery.min.js这个文件,有没有不匹配"39001d-1762a-50bf790757e00"这个串的
    2. 服务器:(检查ETag…)
    3. 服务器:Hey,我这里的版本也是"39001d-1762a-50bf790757e00",你已经是最新的版本了
    4. 浏览器:好,那就可以使用本地缓存了
    如同 Last-modified 一样,ETag 解决了文件版本比较的问题。只不过 ETag 的级别比 Last-Modified 高一些。
 
    额外的标签
    缓存标签永远不会停止工作,但是有时候我们需要对已经缓存的内容进行一些控制。
    l  Cache-control: public 表示缓存的版本可以被代理服务器或者其他中间服务器识别。
    l  Cache-control: private 意味着这个文件对不同的用户是不同的。只有用户自己的浏览器能够进行缓存,公共的代理服务器不允许缓存。
    l  Cache-control: no-cache 意味着文件的内容不应当被缓存。这在搜索或者翻页结果中非常有用,因为同样的URL,对应的内容会发生变化。
  
参考文档:http://bbs.qcloud.com/forum.php?mod=viewthread&tid=3775

缓存(CDN缓存,浏览器(客户端)缓存)的更多相关文章

  1. firefox(火狐)和Chrome(google)浏览器清空缓存操作的方法指引

    摘要说明: 1.系统做升级更新,更新了css和js 2.系统更新有,因为缓存问题,有客户反馈新增功能不能使用 3.所以要清空缓存,提供火狐和谷歌浏览器清空缓存的操作指引 4.附:代码层面的清空缓存方案 ...

  2. ABP开发框架前后端开发系列---(15)ABP框架的服务端和客户端缓存的使用

    缓存在一个大型一点的系统里面是必然会涉及到的,合理的使用缓存能够给我们的系统带来更高的响应速度.由于数据提供服务涉及到数据库的相关操作,如果客户端的并发数量超过一定的数量,那么数据库的请求处理则以爆发 ...

  3. 引入『客户端缓存』,Redis6算是把缓存玩明白了…

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 哈喽大家好啊,我是没更新就是在家忙着带娃的Hydra. 在前面介绍两级缓存的文章中,我们总共给出了4种实现方案,在项目中整合了本地缓存Caffe ...

  4. http缓存详解,http缓存推荐方案

    前言 通过本文,你将了解到http缓存机制是怎样的,no-cache到底有没有缓存,地址栏回车,F5,ctrl+F5的区别,以及当下较为推荐的缓存方案等. 自从和前端组的同事一起整了个前端扫盲计划,想 ...

  5. CDN、浏览器缓存

    CDN是什么? 谈到CDN的作用,可以用8年买火车票的经历来形象比喻: 8年前,还没有火车票代售点一说,12306.cn更是无从说起.那时候火车票还只能在火车站的售票大厅购买,而我所住的小县城并不通火 ...

  6. CDN和浏览器缓存

    1,CDN 旨在解决的最重要的问题是什么,我们称之为网络延迟,通过网络获取资源总是比从本地获取慢,无论服务器是在同一个局域网中还是位于世界的另一个角落,都是如此.这里的速度差异是 IT 行业的一个核心 ...

  7. 利用浏览器favicon的缓存机制(F-Cache)生成客户端浏览器唯一指纹

    利用浏览器favicon的缓存机制(F-Cache)生成客户端浏览器唯一指纹 首先介绍下: 这个技术出自 UIC论文:https://www.cs.uic.edu/~polakis/papers/so ...

  8. http 协议_DNS_域名解析 DNS 服务器_内容分发网络 CDN_缓存机制_HTML5 浏览器存储技术_cookie_sessionStorage_localStorage

    TCP/IP 协议族 是按层次去划分的 应用层    决定了向用户提供应用服务时通信的活动. FTP 协议(文件传输协议)DNS(域名协议)HTTP(超文本传输协议) 传输层    提供处于网络连接中 ...

  9. 浏览器HTTP缓存原理分析

    以前项目中遇到了很多浏览器缓存相关的问题,也在网上查过资料,搞过服务器的配置,来确保客户端加载服务器资源的速度和资源有效性.最近仔细看了下http协议中和缓存相关的一些属性,总结一下. 浏览器缓存原理 ...

  10. 客户端缓存(Client Cache)

    通常在服务器端大家都已经做了很多缓存的工作,ASP.NET CACHE也好MemeryCache也好却总是忽略了客户端缓存. 因为大家都知道不管哪个client都会缓存已经访问过的站点,但是浏览器缓存 ...

随机推荐

  1. java使用poi读取ppt文件

    package msoffice; import java.io.File; import java.io.FileInputStream; import java.io.IOException; i ...

  2. Object-C 语法 字符串 数组 字典 和常用函数 学习笔记

    字符串 //取子字符串 NSString *str1=@"今天的猪肉真贵,200块一斤"; NSString *sub1=[str1 substringFromIndex:4]; ...

  3. IOS tableView的基本使用

    tableView  Style:Plain(头部标题 向上移 不会消失) tableView  Style:Grouped(头部标题 向上移 会 消失) #import "ViewCont ...

  4. POJ-2139 Six Degrees of Cowvin Bacon---Floyd

    题目链接: https://vjudge.net/problem/POJ-2139 题目大意: 给定一些牛的关系,他们之间的距离为1. 然后求当前这只牛到每只牛的最短路的和,除以 n - 1只牛的最大 ...

  5. 为什么实例没有prototype属性?什么时候对象会有prototype属性呢?

    为什么实例没有prototype属性?什么时候对象会有prototype属性呢? javascript loudou 1月12日提问 关注 9 关注 收藏 6 收藏,554 浏览 问题对人有帮助,内容 ...

  6. HTTP请求与服务器响应流程

    1. HTTP 简介 1.1定义 1.2 请求/响应报文格式 1.3请求方式--GET/POST     状态码 1.4 响应状态 2. HTTP请求,浏览器做了什么, 服务端处理解析过程 1:HTT ...

  7. base64位 解码图片

    jar包是commons-codec.jar. pnuts //base64解码成图片 function gldBase64ToImage(imgStr,imgFilePath) { // 对字节数组 ...

  8. MBProgressHUD 优雅地去提示

    项目主页: MBProgressHUD 实例下载: 点击下载 快速上手: 当执行需要较长时间的任务时,使用MBProgressHUD最重要的一点是: 保证主线程是空闲的,这样可以使UI实时更新.因此: ...

  9. Linux平台下卸载MySQL的方法

    转载自: https://www.cnblogs.com/taomylife/p/7234925.html Linux平台下卸载MySQL的方法: MySQL的安装主要有三种方式:二进制包安装.RPM ...

  10. MySQL中事物的详解

    1. 事物的定义及特性 事务是一组操作数据库的SQL语句组成的工作单元,该工作单元中所有操作要么同时成功,要么同时失败.事物有如下四个特性,ACID简称“酸性”. 1)原子性:工作单元中所有的操作要么 ...