本地存储 (storage、cookie)

cookie,以前的本地存储
每个浏览器对于cookie的个数,大小限制有所不同。一般一个cookie大小限制在4kb左右。
sessionStorage、localStorage的大小限制为5MB,可以存储更多内容

sessionStorage:当前这个浏览器窗口只要没有关闭,即使刷新,数据依然存在。
localStorage:永久存在

cookie有些请求会传送到服务器,storage不会,节省流量。
image.png

强制缓存和协商缓存

http缓存机制主要在http响应头部中设定,响应头中相应字段为Expiress、Cache-Control、Last-Modified、Etag。

缓存流程

第一次请求时:
image.png
后续请求时:
image.png

由上可知,浏览器缓存包含两种类型:
强缓存(本地缓存)和协商缓存。

获取资源形式 状态码 发送请求到服务器
强缓存 从缓存取 200(from cache) 否,直接从缓存取
协商缓存 从缓存取 304(not modified) 是,正如其名,通过服务器来告知缓存是否可用

强缓存:
浏览器请求资源时,会先获取该资源缓存的header信息,判断是否命中强制缓存(cache-contrl和expires),若命中则直接从缓存中获取资源信息

协商缓存:
若没命中强缓存,请求会携带第一次请求返回的有关缓存的header字段信息(Last-Modified/If-Modified-Since和If-None-Match)。由服务器根据请求中相关的header信息对比结果是否协商缓存命中。若命中,服务器返回新的响应header信息,但不返回资源内容。

强制缓存相关的header字段

expiress

http 1.0 时的规范,是一个绝对时间的GMT格式的时间字符串。若请求时间在过期时间前,本地缓存始终有效

cache-control

max-age=number
http 1.1 时出现的header信息,主要是利用该字段的max-age.

  • no-cache:不使用本地缓存,需要使用协商缓存。
  • no-store:禁止浏览器缓存数据
  • public:可以被所有用户缓存,包括终端用户和CDN等中间代理服务器
  • private:只能被终端用户的浏览器缓存,不允许CDN等中继缓存服务器对其缓存

若 cache-control 和 expires 同时存在,cache-control 的优先级高于 expires。

协商缓存相关的header

一般都是成对出现。
第一次请求响应头:Last-Modified 或 Etag
后续请求头:If-Modified-Since 或 If-None-Match

Last-Modified/If-Modified-Since

两者的值都是GMT格式的时间字符串:

  • 第一次请求,服务器返回的同时,在 response-header 加上 Last-Modified,表示该资源在服务器上的最后修改时间。
  • 再次请求时,请求头加上 If-Modified-Since ,值就是上次请求返回的 Last-Modified 的值。
  • 服务器根据请求头和资源在服务器上的最后修改时间判断资源是否有变化。没变化则返回304 Not Modified。当服务器返回304时,响应头不会再添加 Last-Modified 的header,因为最后修改时间没变。
  • 若协商缓存没命中,浏览器直接从服务器加载资源,Last-Modified 的header在加载时就会被更新。

    Etag/If-None-Match

    这两个值由服务器生成的每个资源的唯一标识字符串,只要资源有变化,这个值就会改变。判断过程与上一对类似。不同点在于304时,ETag依旧会被返回。

    Last-Modified和Etag的区别

    Etag的出现主要是为了解决几个Last-Modified难以解决的问题:

  • 一些文件也许周期性的更改,但内容并没改变,仅改变了修改时间。此时需要缓存

  • 某些文件修改的极其频繁,例如1s内改了n次。If-Modified-Since能检查到的粒度是s级,这种修改无法判断。
  • 某些服务器不能精确的得到文件最后的修改时间。

这时,Etag就能更加准确的控制缓存。

如何排查内存泄漏

  1. vaddsfsdfasd
  2. <!-- -->
  1. var a = 123

asdsadasdasd