精华内容
下载资源
问答
  • 浏览器缓存策略

    2019-04-06 08:26:18
    浏览器缓存策略 为了提高站点的访问速度,使用缓存来优化。缓存主要分为 强缓存和协商缓存。 协商缓存 主要分为last-modified、etag。下面我主要通过代码修改来表现各个缓存之间的区别。先讨论协商缓存。last-...

    浏览器缓存策略

    为了提高站点的访问速度,使用缓存来优化。缓存主要分为 强缓存和协商缓存。

    协商缓存

    主要分为last-modified、etag。下面我主要通过代码修改来表现各个缓存之间的区别。先讨论协商缓存。last-modified表示文件的修改日期,如果文件做了修改那就应该重新获取文件。last-modified是文件修改后根据服务器的时间生成。

    如果我们修改了文件则会重新获取,status就为200

    再次刷新就会返回304表示缓存已经是最新不需要再更新。 请求中会询问相关文件修改时间(If-Modified-Since)

    请求

    响应

    **ETag:**是一个可以与Web资源关联的记号(token)

    如果文件被替换,就会生成唯一的etag。

    替换前的文件

    替换后的文件

    PS: 如果是使用了多台服务器做负载均衡的话,会出现etag不一致问题。Apache 的默认ETag的值总是由文件的索引节点(Inode)、大小(Size)、最后修改时间(MTime)决定,我们只需要去掉Inode即可

    强缓存

    强缓存相比协商缓存更为彻底,在协商缓存下浏览器不会对服务器发起请求。

    **强缓存:**主要分为expires和cache-control

    Expires: 表示存在时间,允许客户端在这个时间之前不去检查(发请求),等同max-age的 效果。但是如果同时存在,则被Cache-Control的max-age覆盖。 格式: Expires :时间,后面跟一个时间或者日期,超过这个时间后缓存失效。也就是浏览器发出请求之前,会检查这个时间是否失效,若失效,则浏览器会重新发出请求。

    开启apache expires_mod之后,浏览器在第一次将资源请求之后会缓存。

    Cache-Control Cache-Control 在 HTTP 响应头中,用于指示代理和 UA 使用何种缓存策略。比如:

    • no-cache 为本次响应不可直接用于后续请求(在没有向服务器进行校验的情况下)
    • no-store 为禁止缓存(不得存储到非易失性介质,如果有的话尽量移除,用于敏感信息)
    • public为大家都可以缓存。
    • private为仅 UA 可缓存

    cache-control中设置max-age 为最长的缓存时间。在该时间内则使用缓存。

    设置为no-cache之后则不会再进行缓存。

    题外话

    在使用apache对浏览器缓存进行测试过程中发现。在不设置 cache-control的情况下,浏览器会根据自身的情况去取舍相关的缓存,可以从这查看。如果大家在服务器配置过程中发现,自己没有配置任何的缓存信息但是浏览器却缓存了资源就不用惊讶。

    转载于:https://juejin.im/post/5ca8628951882543e4507c56

    展开全文
  • 浏览器缓存策略 浏览器缓存策略 Httpwatch Httpwatch
  • 前端本地缓存概况之浏览器缓存策略
    展开全文
  • 浅谈浏览器缓存策略

    2018-02-27 19:41:00
    浅谈浏览器缓存策略 浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档。 缓存的种类 当某个资源是第一次加载时,它的流程图一定是...

    浅谈浏览器缓存策略

    浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档。

    缓存的种类

    当某个资源是第一次加载时,它的流程图一定是这样的:
    1303135-20180525232249793-666959416.png

    浏览器后续再次进行请求时:1303135-20180525232343404-887451239.png

    从上图可以总结出浏览器的两种缓存资源的方式:强缓存和协商缓存。

    1.1 强缓存

    浏览器请求某一资源时,先根据header中的Cache-ControlExpires来判断是否过期。若没过期则直接从缓存中获取资源信息,包括缓存的header的信息,所以此次请求不会与服务器进行通信。

    1.2 协商缓存

    如果没有命中强缓存,浏览器会发送请求到服务器,请求会携带第一次请求返回的有关缓存的header字段信息(Last-Modified/If-Modified-SinceEtag/If-None-Match),由服务器根据请求中的相关header信息来比对结果是否协商缓存命中;若命中,则服务器返回新的响应header信息更新缓存中的对应header信息,但是并不返回资源内容,它会告知浏览器可以直接从缓存获取;否则返回最新的资源内容

    强缓存与协商缓存的区别,可以用下表来进行描述:

    1303135-20180525232419691-119281719.png

    2.强缓存相关的header字段

    2.1 expires

    这是http1.0时的规范。它的值为一个绝对时间的GMT格式的时间字符串,如:

    expires: Mon, 10 Jun 2015 21:31:12 GMT

    如果发送请求的时间在expires之前,那么本地缓存始终有效,否则就会发送请求到服务器来获取资源。

    2.2 cache-control

    这是http1.1时出现的header信息,主要是利用该字段的max-age值来进行判断,它是一个相对值;

    Cache-Control: max-age=600

    表示文件在本地应该缓存,且有效时长是600秒(从发出请求算起)。在接下来600秒内,如果有请求这个资源,浏览器不会发出HTTP请求,而是直接使用本地缓存的文件。

    cache-control除了该字段外,还有下面几个比较常用的设置值:

    • no-cache: 不使用本地缓存。需要使用缓存协商,先与服务器确认返回的响应是否被更改,如果之前的响应中存在ETag,那么请求的时候会与服务端验证,如果资源未被更改,则可以避免重新下载。

    • no-store:直接禁止游览器缓存数据,每次用户请求该资源,都会向服务器发送一个请求,每次都会下载完整的资源。

    • public:可以被所有的用户缓存,包括终端用户和CDN等中间代理服务器。

    • private:只能被终端用户的浏览器缓存,不允许CDN等中继缓存服务器对其缓存。

    注意:如果cache-control与expires同时存在的话,cache-control的优先级高于expires

    3. 协商缓存相关的header字段

    协商缓存就是由服务器来确定缓存资源是否可用,所以客户端与服务器端要通过某种标识来进行通信,从而让服务器判断请求资源是否可以缓存访问。

    3.1 Etag/If-None-Match
    Etag/If-None-Match返回的是一个校验码。ETag可以保证每一个资源是唯一的,资源变化都会导致ETag变化。服务器根据浏览器上送的If-None-Match值来判断是否命中缓存。

    与Last-Modified不一样的是,当服务器返回304 Not Modified的响应时,由于ETag重新生成过,response header中还会把这个ETag返回,即使这个ETag跟之前的没有变化。

    3.2 Last-Modify/If-Modify-Since

    浏览器第一次请求一个资源的时候,服务器返回的header中会加上Last-Modify,Last-modify是一个时间标识该资源的最后修改时间,例如Last-Modify: Thu,31 Dec 2037 23:59:59 GMT。

    当浏览器再次请求该资源时,request的请求头中会包含If-Modify-Since,该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后,根据资源的最后修改时间判断是否命中缓存。

    如果命中缓存,则返回304,并且不会返回资源内容,并且不会返回Last-Modify。

    4. 既生Last-Modified何生Etag

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

    • 一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新GET;

    • 某些文件修改非常频繁,比如在秒以下的时间内进行修改,(比方说1s内修改了N次),If-Modified-Since能检查到的粒度是s级的,这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);

    • 某些服务器不能精确的得到文件的最后修改时间。

    这时,利用Etag能够更加准确的控制缓存,因为Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符。

    Last-Modified与ETag是可以一起使用的,服务器会优先验证ETag,一致的情况下,才会继续比对Last-Modified,最后才决定是否返回304。

    5. 用户的行为对缓存的影响

    1303135-20180525232434909-458880744.png

    6. 强缓存如何重新加载缓存缓存过的资源

    上面说到,使用强缓存时,浏览器不会发送请求到服务端,根据设置的缓存时间浏览器一直从缓存中获取资源,在这期间若资源产生了变化,浏览器就在缓存期内就一直得不到最新的资源,那么如何防止这种事情发生呢?

    通过更新页面中引用的资源路径,让浏览器主动放弃缓存,加载新资源。

    7. 参考

    1. http协商缓存VS强缓存
    2. HTTP强缓存和协商缓存

    转载于:https://www.cnblogs.com/gaollard/p/8480576.html

    展开全文
  • 作者:kevinylzhao,腾讯音乐前端开发工程师浏览器缓存策略对于前端开发同学来说不陌生,大家都有一定的了解,但如果没有系统的归纳总结,可能三言两语很难说明白,甚至说错,尤其在面试过...

    作者:kevinylzhao,腾讯音乐前端开发工程师

    浏览器缓存策略对于前端开发同学来说不陌生,大家都有一定的了解,但如果没有系统的归纳总结,可能三言两语很难说明白,甚至说错,尤其在面试过程中感触颇深,很多候选人对这类基础知识竟然都是一知半解,说出几个概念就没了,所以重新归纳总结下,温故而知新。

    Web 缓存介绍

    • Web 缓存是指一个 Web 资源(如 html 页面,图片,js,数据等)存在于 Web 服务器和客户端(浏览器)之间的副本。

    • 缓存会根据进来的请求保存输出内容的副本;当下一个请求来到的时候,如果是相同的 URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。

    Web 缓存的好处

    • 减少网络延迟,加快页面打开速度

    • 减少网络带宽消耗

    • 降低服务器压力

    • ...

    HTTP 的缓存机制

    简化的流程如下

    根据什么规则缓存

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

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

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

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

    HTTP 缓存的两个阶段

    浏览器缓存一般分为两类:强缓存(也称本地缓存)和协商缓存(也称弱缓存)。

    本地缓存阶段

    浏览器发送请求前,会先去缓存里查看是否命中强缓存,如果命中,则直接从缓存中读取资源,不会发送请求到服务器。否则,进入下一步。

    协商缓存阶段

    当强缓存没有命中时,浏览器一定会向服务器发起请求。服务器会根据 Request Header 中的一些字段来判断是否命中协商缓存。如果命中,服务器会返回 304 响应,但是不会携带任何响应实体,只是告诉浏览器可以直接从浏览器缓存中获取这个资源。如果本地缓存和协商缓存都没有命中,则从直接从服务器加载资源。

    启用&关闭缓存

    按照本地缓存阶段和协商缓存阶段分类:

    1. 使用 HTML Meta 标签    Web 开发者可以在 HTML 页面的节点中加入标签,如下:

    上述代码的作用是告诉浏览器当前页面不被缓存,事实上这种禁用缓存的形式用处很有限:

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

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

    1. 使用缓存有关的 HTTP 消息报头 这里需要了解 HTTP 的基础知识。一个 URI 的完整 HTTP 协议交互过程是由 HTTP 请求和 HTTP 响应组成的。有关 HTTP 详细内容可参考《Hypertext Transfer Protocol — HTTP/1.1》、《HTTP 权威指南》等。

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

    上图中只是常用的消息报头,下面来看下不同字段之间的关系和区别:

    1. Cache-Control 与 Expires

    • Cache-Control:HTTP1.1 提出的特性,为了弥补 Expires 缺陷加入的,提供了更精确细致的缓存功能。详细了解详细看几个常见的指令:_ max-age:功能和 Expires 类似,但是后面跟一个以“秒”为单位的相对时间,来供浏览器计算过期时间。_ no-cache:提供了过期验证机制。(在 Chrome 的 devtools 中勾选 Disable cache 选项,发送的请求会去掉 If-Modified-Since 这个 Header。同时设置 Cache-Control:no-cache Pragma:no-cache,每次请求均为 200) 

      • no-store:表示当前请求资源禁用缓存;

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

      • private:表示只有用户自己的浏览器能够进行缓存,公共的代理服务器不允许缓存。

    • Expires:HTTP1.0 的特性,标识该资源过期的时间点,它是一个绝对值,格林威治时间(Greenwich Mean Time, GMT),即在这个时间点之后,缓存的资源过期;优先级:Cache-Control 优先级高于 Expires,为了兼容,通常两个头部同时设置;浏览器默认行为:其实就算 Response Header 中沒有设置 Cache-Control 和 Expires,浏览器仍然会缓存某些资源,这是浏览器的默认行为,是为了提升性能进行的优化,每个浏览器的行为可能不一致,有些浏览器甚至没有这样的优化。

    1. Last-Modified 与 ETag

    • Last-Modified(Response Header)与 If-Modified-Since(Request Header)是一对报文头,属于 http 1.0。

      If-Modified-Since 是一个请求首部字段,并且只能用在 GET 或者 HEAD 请求中。Last-Modified 是一个响应首部字段,包含服务器认定的资源作出修改的日期及时间。当带着 If-Modified-Since 头访问服务器请求资源时,服务器会检查 Last-Modified,如果 Last-Modified 的时间早于或等于 If-Modified-Since 则会返回一个不带主体的 304 响应,否则将重新返回资源。

      (注意:在 Chrome 的 devtools 中勾选 Disable cache 选项后,发送的请求会去掉 If-Modified-Since 这个 Header。)

    • ETag 与 If-None-Match 是一对报文头,属于 http 1.1。

      ETag 是一个响应首部字段,它是根据实体内容生成的一段 hash 字符串,标识资源的状态,由服务端产生。If-None-Match 是一个条件式的请求首部。如果请求资源时在请求首部加上这个字段,值为之前服务器端返回的资源上的 ETag,则当且仅当服务器上没有任何资源的 ETag 属性值与这个首部中列出的时候,服务器才会返回带有所请求资源实体的 200 响应,否则服务器会返回不带实体的 304 响应。

    • ETag 能解决什么问题?

    a. Last-Modified 标注的最后修改只能精确到秒级,如果某些文件在 1 秒钟以内,被修改多次的话,它将不能准确标注文件的新鲜度;

    b. 某些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),但 Last-Modified 却改变了,导致文件没法使用缓存;

    c. 有可能存在服务器没有准确获取文件修改时间,或者与代理服务器时间不一致等情形。

    • 优先级:ETag 优先级比 Last-Modified 高,同时存在时会以 ETag 为准。

    缓存位置

    浏览器可以在内存、硬盘中开辟一个空间用于保存请求资源副本。我们经常调试时在 DevTools Network 里看到 Memory Cache(內存缓存)和 Disk Cache(硬盘缓存),指的就是缓存所在的位置。请求一个资源时,会按照优先级(Service Worker -> Memory Cache -> Disk Cache -> Push Cache)依次查找缓存,如果命中则使用缓存,否则发起请求。这里先介绍 Memory Cache 和 Disk Cache。

    200 from memory cache

    表示不访问服务器,直接从内存中读取缓存。因为缓存的资源保存在内存中,所以读取速度较快,但是关闭进程后,缓存资源也会随之销毁,一般来说,系统不会给内存分配较大的容量,因此内存缓存一般用于存储较小文件。同时内存缓存在有时效性要求的场景下也很有用(比如浏览器的隐私模式)。

    200 from disk cache

    表示不访问服务器,直接从硬盘中读取缓存。与内存相比,硬盘的读取速度相对较慢,但硬盘缓存持续的时间更长,关闭进程之后,缓存的资源仍然存在。由于硬盘的容量较大,因此一般用于存储大文件。

    下图可清晰看出差别:

    200 from prefetch cache

    在 preload 或 prefetch 的资源加载时,两者也是均存储在 http cache,当资源加载完成后,如果资源是可以被缓存的,那么其被存储在 http cache 中等待后续使用;如果资源不可被缓存,那么其在被使用前均存储在 memory cache。

    CDN Cache

    以腾讯 CDN 为例:X-Cache-Lookup:Hit From MemCache 表示命中 CDN 节点的内存;X-Cache-Lookup:Hit From Disktank 表示命中 CDN 节点的磁盘;X-Cache-Lookup:Hit From Upstream 表示没有命中 CDN。

    整体流程

    从上图能感受到整个流程,比如常见两种刷新场景:

    • 当 F5 刷新网页时,跳过强缓存,但是会检查协商缓存;

    • 当 Ctrl + F5 强制刷新页面时,直接从服务器加载,跳过强缓存和协商缓存

    其他 Web 缓存策略

    IndexDB

    IndexedDB 就是浏览器提供的本地数据库,能够在客户端存储可观数量的结构化数据,并且在这些数据上使用索引进行高性能检索的 API。

    异步 API 方法调用完后会立即返回,而不会阻塞调用线程。要异步访问数据库,要调用 window 对象 indexedDB 属性的 open() 方法。该方法返回一个 IDBRequest 对象 (IDBOpenDBRequest);异步操作通过在 IDBRequest 对象上触发事件来和调用程序进行通信。

    常用异步 API 如下:

    在 16 年曾基于 IndexDB 做过一整套缓存策略,有不错的优化效果:

    Service Worker

    SW 从 2014 年提出的草案到现在已经发展很成熟了,基于 SW 做离线缓存,让用户能够进行离线体验,消息推送体验,离线缓存能力涉及到 Cache 和 CacheStorage 的概念,篇幅有限,不展开了。

    LocalStorage

    localStorage 属性允许你访问一个 Document 源(origin)的对象 Storage 用于存储当前源的数据,除非用户人为清除(调用 localStorage api 或则清除浏览器数据), 否则存储在 localStorage 的数据将被长期保留。

    SessionStorage

    sessionStorage 属性允许你访问一个 session Storage 对象,用于存储当前会话的数据,存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。

    定义最优缓存策略

    • 使用一致的网址:如果您在不同的网址上提供相同的内容,将会多次获取和存储该内容。注意:URL 区分大小写!

    • 确定中继缓存可以缓存哪些资源:对所有用户的响应完全相同的资源很适合由 CDN 或其他中继缓存进行缓存;

    • 确定每个资源的最优缓存周期:不同的资源可能有不同的更新要求。审查并确定每个资源适合的 max-age;

    • 确定网站的最佳缓存层级:对 HTML 文档组合使用包含内容特征码的资源网址以及短时间或 no-cache 的生命周期,可以控制客户端获取更新的速度;

    • 更新最小化:有些资源的更新比其他资源频繁。如果资源的特定部分(例如 JS 函数或一组 CSS 样式)会经常更新,应考虑将其代码作为单独的文件提供。这样,每次获取更新时,剩余内容(例如不会频繁更新的库代码)可以从缓存中获取,确保下载的内容量最少;

    • 确保服务器配置或移除 ETag:因为 Etag 跟服务器配置有关,每台服务器的 Etag 都是不同的;

    • 善用 HTML5 的缓存机制:合理设计启用 LocalStorage、SessionStorage、IndexDB、SW 等存储,会给页面性能带来明显提升;

    • 结合 Native 的强大存储能力:善于利用客户端能力,定制合适的缓存机制,打造极致体验。

    结语

    通过了解浏览器各种缓存机制和存储能力特点,结合业务制定合适的缓存策略,善用缓存是基本功,可以用于时常审查负责的业务,可能就会发现个别业务并没有运用到位,共勉。

    参考资料

    • https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9

    • https://www.digitalocean.com/community/tutorials/web-caching-basics-terminology-http-headers-and-caching-strategies

    • https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=en

    • https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching_FAQ

    • https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

    • https://juejin.im/post/5a673af06fb9a01c927ed880

    • https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn

    展开全文
  • 答案是不会,为了提高页面性能,浏览器提供了缓存策略。 什么是浏览器缓存 ? 浏览器每次发起请求时,先在本地缓存中查找结果已经缓存标识,根据缓存标识来判断是否使用本地缓存。如果缓存有效,则使用本地缓存...
  • 2、浏览器缓存策略

    2021-03-08 19:22:03
    文章目录缓存策略Doctype强缓存和协商缓存1.强缓存(Cache-control)2. 协商缓存(Last-Modifined)缓存:cookie、session、webStorage1. cookie,sessionStorage和localStorage2. cookie和session总结:多个标签页...
  • 前端浏览器缓存策略

    2020-11-14 17:48:13
    通常浏览器缓存策略分为两种:强缓存和协商缓存,并且缓存策略都是通过设置 HTTP Header 来实现的 强缓存 强缓存可以通过设置两种 HTTP Header 实现:Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求...
  • 资源的首次请求: 页面刷新-资源缓存未过期: 页面刷新-资源缓存已过期-...缓存策略浏览器请求资源文件时,默认会将源资文件缓存到本地以便重复使用,加快网页的加载速度。 浏览器的资源缓存分为 from disk ...
  • 编者按:本文作者:林向东,360 奇舞团Web前端开发工程师浏览器通过请求头实现缓存,关键的请求头有 cache-control,expires,last-Modified,ETag 等...
  • 其实之前一篇《WebView缓存原理分析和应用》学习笔记,其中已经提到了浏览器缓存机制是“通过 HTTP 协议 header 里的Cache-Control(或Expires)和Last-Modified(或Etag)等字段来控制文件缓存的机制”。...
  • 浏览器缓存策略-强缓存 Cache-control pubric表示响应可以被客户端和代理服务器缓存- private表示响应只可以被客户端缓存 max-age=3缓存30秒后过期,需要重新请求 s-maxage=30覆盖max-age,作用一样,只在代理...
  • 浏览器缓存机制介绍与缓存策略剖析.pptx
  • 前端性能优化之浏览器缓存机制与缓存策略 浏览器缓存是一种简单有效的前端性能优化方式,这次主要谈谈浏览器缓存机制的——HTTP缓存(浏览器缓存机制四种之一: Memery Cache, Service Worker Cache, HTTP Cache, ...
  • 浏览器缓存机制介绍与缓存策略剖析 缓存可以减少网络 IO 消耗,提高访问速度。浏览器缓存是一种操作简单、效果显著的前端性能优化手段。对于这个操作的必要性,Chrome 官方给出的解释似乎更有说服力一些: 通过网络...
  • 通常浏览器缓存策略分为两种:强缓存和协商缓存,并且缓存策略都是通过设置 HTTP Header 来实现的。 强缓存(如果命中就不会去请求服务器,返回状态码200) 如何设置强缓存? 1,设置http头:Cache-Control,以...
  • 浏览器缓存

    2019-09-27 15:01:06
    浏览器缓存 缓存对于前端性能优化来... 通常浏览器缓存策略分为两种:强缓存和协商缓存。 强缓存 实现强缓存可以通过两种响应头实现:Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求,state code 为 20...
  • 浏览器缓存机制

    2021-02-08 23:37:21
    浏览器缓存机制缓存位置Service WorkerMemory Cache...使用浏览器的缓存是性能优化中简单高效的一种优化方式,合理的浏览器缓存策略可以减少浏览器的相应和减少向后端发送请求。 缓存位置 Service Worker Memory Cach
  • 浏览器缓存策略

    2021-03-23 20:49:44
    浏览器检查当前时间,如果还没到失效时间就直接使用缓存文件。但是该方法存在一个问题:服务器时间与客户端时间可能不一致 cache-control中的max-age保存了一个相对时间。例如Cache-Control: max-age = 484200,表示...
  • 关于浏览器缓存

    2021-03-18 13:44:02
    二、浏览器缓存策略: 强缓存与协商缓存 1、强缓存:响应头参数 Expires设置过期时间,在此之前都用缓存,依赖用户本地时间; Cache-control: 配置 no-cache或者 max-age,可设置是否缓存以及过期时间,精确到秒...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 85,213
精华内容 34,085
关键字:

浏览器缓存策略