浏览器存储:

浏览器缓存

缓存按缓存

缓存位置 memory cache, disk cache, Service Worker 等

缓存请求头:Cache-Control, ETag 强缓存,对比缓存

memory cache:内存中的缓存,与之相对 disk cache 就是硬盘上的缓存)。按照操作系统的常理:先读内存,再读硬盘。disk cache 将在后面介绍 (因为它的优先级更低一些),这里先讨论 memory cache。“短期存储”。常规情况下,浏览器的 TAB 关闭后该次浏览的 memory cache 便告失效 (为了给其他 TAB 腾出位置)。而如果极端情况下 (例如一个页面的缓存就占用了超级多的内存),那可能在 TAB 没关闭之前,排在前面的缓存就已经失效了。

缓存到此位置的决定因素有哪些?

  • memory cache和Cache-Control以及ETag 所有与缓存有关的请求头都无关
  • preloader:<link rel="prefetch"> 一边解析js/css文件,一边网络请求下一个资源
  • preload: <link rel="preload">。这些显式指定的预加载资源,也会被放入 memory cache 中。
  • 关于一些静态文件,考虑如果是大文件,大概率并不会存内存,如果内存空闲,像css,js,img会存入内存。真心不想让一个资源进入缓存,就连短期也不行,那就需要使用no-store。存在这个头部配置的话,即便是 memory cache 也不会存储,自然也不会从中读取了。
  • memory cache的状态码是200, 200 OK (from cache) 是浏览器没有跟服务器确认,直接用了浏览器缓存;而 304 Not Modified 是浏览器和服务器多确认了一次缓存有效性,再用的缓存。200(from cache) 是速度最快的,因为不需要访问远程服务器,直接使用本地缓存.304 的过程是, 先请求服务器, 然后服务器告诉我们这个资源没变, 浏览器再使用本地缓存.

557ab6543d5c0c1a3624dc07f56b8d31.png

disk cache disk cache 也叫 HTTP cache,顾名思义是存储在硬盘上的缓存,因此它是持久存储的,是实际存在于文件系统中的。而且它允许相同的资源在跨会话,甚至跨站点的情况下使用,例如两个站点都使用了同一张图片。

disk cache 会严格根据 HTTP 头信息中的各类字段来判定哪些资源可以缓存,哪些资源不可以缓存;哪些资源是仍然可用的,哪些资源是过时需要重新请求的。当命中缓存之后,浏览器会从硬盘中读取资源,虽然比起从内存中读取慢了一些,但比起网络请求还是快了不少的。绝大部分的缓存都来自 disk cache。

关于 HTTP 的协议头中的缓存字段,我们会在稍后进行详细讨论。

凡是持久性存储都会面临容量增长的问题,disk cache 也不例外。在浏览器自动清理时,会有神秘的算法去把“最老的”或者“最可能过时的”资源删除,因此是一个一个删除的。不过每个浏览器识别“最老的”和“最可能过时的”资源的算法不尽相同,可能也是它们差异性的体现。

无名之辈:http​zhuanlan.zhihu.com
e9853f0a9896f3c0a008fb6a198ceda4.png

1 200 from memory cache和200 from disk cache和 304Not Modified有什么区别?

200 from memory cache

不访问服务器,直接读缓存,从内存中读取缓存。此时的数据时缓存到内存中的,当kill进程后,也就是浏览器关闭以后,数据将不存在。

但是这种方式只能缓存派生资源。

200 from disk cache

不访问服务器,直接读缓存,从磁盘中读取缓存,当kill进程时,数据还是存在。

这种方式也只能缓存派生资源

304 Not Modified

访问服务器,发现数据没有 更新,服务器返回此状态码。然后从缓存中读取数据。

但是这里有困惑,怎么判断from memory cache还是304

三级缓存的原理

  1. 先去内存看,如果有,直接加载
  2. 如果内存没有,择取硬盘获取,如果有直接加载
  3. 如果硬盘也没有,那么就进行网络请求
  4. 加载到的资源缓存到硬盘和内存

所以我们可以来解释这个现象

图片为例:

访问-> 200 -> 退出浏览器 再进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)

2 什么时候from memory cache和from disk cache??

浏览器图片加载是并行的么?再就是Js和CSS呢?是串行的?为什么在cdn就可以加速

https://blog.csdn.net/zqtsx/article/details/23666275浏览器的回收机制
通常浏览器的回收机制有标记清除以及引用计数两种方式,当变量进入执行环境时候,垃圾回收器将其标记为进入环境,当变量离开环境,函数运行结束时候,将其标记为离开环境。垃圾回收器给内存中所有变量加上标记,然后去掉环境变量以及被环境中变量引用的变量,然后被回收。

在我们普通浏览器一般使用的是标记清除方法,老的版本的ie浏览器使用的是引用计数。

JavaScript 的事件机制

Logo

前往低代码交流专区

更多推荐