专栏首页前端黑板报缓存从入门到放弃

缓存从入门到放弃

什么是缓存?

缓存的定义

缓存就是数据交换的缓冲区(称作Cache),这个概念最初是来自于内存和CPU。当某一硬件要读取数据时,会首先从缓存中查找需要的数据,如果找到了则直接执行,找不到的话则从内存中找。由于缓存的运行速度比内存快得多,故缓存的作用就是帮助硬件更快地运行

web缓存是什么

请求的本质是从客户端发送请求,从获取服务器资源(图片、文件、数据)。

web缓存就是根据请求保存响应内容,当发起下一个相同资源的请求时,直接使用上次保存的内容来响应请求。

web缓存的类型

强缓存

浏览器第一次请求数据时,服务器会将文件的过期时间和文件一起返回给客户端,客户端将二者备份至缓存数据库中。再次请求数据时,客户端将根据文件的过期时间去判断,文件是否过期。文件未过期,则直接使用缓存数据库中文件,文件过期了,则重新从服务器上获取。

Expires

  • Expires是http1.0提出的一个表示资源过期时间的header,它描述的是一个绝对时间,由服务器返回。
  • Expires第二次请求时,将和本地时间比对。

Expires 第一次请求服务器是,响应头会返回一个Expires的文件过期时间。 如下图所示:

Expires 第二次请求,客户端使用本地时间和文件的过期时间进行比对,如果文件未过期则直接使用本地缓存,返回状态码200(from memory cache)或200(from disk cache)。 如下图所示:

Expires Cache-Control

  • Cache-Control: no-cache 必须先与代理服务器确认是否更改,然后在在决定使用缓存还是请求,类似于协商缓存(304)
  • Cache-Control: no-store 才是真正的不缓存数据到本地
  • Cache-Control: public 可以被所有用户缓存(多用户共享),包括终端和CDN等中间代理服务器
  • Cache-Control: private 只能被终端浏览器缓存(而且是私有缓存),不允许中继缓存服务器进行缓存
  • Cache-Control: must-revalidate如果缓存内容失效,请求必须发送服务器进行验证
  • Cache-Control: max-age=s 缓存内容在s秒后失效,仅HTTP1.1可用

max-gae 第一次请求服务器时,响应头会返回一个 max-age,是文件多少时间后过期。 如下图所示:

max-gae 第二次请求,客户端会校验文件是否过期,如果文件未过期则直接使用本地缓存,返回状态码200(from memory cache)或200(from disk cache)。 如下图所示:

协商缓存

浏览器第一次请求数据时,服务器会将缓存标识与数据一起返回给客户端,客户端将二者备份至缓存数据库中。 再次请求数据时,客户端将备份的缓存标识发送给服务器,服务器根据缓存标识进行判断,判断成功后,返回304状态码,通知客户端比较成功,可以使用缓存数据。

Last-Modified/If-Modified-Since

通过文件的最后修改时间判断该不该读取缓存,服务端设置响应头Last-Modified,客户端把上次服务端响应头中的Last-modified值通过if-modified-since 传递给服务端 , 服务端通过比较当前文件的修改时间和上次修改时间(上次传给客户端的值),如果相等那么说明文件修改时间没变也就是没变化。

Last-Modified的一次请求时,服务器返回的响应头里面包含缓存标识Last-Modified

Last-Modified的第二次请求时,请求头包含If-Modified-Since,服务器获取到该缓存标识后,用该标识和文件进行比对。如果缓存文件未过期则返回304状态码,客户端使用缓存问题。如果缓存过期则返回新文件,状态码为200。

Etag / If-None-Match

通过文件的内容来判断该不该读取缓存,服务端通过把文件内容读取出来,通过md5进行base64加密得出hash值,把这个值设置响应头Etag,客户端下一次请求通过if-none-match带过来,服务端再比对当前文件内容加密得出的hash值和上次是否一样,如果一样说明文件内容没有发生改变,这种方式是最准确的方式,但是也是最耗性能。

Etag的一次请求时,服务器返回的响应头里面包含缓存标识Etag

Etag的第二次请求时,请求头包含If-None-Match,服务器获取到该缓存标识后,用该标识和文件进行比对。如果缓存文件未过期则返回304状态码,客户端使用缓存问题。如果缓存过期则返回新文件,状态码为200。

CDN代理服务器缓存

CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。(CDN网络是在用户和服务器之间增加Cache层,如何将用户的请求引导到Cache上获得源服务器的数据,主要是通过接管DNS实现)

  1. 当用户点击网站页面上的内容URL,经过本地DNS系统解析,DNS系统会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器。
  2. CDN的DNS服务器将CDN的全局负载均衡设备IP地址返回用户。用户向CDN的全局负载均衡设备发起内容URL访问请求。CDN全局负载均衡设备根据用户IP地址,以及用户请求的内容URL,选择一台用户所属区域的区域负载均衡设备(边缘节点),告诉用户向这台设备发起请求。均衡设备把服务器的IP地址返回给用户。
  3. 用户向缓存服务器发起请求,缓存服务器响应用户请求,将用户所需内容传送到用户终端。如果这台缓存服务器上并没有用户想要的内容,而区域均衡设备依然将它分配给了用户,那么这台服务器就要向它的上一级缓存服务(多级缓存)器请求内容,直至追溯到网站的源服务器将内容拉到本地(回源)。

服务端缓存

  1. 页面缓存,这种缓存技术一般用于不会经常变动信息,并且访问次数较多的页面,这样就不用每次都动态加载。
  2. 模板缓存,有些语言程序运行时动态对程序进行编译,为了避免每次请求都进行编译,则会缓存编译后的一个模板文件。
  3. 数据缓存,页面数据来自DB时,每次DB操作是需要消耗时间和资源的。将高频操作的数据放入到内存中,避免频繁的操作数据库。

黑科技

  1. Service workers 本质上充当Web应用程序与浏览器之间的代理服务器,也可以在网络可用时作为浏览器和网络间的代理。它们旨在(除其他之外)使得能够创建有效的离线体验,拦截网络请求并基于网络是否可用以及更新的资源是否驻留在服务器上来采取适当的动作。在目前阶段,ServiceWorker的主要能力集中在网络代理和离线缓存上。具体的实现上,可以理解为ServiceWorker是一个能在网页关闭时仍然运行的WebWorker。

缓存的优势和问题

为什么使用缓存?

  • 提高响应速度,减少响应延迟
  • 减少资源消耗(服务器、带宽)

使用缓存可能导致的问题?

  • 缓存雪崩,是指缓存使用不合理时,某一时间缓存失效,大量请求会直接到达向服务器,服务器无法承载大量请求,就导致服务器崩溃
  • 缓存更新不及时,是指缓存使用不合理时,服务器文件更新,用户获取到的还是旧的错误的缓存文件。

合理使用缓存

  1. 分离变化的部分,经常变化的业务逻辑和基础工具库抽离。
  2. 对基础工具库可以设置长缓存Cache-Control: max-age=31536000
  3. 对经常变化的因为逻辑可以使用短缓存时间+must-revalidate 或者使用协商缓存
  4. 使用文件戳控制缓存

本文分享自微信公众号 - 前端黑板报(FeHeiBanBao)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浏览器缓存机制小结

    浏览器缓存是前端开发中不可避免的问题,对于web应用来说,它是提升页面性能同时减少服务器压力的利器。本文将简单地描述总结下浏览器缓存的知识和应用,希望对自己和大...

    前端黑板报
  • 你真的了解 Web 缓存体系吗?

    很高兴认识大家,之前做过很多分享,今天这次终于讲到正题了。因为之前一直讲自动化运维,其实做这么多年运维,自动化运维没干多少年。这几年很多公司各方面机器数量多了,...

    前端黑板报
  • HTTP2基础教程-读书笔记(二)

    由于HTTP/1已经疲于应对现在Web的发展,所以发展出了一整套优化Web性能的技巧,但是它们没有依据的规范,混乱不堪。所以为了走的更远、更对(朝着HTTP/2...

    前端黑板报
  • 中小型网站架构分析及优化

    老七Linux
  • 高性能PHP应用需遵循的20条法则[1]|缓存命中率

    小知识:在redis中可以运行info命令查看redis服务的状态信息,其中keyspace_hits为总的命中中次数,keyspace_misses为总的mi...

    猿哥
  • 高并发场景下的缓存有哪些常见的问题?

    当数据时效性要求很高时,需要保证缓存中的数据与数据库中的保持一致,而且需要保证缓存节点和副本中的数据也保持一致,不能出现差异现象。

    Java架构技术
  • Cache缓存机制

    论,如何定义一个前端工程师。前天看了篇文章,作者把前端攻城狮称作是所有攻城狮角色中最具有也最需要‘工匠精神’的攻城狮。从最直观的角度来讲就是视觉方面,不仅要百分...

    前端博客 : alili.tech
  • 一篇文章理解Web缓存

    前端缓存主要是分为HTTP缓存和浏览器缓存。其中HTTP缓存是在HTTP请求传输时用到的缓存,主要在服务器代码上设置;而浏览器缓存则主要由前端开发在前端js上进...

    前端博客 : alili.tech
  • 分布式缓存考点梳理 + 高频面试题

    对缓存和数据库的考察,一直都是业务开发同学在面试中的核心问题,特别是缓存部分,随着大部分公司业务规模的增加,缓存的应用越来越重要。我偶尔会和身边的同事调侃:如何...

    MickyInvQ
  • 缓存 | 从本地缓存到分布式缓存, Guava, Caffeine, Memcached, Redis

    在程序设计中,经常能听到的就是以时间换空间和以空间换时间。缓存作为一种能加快程序性能的银弹,它是典型的后者(以空间换时间).

    双鬼带单

扫码关注云+社区

领取腾讯云代金券