面试常见-浏览器和网络（二）

当时就念了一首诗
200 阅读6分钟

前言

上一篇文章总结了url组成和跨域，这一次我们总结一下浏览器存储、http缓存

cookie和session区别

HTTP 是无状态协议，这意味着服务器不会在两个请求之间保留任何数据（状态）。

由于http的无状态性，为了在域名下共享数据出现cookie和session，但是二者之间有着很大的区别，不能混为一谈。

  • cookie实际是一小段的文本信息，session是一种记录客户状态的机制；
  • cookie存储在浏览器端，session存储在服务端；
  • cookie存储的值只能是字符串而且容量小，session存储的值可以是任意类型而且容量大；
  • cookie可以在浏览器端禁用，但是不影响session在服务端的工作；

localStorage、sessionStorage和cookie的区别

  • localStorage是持久化存储，不主动清空会一直存在于浏览器中。sessionStorage会随着当前页面的关闭清空。cookie根据设置的时效保存在浏览器中。
  • storage的存储大小大约在5m左右。cookie的存储大小约为4k。
  • cookie会携带在http的请求头中。storage在浏览器中保存。

http缓存

HTTP 缓存分为 2 种，一种是强缓存，另一种是协商缓存。主要作用是可以加快资源获取速度，提升用户体验，减少网络传输，缓解服务端的压力。常见的http缓存只能缓存get请求响应的资源，对于其他类型的响应则无能为力。

image.png

强缓存

不需要发送请求到服务端，直接读取浏览器本地缓存，在 Chrome 的 Network 中显示的 HTTP 状态码是 200 ，在 Chrome 中，强缓存又分为 Disk Cache（存放在硬盘中）和 Memory Cache（存放在内存中），存放的位置是由浏览器控制的。是否强缓存由 Expires、Cache-Control 和 Pragma 3 个 Header 属性共同来控制。

Expires

Expires值是一个http日期，在浏览器发起请求时会根据系统时间和Expires的值比较，如果系统时间超过Expires的时间缓存就会失效。因为和系统时间比较，系统时间和服务器时间不一致的时候就会有误差。Expires的优先级在三者中是最低的。

Cache-Control

Cache-Control常见属性有以下几个

  • max-age：单位是秒，缓存时间计算的方式是距离发起的时间的秒数，超过间隔的秒数缓存失效
  • no-cache：不使用强缓存，需要与服务器验证缓存是否新鲜
  • no-store：禁止使用缓存（包括协商缓存），每次都向服务器请求最新的资源
  • private：专用于个人的缓存，中间代理、CDN 等不能缓存此响应
  • public：响应可以被中间代理、CDN 等缓存
  • must-revalidate：在缓存过期前可以使用，过期后必须向服务器验证

第一次加载会向服务器请求数据，并在 Response Header 中添加 Cache-Control ，过期时间为 10 秒。

image.png

第二次加载可以看到使用了强缓存，没有实际发送请求

image.png

10秒之后再发送请求max-age过期，向服务器发起了请求资源的请求

image.png

Pragma

Pragma 只有一个属性值，就是 no-cache ，效果和 Cache-Control 中的 no-cache 一致，不使用强缓存，需要与服务器验证缓存是否新鲜，在 3 个头部属性中的优先级最高。

协商缓存

览器的强缓存失效的时候或者请求头中设置了不走强缓存，并且在请求头中设置了 If-Modified-Since 或者 If-None-Match 的时候，会将这两个属性值到服务端去验证是否命中协商缓存，如果命中了协商缓存，会返回 304 状态，加载浏览器缓存，并且响应头会设置 Last-Modified 或者 ETag 属性。

ETag/If-None-Match

ETag/If-None-Match值是一串hash码，代表一个资源的标识符，服务端文件发生改变的时候，hash值会随之改变，通过请求头中的 If-None-Match 和当前文件的 hash 值进行比较，如果相等则表示命中协商缓存。ETag 又有强弱校验之分，如果 hash 码是以 "W/" 开头的一串字符串，说明此时协商缓存的校验是弱校验的，只有服务器上的文件差异（根据 ETag 计算方式来决定）达到能够触发 hash 值后缀变化的时候，才会真正地请求资源，否则返回 304 并加载浏览器缓存。

ETag/If-None-Match 的出现主要解决了 Last-Modified/If-Modified-Since 所解决不了的问题：

  • 如果文件的修改频率在秒级以下，Last-Modified/If-Modified-Since 会错误地返回 304
  • 如果文件被修改了，但是内容没有任何变化的时候，Last-Modified/If-Modified-Since 会错误地返回 304

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since 的值代表的是文件的最后修改时间，第一次请求服务端会把资源的最后修改时间放到 Last-Modified 响应头中，第二次发起请求的时候，请求头会带上上一次响应头中的 Last-Modified 的时间，并放到 If-Modified-Since 请求头属性中，服务端根据文件最后一次修改时间和 If-Modified-Since 的值进行比较，如果相等，返回 304 ，并加载浏览器缓存。

第一次请求

image.png 第二次请求

image.png

实际使用

在实际使用场景中，图片、不常变化的js等静态资源都会使用缓存来提高页面的加载速度。

状态码

1xx

  • 101是根据客户端的请求切换协议，比如webstocket和http的升级。
  • 100是服务端用来响应是否已经接受到客户端的请求，且不会拒绝。客户端发送一个特殊报文包含Expect: 100-continue，服务端收到如果没有拒绝需要返回101，如果拒绝的话返回417。通常在post请求发送大文件时先向服务端询问是否愿意接收。

2xx

  • 200请求已成功，且响应头或数据头会跟随此响应返回。
  • 201请求已成功，且已经创建了新资源。
  • 202请求已成功，但服务器未处理。
  • 204请求已成功，但没有返回数据。
  • 206服务器处理了部分请求。一般用来做大文件断点上传或者视频文件请求。

3xx

  • 301永久重定向，浏览器会缓存重定向地址。浏览器会把url的pageRank值带到新地址，更利于seo优化。通常用于域名的更换。
  • 302临时重定向，浏览器不缓存重定向地址。通常用于404和登陆失效的重定向。
  • 304告诉客户端有缓存，不返回响应数据。

4xx

  • 400客户端的请求方法不被允许。
  • 401请求需要身份验证，没有通过验证时返回。
  • 403服务端禁止访问。
  • 404请求地址已失效或不存在。

5xx

  • 500服务器内部出现错误，无法完成请求。
  • 503服务器停机或维护，无法请求。
  • 505请求的http版本服务器不支持。

结语

这里只总结了一小部分，之后会总结其他的部分。写的不好，各位大佬多多指教，感恩家人🙏

avatar
文章
阅读
粉丝