浏览器的缓存机制

aisuhua 发布于2019-08-06 13:45 / 3209人阅读

摘要：通常浏览器缓存策略分为两种强缓存和协商缓存基本原理浏览器在加载资源时，根据请求头的和判断是否命中强缓存，如果命中则直接从缓存读取资源，不会向服务器发起请求。并且受限于本地时间，如果修改了本地事件，如果修改了本地时间，可能造成缓存失效。

浏览器的缓存机制

在前端开发中，性能一直是一个非常重要的部分，其中一个非常重要的判断标准就是一个网页打开的速度，其中一个提高网页反应速度的非常重要的方式就是利用浏览器的缓存机制，良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度，减少请求的延迟，降低网络负荷。

通常浏览器缓存策略分为两种：强缓存和协商缓存

基本原理

浏览器在加载资源时，根据请求头的Expires 和 cache-control判断是否命中强缓存，如果命中则直接从缓存读取资源，不会向服务器发起请求。

如果强缓存没有命中，浏览器一定会向服务器发起请求，通过last-modefied 和Etag去判断资源是否命中协商缓存，如果命中代表资源没有更新，服务器会返回304，读取缓存中的资源，如果没有命中，则代表资源有更新，服务器会返回200，从服务器加载资源。

强缓存和协商缓存的异同

同：如果两种缓存方式都未命中，则都需要从服务端加载资源

异：强缓存命中不会向服务器发起请求，协商缓存需要向服务器发起请求

强缓存

强缓存通过Expires 和 Cache-Control 两种响应头实现。

1. Expires

Expires: Wed, 22 Oct 2018 08:41:00 GMT

Expires 出现于 HTTP / 1.0 ，表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT 后过期，需要再次请求。并且受限于本地时间，如果修改了本地事件，如果修改了本地时间，可能造成缓存失效。

2. Cache-Control

Cache-Control 出现于 HTTP / 1.1，优先级高于 Expires ,表示的是相对时间。

Cache-Control: max-age=315360000

协商缓存

协商缓存是利用的是【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】来管理的。

1. Last-Modefied & If-Modified-Since

Last-Modefied代表服务器端文件的最后修改时间，当浏览器发起请求时，会向服务端发送If-modefied-Since报头，询问在Last-Modefied之后有没有被修改过。如果没有修改过，则返回304使用缓存，如果修改过，则向服务器请求资源，返回200。

但是如果本地打开缓存文件，会导致Last-Modefied被修改，所以在 HTTP/1.1中引入 Etag.

2. Etag & & If-None-Match

Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。当发送请求是If-None-Match会将上次的Etag发送给服务器进行判断是否有更新，如果有更新，则会请求新的资源。

ETag的优先级比Last-Modified更高

具体为什么要用ETag，主要出于下面几种情况考虑：

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

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

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

如何选择合适的缓存策略

大致的顺序

Cache-Control —— 请求服务器之前

Expires —— 请求服务器之前

If-None-Match (Etag) —— 请求服务器

If-Modified-Since (Last-Modified) —— 请求服务器

协商缓存需要配合强缓存使用，如果不启用强缓存的话，协商缓存根本没有意义

大部分web服务器都默认开启协商缓存，而且是同时启用【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】

超融合服务器服务器托管三级缓存机制 cdn缓存机制 php缓存机制 android缓存机制

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

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

Web缓存相关知识整理

摘要：缓存缓存，也叫网关缓存反向代理缓存。浏览器先向网关发起请求，网关服务器后面对应着一台或多台负载均衡源服务器，会根据它们的负载请求，动态将请求转发到合适的源服务器上。虽然这种架构负载均衡源服务器之间的缓存没法共享，但却拥有更好的处扩展性。一、前言工作上遇到一个这样的需求，一个H5页面在APP端，如果勾选已读状态，则下次打开该链接，会跳过此页面。用到了HTML5 的本地存储 API ...

rickchen 2019-08-06 13:23 评论0 收藏0
H5 缓存机制浅析 - 移动端 Web 加载性能优化

摘要：根据标准，到目前为止，一共有种缓存机制，有些是之前已有，有些是才新加入的。首次请求缓存有效期内请求缓存过期后请求一般浏览器会将缓存记录及缓存文件存在本地文件夹中。腾讯 Bugly 特约作者：贺辉超 1. H5 缓存机制介绍 H5，即 HTML5，是新一代的 HTML 标准，加入很多新的特性。离线存储（也可称为缓存机制）是其中一个非常重要的特性。H5 引入的离线存储，这意味着 web ...

alin 2019-08-06 13:14 评论0 收藏0
H5 缓存机制浅析 - 移动端 Web 加载性能优化

摘要：根据标准，到目前为止，一共有种缓存机制，有些是之前已有，有些是才新加入的。首次请求缓存有效期内请求缓存过期后请求一般浏览器会将缓存记录及缓存文件存在本地文件夹中。腾讯 Bugly 特约作者：贺辉超 1. H5 缓存机制介绍 H5，即 HTML5，是新一代的 HTML 标准，加入很多新的特性。离线存储（也可称为缓存机制）是其中一个非常重要的特性。H5 引入的离线存储，这意味着 web ...

Tangpj 2019-08-02 18:26 评论0 收藏0
浏览器缓存是什么？它的机制又是什么？

摘要：对于浏览器缓存，相信很多开发者对它真的是又爱又恨。那么浏览器缓存究竟是个什么样的神奇玩意呢什么是浏览器缓存简单来说，浏览器缓存就是把一个已经请求过的资源如页面，图片，，数据等拷贝一份副本储存在浏览器中。对于浏览器缓存，相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验，而另一方面有时会因为读取了缓存而展示了错误的东西，而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟...

jsummer 2019-08-06 13:37 评论0 收藏0
浏览器缓存是什么？它的机制又是什么？

摘要：对于浏览器缓存，相信很多开发者对它真的是又爱又恨。那么浏览器缓存究竟是个什么样的神奇玩意呢什么是浏览器缓存简单来说，浏览器缓存就是把一个已经请求过的资源如页面，图片，，数据等拷贝一份副本储存在浏览器中。对于浏览器缓存，相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验，而另一方面有时会因为读取了缓存而展示了错误的东西，而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟...

godruoyi 2019-08-16 13:43 评论0 收藏0
浏览器的缓存机制

摘要：从浏览器角度来看，整个就是一个源服务器，从这个层面来说，浏览器和服务器之间的缓存机制，在这种架构下同样适用。如果命中，则返回，告诉浏览器资源未更新，可使用本地的缓存。缓存类型缓存在宏观上可以分成两类：私有缓存和共享缓存。共享缓存就是那些能被各级代理缓存的缓存。私有缓存就是用户专享的，各级代理不能缓存的缓存。微观上可以分下面几类：浏览器缓存缓存存在的意义就是当用户点击back按...

LeanCloud 2019-08-06 13:41 评论0 收藏0