浏览器的缓存原理 (强缓存以及协商缓存)以及相关知识点

Smile786
132 阅读11分钟

浏览器的缓存原理

⽂档讲解: blog.csdn.net/GreekMrzzJ/… www.cnblogs.com/wonyun/p/55… 视频讲解: www.bilibili.com/video/BV14G… 9cad864e8965fc9cf1d4 www.bilibili.com/video/BV1iD… 9cad864e8965fc9cf1d4 www.bilibili.com/video/BV1sx… 9cad864e8965fc9cf1d4 www.bilibili.com/video/BV1EY… 9cad864e8965fc9cf1d4 www.bilibili.com/video/BV1gR…

  1. 基本认知 Web 服务缓存 ⼤致可以分为：数据库缓存、服务器端缓存（代理服务器缓存、CDN 服务器缓存）、浏览器缓存。 浏览器缓存 也包含很多内容： HTTP 缓存、indexDB、cookie、localstorage 等等。 这⾥我们只讨论 HTTP 缓存相 关内容 。 HTTP缓存: (优化⻚⾯加载的效率, 如果没有缓存策略, 每次重新加载⻚⾯, 会⾮常慢!)

2.浏览器缓存, HTTP缓存分类 浏览器缓存分为 强缓存 和 协商缓存 ，浏览器加载⼀个⻚⾯的简单流程如下： 1. 浏览器先根据这个资源的 http头信息 来 判断是否命中强缓存。 如果命中则直接加载在缓存中的资源，并不会将请求发送到服务器。（强缓存） 2. 如果未命中强缓存，则浏览器会将资源加载请求发送到服务器。 服务器来判断浏览器本地缓存是否失效。 若可以使⽤，则服务器并不会返回资源信息，浏览器继续从缓存加载资源。（协商缓存） 3. 如果未命中协商缓存，则服务器会将完整的资源返回给浏览器，浏览器加载新资源，并更新缓存。（新的请 求）

3.强缓存是利⽤http的返回的响应头中的Expires或者Cache-Control (优先级更⾼) 两个字段来控制的，⽤来表示资源 的缓存时间。 Expires: 指定⼀个具体时间(2020年12⽉12⽇ 17:00), 到了这个时间了, 缓存过期了, 在时间内, 都是有效的, 可以直 接读 Cache-Control : 指定⼀个过期时间 (3600s), 这个资源你加载到后, 可以⽤ 3600s

  1. 协商缓存 (强缓存未命中-发送请求进⾏协商)

若未命中强缓存(强缓存过期了)，则浏览器会将请求发送⾄服务器。 服务器根据http头信息中的 Last-Modify/If-Modify-Since 或 Etag/If-None-Match 来判断是否命中协商缓 存。 如果命中，则http返回码为304 (你本地之前加载的资源是有效的)，浏览器从缓存中加载资源。

Last-Modify/If-Modify-Since 浏览器第⼀次请求⼀个资源的时候, 服务器返回的header中会加上Last-Modify， Last-modify是⼀个时间标识该资源的最后修改时间，例如 Last-Modify: Thu,31 Dec 2037 23:59:59 GMT 。 当浏览器再次请求该资源时(进⾏协商请求时)，发送的请求头中会包含If-Modify-Since，该值为缓存之前返回的 Last-Modify。 服务器收到If-Modify-Since后，根据实际服务器的资源的最后修改时间, 进⾏判断是否命中缓存。 如果命中缓存，则返回 http304，并且不会返回资源内容，并且不会返回Last-Modify。 由于对⽐的是服务端的修改时间，所以就算客户端与服务端时间差距, 也不会有问题。 但是有时候通过最后修改时间来判断资源是否修改还是不太准确（资源变化了最后修改时间也可以⼀致）。 ⽐如: 最后修改只能精确到秒级, ⼀秒进⾏了多次修改, 就不⾏了, 于是出现了ETag/If-None-Match。 ETag/If-None-Match 与Last-Modify/If-Modify-Since (最后修改时间)不同的是，Etag/If-None-Match返回的是⼀个校验码（ETag: entity tag）。

ETag可以保证每⼀个资源是唯⼀的，资源变化都会导致ETag变化。 ETag值的变更则说明资源状态已经被修改。 服务器根据浏览器上发送的If-None-Match值来判断是否命中缓存。 ETag⽣成靠以下⼏种因⼦ 1. ⽂件的i-node编号，是Linux/Unix⽤来识别⽂件的编号。 2. ⽂件最后修改时间 3. ⽂件⼤⼩ ... ⽣成Etag的时候，可以使⽤其中⼀种或⼏种因⼦，使⽤抗碰撞散列函数来⽣成。⽣成⼀个标记⽂件的唯⼀

⼩结: 强缓存: 检查过期时间, 判断缓存是否失效, 如果不失效, 直接⽤, 不发请求 ⼤⼤的减少了 服务器的请求次数, 在过期时间内, 直接从客户端内存中读 协商缓存: 强缓存命中失效了, 超过过期时间了, 拿着标识(最后的修改时间, 唯⼀标识etag), 去问服务器, 是否真 的过期了 如果验证通过, 服务器会直接响应 304, 且不会返回资源 不太会变的资源 => 图⽚, ⾮常的适合应⽤强缓存 (过期时间也可以设置的很⻓) 如果是⼀些很可能会变的资源, 也希望能缓存 => 过期时间设置短⼀些, ⼀旦过期, 协商缓存实际⼯作两者相互配合

17.11 http常⻅的状态码有哪些? 以及他们分别表示什么? 视频讲解: www.bilibili.com/video/BV1Z3… www.bilibili.com/video/BV1e8… www.bilibili.com/video/BV1QG… 9cad864e8965fc9cf1d4

成功 2XX

image.png

重定向（3XX）

image.png 因为post请求, 是⾮幂等的, 从302中, 细化出了 303 和 307 简⽽⾔之:

  • 301 302 307 都是重定向
  • 304 协商缓存

客户端错误（4XX）

image.png

服务端错误（5XX）

image.png

网络模型

计量单位

  • 1bit（位） ：1bit
  • 1Byte (字节)：1Byte =8bit
  • 1KB=1024Byte=1*210Byte
  • 1M=1024KB =1*220Byte 210 210
  • 1G=1024MB
  • 1T=1024GB

5层参考模型

  • 应用层 ：支持各种网络应用： FTP、SMTP、HTTP
  • 传输层：进程的数据传输 TCP、UDP
  • 网络层：源主机到目的主机的数据分组路由与转发 IP、ICMP、OSPF协议
  • 数据链路层：把网络层传下来的数据包组装成帧 Ethrnet，PPP
  • 物理层 :比特传输

image.png

1.TCP协议是什么?

TCP(Transmission Control Protocol 传输控制协议)是一种面向连接(连接导向)的、可靠的、基于IP的传输层协议。TCP 使用校验、确认和重传机制来保证可靠传输 而 HTTP协议 就是建立在TCP协议之上的一种应用。

image.png

2.一次完整的HTTP服务过程是什么

当我们在web浏览器的地址栏中输入: www.baidu.com ，具体发生了什么? 1.对 www.baidu.com 这个网址进行DNS域名解析，得到对应的IP地址 2.根据这个IP，找到对应的服务器，发起TCP的三次握手 3.建立TCP连接后,发起HTTP请求 4.服务器响应HTTP请求，浏览器得到html代码 5.浏览器解析html代码，并请求html代码中的资源(如is、CSS、图片等) (先得到html代码，才能去找这些资源) 6.浏览器对页面进行渲染呈现给用户 7.服务过程完毕。关闭TCP连接,四次挥手 注:

1.DNS怎么找到域名的? DINS域名解析采用的是递归查询的方式，过程是，先去找DNS缓存->缓存找不到就去找根域名服务器->根域名又会去找下一级，这样递归香找之后，找到给我们的web浏览哭

强制缓存

  • cache-control: max-age=15552000（秒） 15552000/3600

cache-control是一个时间段

  • expires: Wed, 19 Jul 2023 13:48:26 GMT

expires是一个时间点 如果expires不好用，则会使用max-age

协商缓存

last-modified image.png last-modified 的单位是秒，如果一秒内发生了修改，那就不能判断出改变，这时候可以用Etag。 image.png Etag生成靠以下几种银子

  • 文件的i-node编号，是Linux/Unix用来识别文件的编号
  • 文件最后修改时间
  • 文件大小
  • ......

生成Etag的时候，可以使用其中一种或者几种因子，使用抗碰撞散列函数生成，生成一个标记文件的唯一值。 Last-Modified与Etag是一起使用的，服务器会先验证ETag，一致的情况下，才会继续比对Last-Modified，然后才决定是否返回304

小结：

  • 强缓存：检查过期时间，判断缓存是否失效。如果不失效，则直接使用。

大大减少了服务器的请求次数，在过期时间内，直接从客户端内存中读（适合图片，不大会修改的内容。过期时间也可以设置很长）

  • 协商缓存：强缓存命中失效了，超过过期时间了，拿着标识（最后的修改时间，唯一标识etag），去问服务器，是否振的过期了。如果验证通过，服务器会直接响应304，且不会返回资源。

image.png

关键渲染路径

  1. 构建DOM树
  2. 构建CSSOM树
  3. 合并DOM和CSSOM
  4. 布局

把display不为none的元素，进行布局

  1. 重绘

如果遇到图片、transform等属性，opacity等设置，还需要重绘。 image.png

keep-alive

早期HTTP/1.0在每次请求的时候，都要创建一个新的链接，而创建连接的过程需要消耗资源和时间，为了减少资源消耗，缩短响应时间，就需要复用已有的连接。 在后来的HTTP/1.0和HTTP/1.1中引入了复用链接的机制，也就是在请求头中加入Connection:keep-alive，以此告诉对象这个请求响应完成后不要关闭链接，下一次还用这个请求的连接进行后续交流。 协议规定，如果想保持连接，则需要在请求头中加上 Connection:keep-alive

keep-alive 的优点(复用连接) 。较少的 CPU 和内存的占用 (因为要打开的连接数变少了,复用了连接) 。减少了后续请求的延迟 (无需再进行握手) 缺点: 因为在处理的暂停期间，本来可以释放的资源仍旧被占用。请求已经都结束了,但是还一直连接着也不合适解决: Keep-Alive: timeout=5, max=100

  • timeout: 过期时间5秒 (对应httpd.conf里的参数是: KeepAliveTimeout)，max是最多一百次请求，强制断掉连接。
  • 就是在timeout时间内又有新的连接过来，同时max会自动减1，直到为0，强制断掉。

什么是DNS 解析

DNS解析 (域名解析服务器) 将域名转换成ip地址 假定请求的是 www.baidu.com a)首先会搜索浏览器自身的DNS缓存(缓存时间比较短，大概只有1分钟，且只能容纳1000条缓存 b) 如果浏览器自身的缓存里面没有找到，那么浏览器会搜索操作系统windows自身的DNS缓存 c) 如果还没有找到，那么尝试从 hosts 文件里面去找 d)在前面三个过程都没获取到的情况下，就递归地去域名服务器去查找(就近查找)，具体过程如下

DNS优化两个方面: DNS缓存、DNS负载均衡(准备多台dns服务器,进行dns解析

三次握手和四次挥手

建立连接

三次握手 (1) 服务器啊，我是浏览器，我要和你建立连接 (2) 服务器看到了，好的，那么建立连接吧，我准备好了，你确定吗? (3) 浏览器:是的，我确定! 连接就建立成功 三次握手 = 连接的发起 + 双方的确认 image.png

四次挥手（客气挽留）

image.png 这和有礼貌的好友道别一样: (a: 客户端 b:服务端) 1、一开始A想要回家离开，但是呢? 怕B还有事情要交代，那么呢? 只好先向B打招呼，我要走了，请求停止交谈(请求断开连接 (此时，a到B的连接没有断开，依旧可以进行通伟) ; 2、同意A的请求，说好的，但是我这里可能还有一些话(数据)没说完。我检查看看，你等等，等我说完你再走。 3、B确实没啥要补充的了，就告知你我可以散伙了 4、A说好的，知道了，88;(B得知A走开了，关闭了自己的连接 ) 完整的一次 http 请求流程才算结束

avatar
文章
阅读
粉丝