阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      浏览器缓存原理

      缓存

      http 协议提供了非常强大的缓存机制, 了解这些缓存机制,对提高网站的性能非常有帮助。 本文介绍浏览器和 web 服务器之间如何处理”浏览器缓存”,以及控制缓存的 http header.

      缓存的好处

      • 减少了冗余的数据传输,节省了网费。
      • 减少了服务器的负担, 大大提高了网站的性能
      • 加快了客户端加载网页的速度
      • 如何判断缓存新鲜度
      • web 服务器通过 2 种方式来判断浏览器缓存是否是最新的。

      第一种, 浏览器把缓存文件的最后修改时间通过 header ”if-modified-since“来告诉 web 服务器。

      第二种, 浏览器把缓存文件的 etag, 通过 header “if-none-match”, 来告诉 web 服务器。

      通过最后修改时间,来判断缓存新鲜度

      • 浏览器客户端想请求一个文档, 首先检查本地缓存,发现存在这个文档的缓存, 获取缓存中文档的最后修改时间,通过: if-modified-since, 发送 request 给 web 服务器。
      • web 服务器收到 request,将服务器的文档修改时间(last-modified): 跟 request header 中的,if-modified-since 相比较, 如果时间是一样的, 说明缓存还是最新的, web 服务器将发送 304 not modified 给浏览器客户端, 告诉客户端直接使用缓存里的版本。如下图。

      假如该文档已经被更新了。web 服务器将发送该文档的最新版本给浏览器客户端, 如下图。

      与缓存有关的 header

      request

      • cache-control: max-age=0 以秒为单位
      • if-modified-since: mon, 19 nov 2012 08:38:01 gmt 缓存文件的最后修改时间。
      • if-none-match: “0693f67a67cc1:0” 缓存文件的 etag 值
      • cache-control: no-cache 不使用缓存
      • pragma: no-cache 不使用缓存

      response

      • cache-control: public 响应被缓存,并且在多用户间共享, (公有缓存和私有缓存的区别,请看另一节)
      • cache-control: private 响应只能作为私有缓存,不能在用户之间共享
      • cache-control:no-cache 提醒浏览器要从服务器提取文档进行验证
      • cache-control:no-store 绝对禁止缓存(用于机密,敏感文件)
      • cache-control: max-age=60 60 秒之后缓存过期(相对时间)
      • date: mon, 19 nov 2012 08:39:00 gmt 当前 response 发送的时间
      • expires: mon, 19 nov 2012 08:40:01 gmt 缓存过期的时间(绝对时间)
      • last-modified: mon, 19 nov 2012 08:38:01 gmt 服务器端文件的最后修改时间
      • etag: “20b1add7ec1cd1:0” 服务器端文件的 etag 值

      如果同时存在 cache-control 和 expires 怎么办呢? 浏览器总是优先使用 cache-control,如果没有 cache-control 才考虑 expires

      etag

      etag 是实体标签(entity tag)的缩写, 根据实体内容生成的一段 hash 字符串(类似于 md5 或者 sha1 之后的结果),可以标识资源的状态。 当资源发送改变时,etag 也随之发生变化。

      etag 是 web 服务端产生的,然后发给浏览器客户端。浏览器客户端是不用关心 etag 是如何产生的。

      为什么使用 etag 呢? 主要是为了解决 last-modified 无法解决的一些问题。

      • 某些服务器不能精确得到文件的最后修改时间, 这样就无法通过最后修改时间来判断文件是否更新了。
      • 某些文件的修改非常频繁,在秒以下的时间内进行修改。last-modified 只能精确到秒。
      • 一些文件的最后修改时间改变了,但是内容并未改变。 我们不希望客户端认为这个文件修改了。

      浏览器不使用缓存

      ctrl+f5 强制刷新浏览器,或者设置 ie。 可以让浏览器不使用缓存。

      • 浏览器发送 http request, 给 web 服务器, header 中带有 cache-control: no-cache. 明确告诉 web 服务器,客户端不使用缓存。
      • web 服务器将把最新的文档发送给浏览器客户端。

      pragma: no-cache 的作用和 cache-control: no-cache 一模一样。 都是不使用缓存。

      pragma: no-cache 是 http 1.0 中定义的, 所以为了兼容 http 1.0. 所以会同时使用 pragma: no-cache 和 cache-control: no-cache

      直接使用缓存,不去服务器验证

      按 f5 刷新浏览器和在地址栏里输入网址然后回车。 这两个行为是不一样的。

      按 f5 刷新浏览器, 浏览器会去 web 服务器验证缓存。

      如果是在地址栏输入网址然后回车,浏览器会”直接使用有效的缓存”, 而不会发 http request 去服务器验证缓存,这种情况叫做缓存命中,如下图

      目录
      目录