JS基础知识10（前端缓存）

最新推荐文章于 2024-08-05 17:53:21 发布

来七分

最新推荐文章于 2024-08-05 17:53:21 发布

阅读量564

点赞数 1

分类专栏： JS基础知识

本文链接：https://blog.csdn.net/weixin_43836308/article/details/88375928

版权

JS基础知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

如何删除cookie

document.cookie='user=XXX；expires‘+new Date(0);

cookie,localstorage,sessionstorage

相同点：都保存在浏览器端，并且是同源的
不同点：1cookie在浏览器和服务器直接来回传递localstorage和sessionstorage保存在本地
2cookie容量最大4K，localstorage和sessionstorage容量大
3cookie在设置的过期时间之前有效，sessionstorage在关闭浏览器窗口之前有效，localstorage永久有效
4cookie在所有同源窗口都共享。不同浏览器不共享localstorage和sessionstorage，相同浏览器不同页面不共享sessionstorage

cookie

每一个域名下，cookie字段个数是有限的
当cookie字段超过浏览器限制时，cookie会被清理
cookie容量最大4K

使用cookie的注意事项

1.控制保存在cookie中的session的大小
2.通过加密技术（ssl）降低cookie被破解的可能
3.只在cookie中存放不敏感的数据
4.控制cookie的生命周期，使之不会永远有效

cookie和session区别

第一次登录后服务器返回一些数据（cookie）给浏览器，然后浏览器保存在本地，当该用户发送第二次请求的时候，就会自动的把上次请求存储的cookie数据自动的携带给服务器，服务器通过浏览器携带的数据就能判断当前用户是哪个了。cookie存储的数据量有限，不同的浏览器有不同的存储大小，但一般不超过4KB。因此使用cookie只能存储一些小量的数据。
session:
session和cookie的作用有点类似，都是为了存储用户相关的信息。不同的是，cookie是存储在本地浏览器，而session存储在服务器。存储在服务器的数据会更加的安全，不容易被窃取。但存储在服务器也有一定的弊端，就是会占用服务器的资源，但现在服务器已经发展至今，一些session信息还是绰绰有余的。

浏览器的缓存机制

通过新鲜度和校验值两个维度来规定浏览器是否可以直接使用缓存中的副本，还是需要去源服务器获取更新的版本。
**1.新鲜度（过期机制）**也就是缓存副本有效期。一个缓存副本必须满足以下条件，浏览器会认为它是有效的，足够新的：
含有完整的过期时间控制头信息（HTTP协议报头），并且仍在有效期内；或者浏览器已经使用过这个缓存副本，并且在一个会话中已经检查过新鲜度；
**2.校验值（验证机制）**服务器返回资源的时候有时在控制头信息带上这个资源的实体标签Etag（Entity Tag），它可以用来作为浏览器再次请求过程的校验标识。如过发现校验标识不匹配，说明资源已经被修改或过期，浏览器需求重新获取资源内容。
**1、当前缓存是否过期,这是判断是否启用缓存的第一步。**如果浏览器通过某些条件(条件之后再说)判断出来，ok现在这个缓存没有过期可以用，那么连请求都不会发的，直接是启用之前浏览器缓存下来的那份文件
2、服务器中的文件是否有改动1、缓存过期，文件有改动.如果服务器发现这个文件改变了那么你肯定不能再用以前浏览器的缓存了，那就返回个200并且带上新的文件.2、缓存过期，文件无改动.如果发现虽然那个缓存虽然过期了，可你在服务器端的文件没有变过，那么服务器只会给你返回一个头信息(304)，让你继续用你那过期的缓存
浏览器缓存主要分为强强缓存（也称本地缓存）和协商缓存（也称弱缓存）。根据上图，浏览器在第一次请求发生后，再次发送请求时：

浏览器请求某一资源时，会先获取该资源缓存的header信息，然后根据header中的Cache-Control和Expires来判断是否过期。若没过期则直接从缓存中获取资源信息，包括缓存的header的信息，所以此次请求不会与服务器进行通信。这里判断是否过期，则是强缓存相关。

如果显示已过期，浏览器会向服务器端发送请求，这个请求会携带第一次请求返回的有关缓存的header字段信息，比如客户端会通过If-None-Match头将先前服务器端发送过来的Etag发送给服务器，服务会对比这个客户端发过来的Etag是否与服务器的相同，若相同，就将If-None-Match的值设为false，返回状态304，客户端继续使用本地缓存，不解析服务器端发回来的数据，若不相同就将If-None-Match的值设为true，返回状态为200，客户端重新机械服务器端返回的数据；客户端还会通过If-Modified-Since头将先前服务器端发过来的最后修改时间戳发送给服务器，服务器端通过这个时间戳判断客户端的页面是否是最新的，如果不是最新的，则返回最新的内容，如果是最新的，则返回304，客户端继续使用本地缓存。

判断缓存过期

主要的方式有两种，这两种都是设定请求头中的某一个字段来实现的：1、Expires；2、Cache-Control。由于Cache-Control设置后优先级比前者高，通过Cache-Control来控制缓存。
Cache-Control字段有很多值，最后一个值max-age；如果在请求头中设定了max-age为60秒，那么在60s内，如果再去请求这个文件的话，是不会发起请求的。因为还没有过期呢！

如何更新设置了缓存的css，js

缓存有个很重要的特性：只有相同的url才会利用之前的缓存，那么我在http的请求路径上加上一个查询参数就可以了，每次更新css，js，只要变化查询参数就行了。如果这个文件是在浏览器地址栏来请求的（比如localhost:3030/static/style.css），当刷新的时候就会让当前的这个文件所设定的过期时间失效，直接去请求服务器来看是返回个304还是返回新文件。一般这么请求的都是我们常说的入口文件，入口文件一刷新就会重新向服务器请求，但是入口文件里面所引入的文件如js，css等不会随着刷新而另过期时间失效。除非你单找出来那个引入链接，通过浏览器地址栏去查询它并刷新。

Expires和Cache-Control的区别

缓存还可以用Expires，Expires设置的是时间点，Cache-Control设置的是时间段。由于Cache-Control设置后优先级比前者高，通过Cache-Control来控制缓存。

Cache-Control 与 ETag 的区别

Cache-Control直接是通过不请求来实现，而ETag是会发请求的，只不过服务器根据请求的东西的内容有无变化来判断是否返回请求的资源

Cache-Control ETag

Cache-Control
服务器端在想要想要被缓存的文件上设置**response.setHeader(‘Cache-Control’, ‘max-age=30’)**max-age的值表示多少秒之内浏览器不会再请求这个文件，而会在请求中读取。如果要更新，则改变文件的url。
注意，入口文件不能加缓存。聪明的浏览器也不接受入口文件的缓存
ETag在服务器里设置响应头

let string = fs.readFileSync('./main.js', 'utf8')
let fileMd5 = md5(string);
response.setHeader('ETag', fileMd5)

if(request.header['if-None-Match'] === fileMd5){
  response.statusCode = 304;
}

客户端首次请求资源(main.js)，服务器将文件对应的字符串做MD5处理，然后在把文件的MD5值放入ETag中。此后客户端每次请求这个资源，都会带上if-none-match，if-none-match的value就是在服务器端通过MD5处理后的MD5值。服务器端读取if-none-match的内容，和本次的MD5处理后的内容做对比，如果一样，那么就只返回一个304（所以304指的就是Not Modified，即没有修改），不返回请求内容。如果不一样，就是资源有更新变动，就将其返回，并且写入新的MD5处理后的ETag

Etag

服务器返回资源的时候在控制头信息带上这个资源的实体标签Etag，它可以用来作为浏览器再次请求过程的校验标识。如过发现校验标识不匹配，说明资源已经被修改或过期，浏览器需求重新获取资源内容。
Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。
Etag 是URL的Entity Tag，用于标示URL对象是否改变，区分不同语言和Session等等。具体内部含义是使服务器控制的，就像Cookie那样。

什么是MD5

MD5是一个摘要算法，它可以用来检查下载文件的完整性。
文件在服务器上经过MD5处理的得出来的值，和下载下来经过MD5处理得出来的值作对比，两者相同，即文件下载完整。

判断文件变动

常用的方式为Etag和Last-Modified

Last-Modified

思路上差不多，这里作者只介绍Last-Modified的用法。
Last-Modified方式需要用到两个字段：Last-Modified & if-modified-since。
先来看下这两个字段的形式：
Last-Modified : Fri , 12 May 2006 18:53:33 GMT
If-Modified-Since : Fri , 12 May 2006 18:53:33 GMT
可以看出其实形式是一样的，就是一个标准时间。
当第一次请求某一个文件的时候，就会传递回来一个Last-Modified 字段，其内容是这个文件的修改时间。当这个文件缓存过期，浏览器又向服务器请求这个文件的时候，会自动带一个请求头字段If-Modified-Since，其值是上一次传递过来的Last-Modified的值，拿这个值去和服务器中现在这个文件的最后修改时间做对比，如果相等，那么就不会重新拉取这个文件了，返回304让浏览器读过期缓存。如果不相等就重新拉取。

ajax在iE下的问题：

ie 缓存问题：在IE浏览器下，如果请求方式是get，并且请求的url不变，那么请求的结果就会缓存。解决这个问题的办法是实时改变请求的url，（在url的末尾加时间戳）
对于ajax请求的页面历史记录状态问题，可以通过锚点记录状态。location.hash让浏览器记录ajax请求时页面状态变换，还可以通过html5的history.pushState，来实现浏览器地址栏无刷新改变。

304缓存的原理

服务器首先产生ETag，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客户端）缓存。
304是HTTP状态码，服务器用来标识这个文件没修改，不返回内容，浏览器在接收到个状态码后，会使用浏览器已缓存的文件
客户端请求一个页面（A）。服务器返回页面A，并在给A加上一个ETag。客户端展现该页面，并将页面连同ETag一起缓存。客户再次请求页面A，并将上次请求时服务器返回的ETag一起传递给服务器。服务器检查该ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304（未修改——Not Modified）和一个空的响应体。

哪些请求不能被缓存？

1.HTTP信息头中包含Cache-Control:no-cache，pragma:no-cache，或Cache-Control:max-age=0等告诉浏览器不用缓存的请求
需要根据Cookie，认证信息等决定输入内容的动态请求是不能被缓存的
2.经过HTTPS安全加密的请求
3.POST请求无法被缓存
4.HTTP响应头中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的请求无法被缓存

session的运行机制和是怎么保存的？

session生命周期

Session存储在服务器端，一般为了防止在服务器的内存中（为了高速存取），Sessinon在用户访问第一次访问服务器时创建，需要注意只有访问JSP、Servlet等程序时才会创建Session，只访问HTML、IMAGE等静态资源并不会创建Session，可调用request.getSession(true)强制生成Session。