学习--浏览器缓存强缓存协商缓存离线缓存一点cookie

最新推荐文章于 2023-07-09 16:11:00 发布

Yabi0527

最新推荐文章于 2023-07-09 16:11:00 发布

阅读量422

点赞数

本文链接：https://blog.csdn.net/qq_42033590/article/details/108514353

版权

##cookie

考察cookie存储 cookie放哪里，cookie能做的事情和存在的价值

document.cookie="键=值;expires=过期时间"
//cookie 后端会操作，前端也可以
document.cookie="username=zs"  //在控制台cookie里面可以看到 写一次就多存一个cookie 就需要用split拆分处理字符串 获取username或者age
console.log(document.cookie)  //获取

cookie机制客户端浏览器会把cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址和cookie一同提交给服务器。

cookie能做什么？一般用来存储数据比如用户的登录状态不过现在经常用token和localStorage了

Http协议本身是无状态的。什么是无状态，即服务器无法判断用户身份。cookie实际上是一小段文本信息（key-value格式）。客户端向服务器发起请求，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个cookie，客户端浏览器会把cookie保存起来，当浏览器再请求该网站时，浏览器把请求的网址连同cookie一同交给服务器。服务器检查该cookie,以此来辨认用户状态。

1：存的数据量小，2:默认浏览器关掉就过期了，但是可以自己设置过期时间 3：不太安全（每次请求头都会带上）

localstorage 1:存的数据量大，2不过期除非你删除

cookie是很久以前的技术，用来存储用户登录，现在用localstorage存储token来操作

//cookie 跨域有问题，现在都是用localsorage 存token来解决

网站怎么优化？1精灵图，2懒加载3减少http请求，，，一定要答一下缓存

二、浏览器缓存

web缓存大致可以分为：数据库缓存、服务器缓存（代理服务器缓存、CDN缓存）、浏览器缓存。

浏览器缓存也包含很多内容：HTTP缓存，indexDB，cookie,localstorage等等。这里我们只讨论HTTP缓存。

术语：缓存命中率：从缓存中得到数据的请求数与所有请求数的比率。理想状态是越高越好。

过期内容：超过设置的有效时间，被标记为"陈旧"的内容。通常过期内容不能用于回复客户端的请求，必须重新向源服务器请求新的内容或者验证缓存的内容是否仍然准备。

验证：验证缓存中的过期内容是否仍然有效，验证通过的话刷新过期时间。

失效：失效就是把内容从缓存中移除。当内容发生改变时，就必须移除失效的内容。

浏览器缓存主要是HTTP协议定义的缓存机制。HTML meta标签，例如

含义是让浏览器不缓存当前页面。但是代理服务器不解析HTML内容，一般应用广泛的是用HTTP头信息控制缓存。

http缓存作用范围？第一次http请求响应后，到第二次请求。

浏览器本身就有缓存功能有时候刷新代码没有生效，网站优化等问题

缓存：

1浏览器缓存可以通过后台设置响应头控制

浏览器是会有缓存的

分别是强制缓存和协商缓存都可以通过后台设置响应头控制

1：强缓存：不会向服务器发送请求，直接从缓存中读取资源，每次访问本地缓存直接验证是否过期。

强缓存可以通过设置两种HTTP Header实现：Expires过期时间，绝对时间和 Cache-Control 相对时间优先级更高缓存控制。

Cache-Control：max-age=300 缓存300秒

2：协商缓存（Last-Modified/If-Modified-Since和Etag/If-None-Match）

协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的数据而是告诉客户端可以直接从缓存中取。

强制缓存优先于协商缓存进行，

若强制缓存（Expires和Cache-Control）生效则直接使用缓存，

若不生效则进行后台设置头协商缓存（第一次请求，服务器返回请求头Last-Modified/第二次请求，浏览器请求头If-Modified-Since和第一次请求，服务器返回的Etag 是一个码，只要文件改变，值变化/If-None-Match）,

1：浏览器在加载资源时，先根据这个资源的一些http header 判断它是否强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css,连请求都不会发送到网页所在服务器。

2、当强缓存过期的时候，浏览器一定会发送一个请求到服务器，通过服务器依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源。

3：强缓存与协商缓存的共同点是，如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；区别是：强缓存不发请求到服务器，协商缓存会发请求到服务器。

4：当协商缓存也没有命中的时候，浏览器直接从服务器加载资源数据。

那么表示该请求的缓存失效，返回200.重新返回资源和缓存标识，

再存入浏览器缓存中；生效则返回304，继续使用缓存

大部分web服务器都默认开启协商缓存

##h5离线存储 manifest

HTML提出的一个新的特性：离线存储，通过离线存储，我们可以通过把需要离线存储在本地的文件列在一个在manifest配置文件中，这样即使在离线的情况下，用户也可以正常看见网页。

查看在application --- application cache里面可以看见

使用

1：在需要离线缓存存储的页面加上 manifest ="cache.manifest"

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

2：在根目录新建文件 cache.manifest 并写上对应代码

CACHE MANIFEST
#v0.11

CACHE:

ljc.css
../images.banner-02.png

NETWORK
../images/banner-01.png

FALLBACK:
./a.html ./offline.html

离线存储的manifest一般由三部分组成

1:CACHE：表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。会在当前浏览器存上。

2:NETWORK:标识在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下，无法使用这些资源。不过，如果再CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。

3：FALLBACK：标识如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html

Yabi0527

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
学习--浏览器缓存强缓存协商缓存离线缓存一点cookie

##cookie考察cookie存储 cookie放哪里，cookie能做的事情和存在的价值document.cookie="键=值;expires=过期时间"//cookie 后端会操作，前端也可以document.cookie="username=zs" //在控制台cookie里面可以看到写一次就多存一个cookie 就需要用split拆分处理字符串获取username或者ageconsole.log(document.cookie) //获取 cookiecoo.
复制链接

扫一扫