精华内容
下载资源
问答
  • 什么是前端缓存
    2019-10-22 18:43:45

    大家在日常的开发工作过程中,有没有遇到过下面几种情况:

    • 部署/发布前端工程后,增加的功能或修改的bug没有生效
    • 测试同学测试功能时经常暴力地清除所有浏览器缓存
    • 前端开发同学经常说:你“强刷”一下就好了

    遇到上面这些情况,大部分同学就知道了,这是前端有缓存的原因,那具体什么是前端缓存呢,前端缓存仅仅和前端有关系吗?

    前端缓存 / 浏览器缓存

    前端缓存,是浏览器为了提升网站的加载性能,缩短用户等待时间而采取的措施,浏览器总是想尽量少地向服务器发送请求,能够从自己保存的副本中得到的,就不去麻烦服务器了,毕竟自己动手丰衣足食嘛,所以更准确的叫法应该为浏览器缓存,下文中如果出现缓存等字眼,指的就是前端缓存浏览器缓存

    由上所述,缓存对于用户来说是友好的,而且对大多数用户透明的,普通用户可能最多只是感觉再次进入一个网站时速度变快了而已,再进一步可能某些用户发现一些静态页面断网后还能被访问。但是对于开发同学就需要对缓存有所了解,并在发布新版时特别注意。

    缓存机制

    那缓存是具体是什么呢?我们可以将其理解为我们下载到硬盘的文件,比如说老师为我们制作了一份课件,我们将其下载放在了硬盘中,那之后我们什么时候想看,只需要到这份课件保存的文件夹内,将其打开就好了,而不必再次下载了。但是有一天老师发现了课件里面有一些问题,那老师为了不误导我们肯定想要修正这些问题,修正过后呢,老师在上课的时候就告诉我们“同学们,你们上次下载的课件有些问题,我已经改了,你们再重新下载一下,之前那份就不要看了”。那我们回去之后就重新下载老师修改过后的课件,之前的课件就再也不需要看了。

    明白了上面的例子,其实也就明白了缓存的机制,对应于缓存,工作流程应该是这样的:

    用户小U使用浏览器小B访问了一个页面P,浏览器将页面P和其中包含的资源文件(一般包含css、js、图片等文件)保存下来了,一段时间内呢小B反复访问页面P,小B都会从自己的存储区取出相应文件为小U渲染出同样的页面P。然后有一天页面P更新了,比如说主题变了或者里面的按钮功能变化了,当小B再次访问页面P时,它知道自己之前保存的页面P的资源文件已经过时了,然后就再次访问一下页面P,再将页面P和其中包含的资源文件保存下来,之前保存的页面P和其中包含的资源文件就没用了。

    那上面两个流程是不是都有个重新下载的过程,那重要的就是如果感知到资源的变化。第一个例子中是老师通知同学们资源变化了,第二个例子就没有上面说的那么简单了,没人主动告诉小B它缓存的资源已经过时了,那小B是通过什么方式才能知道自己缓存的资源已经过时了呢:

    缓存的状态

    状态备注
    无缓存初次见面,第一次进入某个页面
    缓存过时/非法重逢不识君,进入过某个页面,并有对应缓存,但再次进入时可能已经过时了
    缓存合法归来仍是少年,进入过某个页面,并有对应缓存,再次进入时仍然是有效的

    而缓存状态的变化,需要浏览器和服务器之间达成某些协议,这些协议由HTTP头部确定及执行,这里我们介绍最常用的:

    缓存头部

    • Cache-Control
    • Etag及If-None-Match夫妇
    • Last-Modified及If-Modified-Since夫妇

    Cache-Control

    Cache-Control的语法及使用姿势众多,刚兴趣的可直接到MDN查看,这里我们只介绍它在响应头中用于告知浏览器如何进行缓存行为:

    Response Headers
      Cache-Control: public, max-age=31536000
    

    上面的响应头中Cache-Control: public, max-age=31536000告知浏览器从当前请求的时间点开始,再次请求此资源如果还未超过31536000秒(1年),你就就不必问我了,放心地使用你本地保存的就好了。但是这就有个问题了,如果一年内的某天,此资源变化了,浏览器该如何知道呢?很遗憾,这种情况下浏览器在1年内是不会再知道了。

    所以如果web server想要对资源设置诸如Cache-Control: public, max-age=31536000响应头,一般需要前端搭配文件名hash来使用,这在各种构建工具或脚手架中一般都有相应的配置,如webpack配置:

    // webpack
    module.exports = {
      // ...
      output: {
        filename: '[name].[contenthash].js',
        // filename: '[name].[hash].js',
        // ...
      },
      optimization: {
        moduleIds: 'hashed',
        // ...
      },
      // ...
    }
    

    适用资源:基本所有的资源型文件(如js、css、图片、字体文件等)。

    设置为1年没有什么其他含义,只是一个较大的时间区间而已。


    当我们按照上面方式配置完成后,满心欢喜的去发布新版了,可是部署完成后再次访问,尴尬了,没有变化?这就要注意了,缓存对于html文件也是生效的,我知道这很显而易见,但是很多人容易忽略。

    特别是对于单页面应用来说,我们一般只有一个index.html,在index.html中引入其他js、css等资源文件,上面的步骤只是对于index.html中引入的资源文件名中添加了hash,保证发布新版后这些引入的资源文件在浏览器缓存中不存在,但是如果浏览器取得index.html是通过本地缓存得到的呢?

    <!-- 缓存内index.html -->
    <link rel="stylesheet" href="index.v1.css" />
    <script src="index.v1.js"></script>
    
    <!-- 新版的index.html -->
    <link rel="stylesheet" href="index.v2.css" />
    <script src="index.v2.js"></script>
    

    这里为了方便,我们使用v1、v2等代指hash

    很显然,如果浏览器从缓存中获取index.html,然后肯定会尝试获取index.v1.cssindex.v1.js,而这两个文件再缓存中也是存在的且是合法的(假设还在1年内),那自然用户看到的页面及功能都是老的了。那我们应该如何为html文件设置缓存策略呢?

    我们可以在web server的配置中针对html文件设置Cache-Control: no-cache,当我们请求html文件时,响应头会包含:

    Response Headers
      Cache-Control: no-cache
    

    要特别注意no-cache(允许缓存,但是使用前要向服务器确定缓存是否合法,确定方案下面会讲到)和no-store(不允许缓存)的区别。

    这样的话,当我们发布新版后,浏览器请求index.html发现有缓存,但并不会无脑的使用,而是会向服务器确认一下当前的缓存是否合法,如果合法则直接使用缓存内的版本,否则会向服务器请求最新的index.html,之后我们的index.v2.cssindex.v2.js就能够被正确获取,用户就能够看到新的页面了。

    ETag及If-None-Match

    ETag被称为实体标签或版本标识符,ETag变化代表资源的变化。

    上面说道,浏览器有时需要向服务器确定缓存是否合法,那通过ETag响应头部和If-None-Match请求头部就能够确定,大致过程如下:

    1. 首次请求index.html,服务器响应头部中包含ETag: W/"v1"首部
    2. 浏览器缓存index.html,再次请求index.html时,请求头部包含If-None-Match: W/"v1"
    3. 服务器确定index.html是否有变化,如果没有变化,则状态码返回304,并且没有响应体,浏览器将使用本地缓存;如果有变化,则状态码返回200,将新的index.html传给浏览器,并返回新的ETag: W/"v2"首部
    4. 重复2、3

    v1、v2只是为了标识出ETag的变化,实际上生成ETag的算法也不唯一,甚至简单地使用版本号也可以。关于ETag详细信息可参阅MDN

    Last-Modified及If-Modified-Since

    除了ETagIf-None-Match,使用Last-ModifiedIf-Modified-Since组合也能起到类似的效果,大致过程和前组合类似:

    1. 首次请求index.html,服务器响应头部中包含Last-Modified: Wed, 21 Oct 2019 07:28:00 GMT首部
    2. 浏览器缓存index.html,再次请求index.html时,请求头部包含If-Modified-Since: Wed, 21 Oct 2019 07:28:00 GMT
    3. 服务器确定index.html是否有变化(通过资源的最近修改时间和Wed, 21 Oct 2019 07:28:00 GMT对比),如果没有变化,则状态码返回304,并且没有响应体,浏览器将使用本地缓存;如果有变化,则状态码返回200,将新的index.html传给浏览器,并返回新的Last-Modified: Wed, 22 Oct 2019 09:32:00 GMT首部
    4. 重复2、3

    Last-ModifiedIf-Modified-Since组合准确度不如ETagIf-None-Match组合,所以不太推荐使用:

    • 有些服务器无法正确地判断资源的最近修改日期
    • 如果资源的变化周期在秒级以下,只能精确到秒的修改日期就不那么精确了

    确定缓存是否合法,也会发请求和服务器端通信,但如果缓存有效,服务器发回的响应中是不包含响应体的,这样流量消耗是很小的,只有头部的消耗;即使缓存无效,也只是相当于发了一个首次请求而已。

    总结

    综上所述,我们可以在部署前端工程时使用如下方案,保证用户能够享受缓存带来的便利,也能保证不会因为缓存造成更新不生效的问题:

    • 针对大部分资源文件,使用Cache-Control: public, max-age=31536000文件名hash的方案
    • 针对html文件,使用Cache-Control: no-cacheETag方案

    为不同类型资源配置响应头部是web server的工作,请求头部是浏览器的自发工作,文件hash是前端的工作。

    更多相关内容
  • 浏览器缓存什么?它的机制又是什么

    千次阅读 多人点赞 2018-11-16 17:45:28
    那么浏览器缓存究竟是个什么样的神奇玩意呢? 什么是浏览器缓存: 简单来说,浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存...

    对于浏览器缓存,相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验,而另一方面有时会因为读取了缓存而展示了“错误”的东西,而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟是个什么样的神奇玩意呢?

    什么是浏览器缓存:

    简单来说,浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页,当再次访问这个URL地址的时候,如果网页没有更新,就不会再次下载网页,而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新,浏览器才会再次下载网页。

    比如说,在页面请求之后,web资源都被缓存了,在后面的重复请求中,许多资源都是直接从缓存中读取的(from cache),而不是重新去向服务器请求。

     

    为什么使用缓存:

    (1)减少网络带宽消耗

      无论对于网站运营者或者用户,带宽都代表着金钱,过多的带宽消耗,只会便宜了网络运营商。当Web缓存副本被使用时,只会产生极小的网络流量,可以有效的降低运营成本。

    (2)降低服务器压力

      给网络资源设定有效期之后,用户可以重复使用本地的缓存,减少对源服务器的请求,间接降低服务器的压力。同时,搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率,也能有效降低服务器的压力。

    (3)减少网络延迟,加快页面打开速度

      带宽对于个人网站运营者来说是十分重要,而对于大型的互联网公司来说,可能有时因为钱多而真的不在乎。那Web缓存还有作用吗?答案是肯定的,对于最终用户,缓存的使用能够明显加快页面打开速度,达到更好的体验。

     

    浏览器端的缓存规则:

      对于浏览器端的缓存来讲,这些规则是在HTTP协议头和HTML页面的Meta标签中定义的。他们分别从新鲜度校验值两个维度来规定浏览器是否可以直接使用缓存中的副本,还是需要去源服务器获取更新的版本。

      新鲜度(过期机制):也就是缓存副本有效期。一个缓存副本必须满足以下条件,浏览器会认为它是有效的,足够新的:

        1. 含有完整的过期时间控制头信息(HTTP协议报头),并且仍在有效期内;

        2. 浏览器已经使用过这个缓存副本,并且在一个会话中已经检查过新鲜度;

      满足以上两个情况的一种,浏览器会直接从缓存中获取副本并渲染。

      校验值(验证机制):服务器返回资源的时候有时在控制头信息带上这个资源的实体标签Etag(Entity Tag),它可以用来作为浏览器再次请求过程的校验标识。如过发现校验标识不匹配,说明资源已经被修改或过期,浏览器需求重新获取资源内容。

     

    浏览器缓存的控制:

      (1)使用HTML Meta 标签

      Web开发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下

    <meta http-equiv="Pragma" content="no-cache">  
    <!- Pragma是http1.0版本中给客户端设定缓存方式之一,具体作用会在后面详细介绍 -->

      上述代码的作用是告诉浏览器当前页面不被缓存,每次访问都需要去服务器拉取。但是!这里有个坑...

      事实上这种禁用缓存的形式用处很有限:

        a. 仅有IE才能识别这段meta标签含义,其它主流浏览器仅识别“Cache-Control: no-store”的meta标签。

        b. 在IE中识别到该meta标签含义,并不一定会在请求字段加上Pragma,但的确会让当前页面每次都发新请求(仅限页面,页面上的资源则不受影响)

      (2)使用缓存有关的HTTP消息报头

      在这里就需要先跟大家介绍一下HTTP的相关知识。一个URI的完整HTTP协议交互过程是由HTTP请求和HTTP响应组成的。有关HTTP详细内容可参考《Hypertext Transfer Protocol — HTTP/1.1》、《HTTP协议详解》等。

      在HTTP请求和响应的消息报头中,常见的与缓存有关的消息报头有:

    规则消息包头值/示例类型作用
    新鲜度Pragmano-cache响应告诉浏览器忽略资源的缓存副本,每次访问都需要去服务器拉取【http1.0中存在的字段,在http1.1已被抛弃,使用Cache-Control替代,但为了做http协议的向下兼容,很多网站依旧会带上这个字段】
     Expires Mon, 15 Aug 2016 03:56:47 GMT响应启用缓存和定义缓存时间。告诉浏览器资源缓存过期时间,如果还没过该时间点则不发请求【http1.0中存在的字段,该字段所定义的缓存时间是相对服务器上的时间而言的,如果客户端上的时间跟服务器上的时间不一致(特别是用户修改了自己电脑的系统时间),那缓存时间可能就没啥意义了。在HTTP 1.1版开始,使用Cache-Control: max-age=秒替代】
      Cache-Controlno-cache 响应告诉浏览器忽略资源的缓存副本,强制每次请求直接发送给服务器,拉取资源,但不是“不缓存”
      no-store响应 强制缓存在任何情况下都不要保留任何副本
       max-age=[秒]响应指明缓存副本的有效时长,从请求时间开始到过期时间之间的秒数
       public响应任何路径的缓存者(本地缓存、代理服务器),可以无条件的缓存改资源
       private响应只针对单个用户或者实体(不同用户、窗口)缓存资源
      Last-ModifiedMon, 15 Aug 2016 03:56:47 GMT响应告诉浏览器这个资源最后的修改时间。服务器将资源传递给客户端时,会将资源最后更改的时间以“Last-Modified: GMT”的形式加在实体首部上一起返回给客户端【只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的修改时间
      If-Modified-SinceMon, 15 Aug 2016 03:56:47 GMT 请求其值为上次响应头的Last-Modified值,再次向web服务器请求时带上头If-Modified-Since。web服务器收到请求后发现有头If-Modified-Since则与被请求资源的最后修改时间进行比对。若最后修改时间较新,说明资源又被改动过,则响应整片资源内容(写在响应消息包体内),包括更新Last-Modified的值,HTTP 200;若最后修改时间较旧,说明资源无新修改,则响应HTTP 304(无需包体,节省浏览),告知浏览器继续使用所保存的cache
    校验值ETag"fd56273325a2114818df4f29a628226d" 响应告诉浏览器当前资源在服务器的唯一标识符(生成规则又服务器决定)
     If-None-Match "fd56273325a2114818df4f29a628226d"请求

    当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etage声明,则再次向web服务器请求时带上头If-None-Match(Etag的值)。web服务器收到请求后发现有头If-None-Match则与被请求资源的相应校验串进行比对,决定返回200或304

     

       在我们对HTTP请求头和响应头的部分字段有了一定的认识之后,我们接下来就来讨论不同字段之间的关系和区别:

      · Cache-Control与Expires

      Cache-Control与Expires的作用一致,都是指明当前资源的有效期,控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多,设置更细致,如果同时设置的话,其优先级高于Expires

      · Last-Modified/ETag与Cache-Control/Expires

      配置Last-Modified/ETag的情况下,浏览器再次访问统一URI的资源,还是会发送请求到服务器询问文件是否已经修改,如果没有,服务器会只发送一个304回给浏览器,告诉浏览器直接从自己本地的缓存取数据;如果修改过那就整个数据重新发给浏览器;

      Cache-Control/Expires则不同,如果检测到本地的缓存还是有效的时间范围内,浏览器直接使用本地副本,不会发送任何请求。两者一起使用时,Cache-Control/Expires的优先级要高于Last-Modified/ETag。即当本地副本根据Cache-Control/Expires发现还在有效期内时,则不会再次发送请求去服务器询问修改时间(Last-Modified)或实体标识(Etag)了。

      一般情况下,使用Cache-Control/Expires会配合Last-Modified/ETag一起使用,因为即使服务器设置缓存时间, 当用户点击“刷新”按钮时,浏览器会忽略缓存继续向服务器发送请求,这时Last-Modified/ETag将能够很好利用304,从而减少响应开销。

       · Last-Modified与ETag

    你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新,为什么还需要Etag(实体标识)呢?HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题:

    1. Last-Modified标注的最后修改只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的新鲜度
    2. 如果某些文件会被定期生成,当有时内容并没有任何变化,但Last-Modified却改变了,导致文件没法使用缓存
    3. 有可能存在服务器没有准确获取文件修改时间,或者与代理服务器时间不一致等情形

    Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符,能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的,服务器会优先验证ETag,一致的情况下,才会继续比对Last-Modified,最后才决定是否返回304。Etag的服务器生成规则和强弱Etag的相关内容可以参考,《互动百科-Etag》和《HTTP Header definition》,这里不再深入。

      注意:

      1. Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符,能够更加准确的控制缓存,但是需要注意的是分布式系统里多台机器间文件的last-modified必须保持一致,以免负载均衡到不同机器导致比对失败,Yahoo建议分布式系统尽量关闭掉Etag(每台机器生成的etag都会不一样,因为除了 last-modified、inode 也很难保持一致)。

       2. Last-Modified/If-Modified-Since要配合Cache-Control使用,Etag/If-None-Match也要配合Cache-Control使用。

     

    浏览器HTTP请求流程:

      第一次请求:

      

      再次请求:

      

     

    用户行为与缓存:

       浏览器缓存行为还有用户的行为有关,具体情况如下:

    用户操作Expires/Cache-ControlLast-Modified/Etag
    地址栏回车有效有效
    页面链接跳转有效有效
    新开窗口有效有效
    前进、后退有效有效
    F5刷新无效(BR重置max-age=0)有效
    Ctrl+F5刷新无效(重置Cache-Control=no-cache)无效(请求头丢弃该选项

    如果想学习Java工程化、高性能及分布式、深入浅出。微服务、Spring,MyBatis,Netty源码分析的朋友可以加Java进阶交流群:895244712 ,有阿里大牛直播讲解技术,以及Java大型互联网技术的视频免费分享给大家。

    不能缓存的请求:

      当然并不是所有请求都能被缓存,无法被浏览器缓存的请求如下:

        1. HTTP信息头中包含Cache-Control:no-cache,pragma:no-cache(HTTP1.0),或Cache-Control:max-age=0等告诉浏览器不用缓存的请求

        2. 需要根据Cookie,认证信息等决定输入内容的动态请求是不能被缓存的

        3. 经过HTTPS安全加密的请求(有人也经过测试发现,ie其实在头部加入Cache-Control:max-age信息,firefox在头部加入Cache-Control:Public之后,能够对HTTPS的资源进行缓存,参考《HTTPS的七个误解》)

        4. POST请求无法被缓存

        5. HTTP响应头中不包含Last-Modified/Etag,也不包含Cache-Control/Expires的请求无法被缓存

     

    展开全文
  • CDN缓存什么?

    千次阅读 2016-11-16 17:57:18
     CDN是Content Delivery Network的简称,即“内容分发网络”的意思。一般我们所说的CDN加速,一般是指网站加速或者用户下载资源加速。  可能这种专业的说,很多朋友不好理解,下面给大家分享一个小编记忆深刻的...

    CDN是什么?

      关于CDN是什么,此前网友详细介绍过。

      CDN是Content Delivery Network的简称,即“内容分发网络”的意思。一般我们所说的CDN加速,一般是指网站加速或者用户下载资源加速。

      可能这种专业的说,很多朋友不好理解,下面给大家分享一个小编记忆深刻的例子。

      举个通俗的例子:

      谈到CDN的作用,可以用8年买火车票的经历来形象比喻:8年前,还没有火车票代售点一说,12306.cn更是无从说起。那时候火车票还只能在火车站的售票大厅购买,而我所住的小县城并不通火车,火车票都要去市里的火车站购买,而从县城到市里,来回就是4个小时车程,简直就是浪费生命。

      后来就好了,小县城里出现了火车票代售点,可以直接在代售点购买火车,方便了不少,全市人民再也不用在一个点苦逼的排队买票了。

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

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

      CDN缓存是什么?

      这里不深究CDN背后高大上的架构,也不讨论CDN如何做到全局流量调度策略,本文着重讨论在有了CDN后,数据是如何被缓存的。缓存是一个到处都存在的用空间换时间的例子。通过使用多余的空间,我们能够获取更快的速度。

      相关技巧:【怎么看网站有没开启CDN 测试网站全国访问速度方法】。

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

    CDN缓存是什么 CDN加速的那些事

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

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

    CDN缓存是什么 CDN加速的那些事

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

    CDN缓存是什么 CDN加速的那些事

      可以看到,在存在CDN的场景下,数据经历了客户端(浏览器)缓存和CDN边缘节点缓存两个阶段,下面分别对这两个阶段的缓存进行详细的剖析

      客户端(浏览器)缓存

      1)客户端缓存的缺点

      客户端缓存减少了的服务器请求,避免了文件重复加载,显著地提升了用户地方。但是当网站发生了更新的时候(如替换了css、js以及图片文件),浏览器本地仍保存着旧版本的文件,从而导致无法预料后果。

      曾几何时,一个页面加载出来,页面各元素位置乱飘,按钮点击失效,前端GG都会习惯性地问一句:“缓存清了没?”,然后Ctrl+F5 ,Everything is OK。但有些时候,如果我们是简单地在浏览器地址栏中敲一个回车,或者是仅仅按F5刷新,问题依然没有解决,你可知道这三种不同的操作方式,决定浏览器不同的刷新缓存策略?

      浏览器如何来确定使用本地文件还是使用服务器上的新文件?下面来介绍几种判断的方法。

      浏览器缓存策略

      Expires

      Expires:Sat, 24 Jan 2015 20:30:54 GMT

    CDN缓存是什么 CDN加速的那些事

      如果http响应报文中设置了Expires,在Expires过期之前,我们就避免了和服务器之间的连接。此时,浏览器无需想浏览器发出请求,只需要自己判断手中的材料是否过期就可以了,完全不需要增加服务器的负担。

      Cache-control: max-age

    CDN缓存是什么 CDN加速的那些事

      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

    CDN缓存是什么 CDN加速的那些事

      这样浏览器就知道他收到的这个文件创建时间,在后续的请求中,浏览器会按照下面的规则进行验证:

      1. 浏览器:Hey,我需要jquery.min.js这个文件,如果是在 Tue, 06 Jan 2015 08:26:32 GMT 之后修改过的,请发给我。

      2. 服务器:(检查文件的修改时间)

      3. 服务器:Hey,这个文件在那个时间之后没有被修改过,你已经有最新的版本了。

      4. 浏览器:太好了,那我就显示给用户了。

      在这种情况下,服务器仅仅返回了一个304的响应头,减少了响应的数据量,提高了响应的速度。

      下图是按F5刷新页面后,页面返回304响应头。

    CDN缓存是什么 CDN加速的那些事

      ETag

      通常情况下,通过修改时间来比较文件是可行的。但是在一些特殊情况,例如服务器的时钟发生了错误,服务器时钟进行修改,夏时制DST到来后服务器时间没有及时更新,这些都会引起通过修改时间比较文件版本的问题。

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

      服务器返回ETag标签:

      ETag:"39001d-1762a-50bf790757e00"

    CDN缓存是什么 CDN加速的那些事

      接下来的访问顺序如下所示:

      1. 浏览器:Hey,我需要jquery.min.js这个文件,有没有不匹配"39001d-1762a-50bf790757e00"这个串的

      2. 服务器:(检查ETag…)

      3. 服务器:Hey,我这里的版本也是"39001d-1762a-50bf790757e00",你已经是最新的版本了

      4. 浏览器:好,那就可以使用本地缓存了

      如同 Last-modified 一样,ETag 解决了文件版本比较的问题。只不过 ETag 的级别比 Last-Modified 高一些。

      额外的标签

      缓存标签永远不会停止工作,但是有时候我们需要对已经缓存的内容进行一些控制。

      Cache-control: public 表示缓存的版本可以被代理服务器或者其他中间服务器识别。

      Cache-control: private 意味着这个文件对不同的用户是不同的。只有用户自己的浏览器能够进行缓存,公共的代理服务器不允许缓存。

      Cache-control: no-cache 意味着文件的内容不应当被缓存。这在搜索或者翻页结果中非常有用,因为同样的URL,对应的内容会发生变化。

    CDN缓存是什么 CDN加速的那些事

      浏览器缓存刷新

      1. 在地址栏中输入网址后按回车或点击转到按钮

      浏览器以最少的请求来获取网页的数据,浏览器会对所有没有过期的内容直接使用本地缓存,从而减少了对浏览器的请求。所以,Expires,max-age标记只对这种方式有效。

      2. 按F5或浏览器刷新按钮

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

      3. 按Ctrl+F5或按Ctrl并点击刷新按钮

      这种方式就是强制刷新,总会发起一个全新的请求,不使用任何缓存。

      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节点上的数据缓存过期,保证客户端在访问时,拉取到最新的数据。

    展开全文
  • cookies和缓存的区别Here you will learn about difference between cookies and cache i.e. cookies vs cache. 在这里,您将了解Cookie和缓存之间的区别,即Cookie与缓存之间的区别。 Both are downloaded to ...

    cookies和缓存的区别

    Here you will learn about difference between cookies and cache i.e. cookies vs cache.

    在这里,您将了解Cookie和缓存之间的区别,即Cookie与缓存之间的区别。

    Both are downloaded to your computer but they have different purposes. Cookies are download to record your previous activities on a particular website. On other hand Cache are used to store the web-pages in memory so when user visits that webpage again then webpage can be loaded from the memory instead of downloading files from web-server again.

    两者都下载到您的计算机上,但它们具有不同的用途。 Cookies被下载以记录您以前在特定网站上的活动。 另一方面,缓存用于将网页存储在内存中,因此当用户再次访问该网页时,可以从内存中加载网页,而不必再次从Web服务器下载文件。

    Cookies和缓存之间的区别 (Difference between Cookies and Cache)

     Cookies                               Cache
    1. What isSmall files downloaded to your computer to track your previous  activity.Files downloaded to your computer memory to store the current version of the webpage so  next time browser doesn’t need to download all the files again from the internet when we visit that webpage again.
    2. AdvantagesLess memory, no extra burden on server, simple to use and implement.Faster access, save time, save data.
    3. SizeCan support as large as 4kb, 50 cookies per domain (per website), can support at least 3000 cookies in total.Depend on the limit set by your internet browser.
    4. DisadvantagesSecurity risk because of its clean plain text. User can disable cookies, User can delete cookies, Track browsing activities.Sometimes websites loaded from cache can be different from the website on internet.
    5. ExpiresExpires after sometime.Kept in the client’s machine until they are removed manually by the user.
    饼干 快取
    1.什么是 将小文件下载到您的计算机以跟踪您以前的活动。 文件已下载到您的计算机内存中以存储网页的当前版本,因此下次我们再次访问该网页时,浏览器无需再次从Internet下载所有文件。
    2.优势 更少的内存,对服务器没有额外的负担,易于使用和实现。 更快的访问,节省时间,保存数据。
    3.尺寸 最多可以支持4kb,每个域(每个网站)50个cookie,总共可以支持至少3000个cookie。 取决于您的Internet浏览器设置的限制。
    4.缺点 由于其纯净的纯文本,因此存在安全风险。 用户可以禁用cookie,用户可以删除cookie,跟踪浏览活动。 有时,从缓存加载的网站可能不同于Internet上的网站。
    5.过期 一段时间后过期。 保留在客户端计算机中,直到用户手动将其删除为止。

    Let’s see these differences in detail.

    让我们详细了解这些差异。

    What is: Cookies (also known as web-cookie, internet cookie or browser cookie) are small files downloaded to your computer. These files are sent from the website that we’re browsing and downloaded by web browser to our computer.

    什么是: Cookies(也称为Web cookie,Internet cookie或浏览器cookie)是下载到您计算机上的小文件。 这些文件从我们正在浏览的网站发送,并通过网络浏览器下载到我们的计算机。

    These small files may have the information like which links you’ve been visited, buttons you clicked, your log in information, or the pages were visited in the past. When we’ll visit that website next time then the website will use that information to track our previous activity on their website. It can also remember the information that previously entered into form fields like name, date, birth detail, credit card number etc.

    这些小文件可能包含以下信息:访问过的链接,单击的按钮,登录信息或过去访问过的页面。 当我们下次访问该网站时,该网站将使用该信息来跟踪我们先前在其网站上的活动。 它还可以记住以前输入到表单字段中的信息,例如姓名,日期,出生详细信息,信用卡号等。

    On other hand, Cache is nothing but some downloaded files in memory which is used by browsers to access web-pages with high speed. When we open a webpage, the pages and all its files are downloaded as browser’s cache in our computer hard drive. When we visits that webpage again, if the resources and dependencies of that web page are still same as our last visit, then browser will fetch that entire webpage or some files of that webpage from the hard drive instead of downloading it from web server, which will increase the speed of accessing that webpage. It will save our time and data too. It holds the resources like files, audio, video and flash files.

    另一方面,缓存只不过是内存中的一些下载文件,浏览器可使用这些文件来高速访问网页。 当我们打开网页时,页面及其所有文件将作为浏览器的缓存下载到我们的计算机硬盘中。 当我们再次访问该网页时,如果该网页的资源和依存关系与上次访问相同,则浏览器将从硬盘驱动器中获取整个网页或该网页的某些文件,而不是从Web服务器下载该网页或将提高访问该网页的速度。 这也将节省我们的时间和数据。 它包含文件,音频,视频和Flash文件等资源。

    Advantages: There are many advantages of cookie like it doesn’t take much memory in our computer and storing the cookies on client-side reduces the burden from the server. Cookies are also easy to use and implement.

    优点 :cookie有很多优点,例如它不需要占用我们计算机中的大量内存,并且在客户端存储cookie可以减轻服务器的负担。 Cookies也易于使用和实现。

    Whereas, Cache improves the browsing experience by increasing the speed of accessing websites. As previously mentioned that if the resources of that particular website are still same then the browser will fetch that website or some files from the computer’s hard drive. Which will save our time and data too.

    而Cache通过提高访问网站的速度来改善浏览体验。 如前所述,如果该特定网站的资源仍然相同,则浏览器将从计算机的硬盘驱动器中获取该网站或某些文件。 这也将节省我们的时间和数据。

    Size: Cookies can be up to 4KB (4096 Bytes) in size, and a website can send 50 cookies on our computer and the number of total cookies can be at least 3000.

    大小: Cookies的最大大小为4KB(4096字节),一个网站可以在我们的计算机上发送50个cookie,并且cookie的总数至少应为3000。

    On other hand, the size of cache depends on the limit set by browser. You can increase the size to store more temporary files using browser’s settings.

    另一方面,缓存的大小取决于浏览器设置的限制。 您可以使用浏览器的设置来增加存储更多临时文件的大小。

    Disadvantages: Cookies exists as plain text on the client machine, so it can be a security risk because anyone can open and tamper with cookies. Anyone can disable and delete cookies in Browser’s setting.

    缺点: Cookies在客户端计算机上以纯文本形式存在,因此存在安全风险,因为任何人都可以打开和篡改Cookies。 任何人都可以在浏览器的设置中禁用和删除Cookie。

    Whereas, the main disadvantage of loading webpage from cache can be different from the website presented on the web-server, because cache may have the results from your visit on that website.

    然而,从缓存加载网页的主要缺点可能与Web服务器上显示的网站有所不同,因为缓存可能会带来您访问该网站的结果。

    Expires: Cookies after a set time and the time of  expiration also depends on the type of cookies.  For example –  session cookie exists only in temporary memory while the user navigates the website.  Web-browsers  normally delete session cookies when user closes the browser. Persistent cookie expires on a set time by its creator.

    过期:经过一定时间设置的Cookie和过期时间也取决于Cookie的类型。 例如,会话cookie仅在用户浏览网站时存在于临时内存中。 当用户关闭浏览器时,网络浏览器通常会删除会话cookie。 永久性Cookie由其创建者在设定的时间到期。

    On other hand, Cache will not expire until  user deletes it by himself  or the memory allocated for cache runs out of memory.

    另一方面,直到用户自己删除高速缓存或为高速缓存分配的内存用完内存后,高速缓存才会过期。

    Comment below if you have queries related to above difference between cookies and cache.

    如果您对以上Cookie和缓存之间的差异有疑问,请在下面评论。

    翻译自: https://www.thecrazyprogrammer.com/2018/02/cookies-vs-cache.html

    cookies和缓存的区别

    展开全文
  • 微信缓存指的是什么

    千次阅读 2021-08-11 07:55:35
    简单讲,微信缓存就是临时...缓存什么?计算机科学里讲的缓存,通常指的是一片存储空间。缓存的出现时为了解决不同介质之间巨大的存储速度差异。因为成本的原因,一些高速的存储介质(比如CPU的寄存器)通常做的容量...
  • 大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的笔记2021前端面试题系列:HTTP请求HTTP缓存控制,此方面内容在我们的工作中常用到, 也是面试官经常提问的问题,希望下面文章对大家有所...
  • 安装好nodejs以后如果不进行相关配置,会存在如下问题:第一个:执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到C:Users用户名...
  • 下载过的文件,百度云管家在后台有进程偷上传,删除C: Users\s你的用户名 S\Appdata\ Roaming\ Baiduyunkernel\ Config\index.s3db这个文件,重新创建一个相同文件,修改属性为只读。这样下次打开网盘管家之后,它...
  • 什么缓存、加载、刷新?

    千次阅读 2018-04-20 15:35:24
    缓存是介于应用程序永久数据存储源之间,目的是为了降低应用程序直接读写永久数据存储源的频率,从而提高运行性能。为什么要加缓存?场景一:【等待】,在向服务器请求新的数据时。我们让用户看到什么?第一种是...
  • 网上的视频教程,可以缓存到手机上,但是不能下载,请问缓存和下载什么区别呢?
  • 清理yum源缓存_缓存是万恶之源

    千次阅读 2020-09-23 09:44:22
    清理yum源缓存The practice of caching is about as effective at lowering latencies and load as it is at introducing nasty correctness problems. It is almost a law of nature that once you introduce a ...
  • 在Android设备中,我们经常会看到与系统或者应用相关的清除功能有:清除数据、清除...清除数据清除缓存 一键清理 清除数据、清除缓存、一键清理的区别 清除数据   清除数据主要是清除用户配置,比如SharedPr...
  • 浏览器缓存之http缓存和service worker

    千次阅读 2020-06-27 14:10:43
    一、什么是浏览器缓存 以往谈起性能优化,大部分时候都是从后端聊起,数据库的设计,缓存的使用等。其实前端在性能优化方面可做的也很多,如:减少http请求数、使用cdn、压缩合并css/js等,浏览器缓存就是把已经...
  • 客户端存储http缓存

    千次阅读 2022-03-23 09:20:51
    什么需要 web 存储呢,也就是客户端存储,我们知道我们现在的项目大多数都是前端负责静态页面的展示,需要请求后端接口获得数据来完成页面的交互,所以这样很依赖后端服务,并且请求速度也是不可控的。 现代web...
  • 什么是缓冲区(buffer),什么缓存(cache)

    万次阅读 多人点赞 2020-11-17 22:31:03
    缓冲区又称为缓存,它是内存空间的一部分。也就是说,在内存空间中预留了一定的存储空间,这些存储空间用来缓冲输入或输出的数据,这部分预留的空间就叫做缓冲区。缓冲区根据其对应的是输入设备还是输出设备,分为...
  • 彻底明白http强缓存和协议缓存

    千次阅读 2020-08-01 18:15:09
    我们整天浏览器打交道,应该都听过强缓存和协议缓存,强缓存和协商缓存(也有叫对比缓存)都是浏览器的缓存策略,需要先明确一点,既然是浏览器的缓存缓存的数据都是存放于客户端的机子上的,只是根据优先级...
  • HTTP系列之:HTTP缓存

    万次阅读 2021-09-01 22:10:56
    为了提高网站的访问速度效率,我们需要设计各种各样的缓存,通过缓存可以避免不必要的额外数据传输请求,从而提升网站的请求速度。对于HTTP协议来说,本身就自带有HTTP缓存。 今天我们就深入探讨一下HTTP中的...
  • 为了提高 DNS 查询效率,并减轻服务器的负荷减少因特网上的 DNS 查询报文数量,在域名服务器中广泛使用了高速缓存,用来存放最近查询过的域名以及从何处获得域名映射信息的记录。 由于名字到地址的绑定并不经常...
  • Web前后端缓存技术Web前后端缓存技术(缓存的主要作用是什么) 一、总结 一句话总结: 加快页面打开速度 减少网络带宽消耗 降低服务器压力 1、在Web应用中,应用缓存的地方有哪些? 主要有浏览器缓存,页面...
  • 程序员口中常说的API是什么意思什么是API?

    万次阅读 多人点赞 2021-03-14 14:23:39
    有一天,研发人员B想要调用软件A的部分功能来用,但是他又不想从头看一遍软件A的源码功能实现过程,怎么办呢? 研发人员A想了一个好主意:我把软件A里你需要的功能打包好,写成一个函数;你按照我说的流程,把这...
  • Memcached缓存介绍

    千次阅读 2019-04-02 10:11:39
    Memcached是一个高性能的服务器内存缓存软件。在早期版本的Memcached使用的是alloc来分配内存,存在内存碎片,在新版本的Memcached采用了Slab Allocator来分配内存。在MC启动时会要求制定一块内存区域,然后会划分为...
  • Cache Buffer 都是缓存,主要区别是什么

    万次阅读 多人点赞 2018-04-02 16:19:49
    链接地址:https://www.zhihu.com/question/26190832作者:知乎用户链接:...不知道为什么这问题突然火了,更新一个一句话总结:cache 是为了弥补高速设备低速设备的鸿沟而引入的中...
  • 服务器缓存(Cache)

    万次阅读 2018-06-21 12:09:14
    服务器缓存工作原理大纲如下:缓存模式 缓存淘汰 缓存击穿 缓存穿透 缓存雪崩缓存模式比较常见的模式有分为两大类: Cache-aside 以及 Cache-as-SoR。其中 Cache-as-SoR(System of Record, 即直接存储数据的DB) 又...
  • 我知道一些在线缓存的音频视频可以通过f12的开发者模式network种找到下载链接或者去缓存目录找已经缓存好的临时文件 但是我遇到一个在线听的音频 听完后缓存目录没找到 network也没有链接给我 请问我应该怎么操作 ...
  • 万维网上作为域名IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。DNS协议运行在UDP协议之上,使用端口号53。 简单的说,通过域名,最终得到该域名对应...
  • web缓存原理分析

    千次阅读 2018-03-22 14:29:18
    什么2月份会停更一个月的博客呢? … 过年是一个原因, ... 上班真的很辛苦, 每天感觉挺累的, 书也好久没有看了, 今天恰逢没有新需求, 项目在提测之际来写下一遍转载的文章, 主要记录一下在各处搜索到的关于web缓存...
  • 安卓SDKAPI是什么意思

    千次阅读 2021-05-13 15:18:19
    安卓SDKAPI是什么意思? 一、SDK SDK就是kit,通俗讲就是工具箱。一系列的工具组合在一起,能实现补全代码。自动错误检查之类的功能,比如点一下run,会调用编译器来自动编译,编译完后悔调用手机或者模拟器来...
  • 群晖NAS非官方入门手册 篇十二:今夜不谈群晖---关于NAS、硬盘数据的学习笔记_NAS存储_什么值得买​post.smzdm.com上文我曾说过准备写一篇群晖NAS缓存方面的教程。在讨论群晖NAS的缓存特性之前,先来看一些说法,...
  • 本文主题:理清浏览器的缓存机制的内部逻辑,并给出避免浏览器缓存的相关解决方案相信很多新手前端发布页面的时候都会遇到一个问题,就是明明页面已经更新了,但是浏览器浏览页面并没有变化,那么如何解决这个问题呢...
  • 浏览器缓存详解

    千次阅读 多人点赞 2021-01-12 18:28:22
    搞懂前端缓存 总的来说: 如果开启了Service Worker首先会从Service Worker中拿 如果新开一个以前打开过的页面缓存会从Disk Cache中拿(前提是命中强缓存) 刷新当前页面时浏览器会根据当前运行环境内存来决定是从 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 76,284
精华内容 30,513
关键字:

下载和缓存是什么意思