http

q泡泡q
67 阅读7分钟

cookie、sessionStorage 和 localStorage 的区别

  1. cookie

    • 存储位置：cookie 是存储在浏览器里的小文件，服务器和浏览器之间的通信可以自动携带 cookie。
    • 大小限制：一般大小限制在 4KB 左右。
    • 过期时间：可以设置过期时间，如果不设置，默认是会话级别的（浏览器关闭就没了）。
    • 用途：主要用来做身份验证，比如登录状态的保存。
    • 缺点：每次请求都会带上 cookie，可能会增加请求的体积，影响性能。

cookie 是可以通过 Expires 或 Max-Age 属性来设置过期时间的

cookie 还可以设置Domain=example.com，主域名和所有子域名（如 sub.example.com）都可以访问这个 cookie

  1. sessionStorage

    • 存储位置：存储在浏览器的内存中，属于当前会话。
    • 大小限制：一般是 5MB 左右。
    • 过期时间：只在当前标签页有效，页面关闭后数据就会被清除。
    • 用途：适合存储临时数据，比如表单填写的中间状态。

  2. localStorage

    • 存储位置：存储在浏览器的本地，和 sessionStorage 类似。
    • 大小限制：一般也是 5MB 左右。
    • 过期时间：没有过期时间，除非手动清除，否则数据会一直存在。
    • 用途：适合存储长期数据，比如用户的偏好设置。

可以模拟过期时间，取完即删

不同的域名、子域名或协议之间的数据是互相隔离的，无法访问彼此的存储

http和https的区别

特性HTTPHTTPS
安全���明文传输，易被窃听和篡改加密传输，防窃听、防篡改
加密机制无SSL/TLS 加密
性能无加密开销，速度快加密开销，速度稍慢
默认端口80443
SEO 优势无搜索引擎更友好
用户信任不安全标志安全锁标志
部署成本简单需要证书，部署复杂

强缓存和协商缓存是什么

  1. 强缓存（Fresh Cache） ：

    • 浏览器首先检查资源是否命中 强缓存。
    • 如果资源仍在强缓存的有效期内（如 Cache-Control: max-age 或 Expires），浏览器直接从缓存中读取资源，不会向服务器发送请求。
    • 特点：完全不与服务器通信，加载速度最快。

  2. 强缓存过期后，进入协商缓存（Revalidation Cache） ：

    • 如果强缓存过期，浏览器会向服务器发送一个条件请求（如 If-None-Match 或 If-Modified-Since）。

    • 服务器根据请求头中的 ETag 或 Last-Modified 判断资源是否发生变化：

      • 资源未变更：返回 304 Not Modified，浏览器继续使用缓存资源。
      • 资源已变更：返回新的资源内容（200 OK），并更新缓存。

  3. 没有缓存时，直接请求资源：

    • 如果既没有强缓存，也没有协商缓存，浏览器会直接向服务器请求资源。
缓存类型触发条件是否与服务器通信响应结果
强缓存缓存未过期（max-age 或 Expires）否直接使用本地缓存
协商缓存缓存过期或强制刷新（ETag 或 Last-Modified）是304 Not Modified 或 200 OK
无缓存没有缓存或禁用缓存是200 OK（返回新资源）

强缓存：浏览器不会发送请求到服务器，从 from memory cache（浏览器内存获取， 关闭浏览器就资源释放了） --> from disk cache （下次浏览器打开，还是不请求服务器），如果过期就走协商缓存，还是请求服务器看看有没有更新

http常见状态码

  • 200 OK：请求成功，服务器返回了请求的数据。
  • 201 Created：请求成功，并且服务器创建了一个新的资源（常见于 POST 请求）。
  • 206 Partial Content：分片传输，比如B站看视频。
  • 301 Moved Permanently：资源已永久移动到新位置，客户端应使用新 URL。
  • 302 Found：资源临时移动到新位置，客户端应继续使用原 URL。
  • 304 Not Modified：资源未修改，客户端可以使用缓存版本。
  • 401 Unauthorized：未授权，客户端需要提供身份验证信息。
  • 404 Not Found：请求的资源不存在。
  • 500 Internal Server Error：服务器内部错误，无法完成请求。

get和post区别

get：参数会在url上面，并且有长度限制一般是几千个字符，支持资源缓存

post：参数一般放在请求体（也可以在url， 不符合语义化规范），可以传一些大文件，但是不支持缓存

http1.1和http2的区别

http1.1

  1. 请求和响应是以纯文本-明文传输的，每次请求都会重复发送相同的头部信息，增加了带宽开销
  2. 一个请求就会占用一个TCP链接，浏览器通常会在同一域名下建立6个TCP链接，
  3. 如果同一TCP链接有多个请求，并且前面请求还没返回，就会出现“队头阻塞”，
  4. 默认使用“短连接”，每次请求完成后会关闭连接，虽然支持“长连接”（Keep-Alive），但多个请求仍然需要排队处理。

http2

  • 支持多路复用，多个请求可以复用一个TCP链接，
  • 如果同一TCP链接存在多个请求和响应会以二进制帧的形式传输，互不干扰,引入了“头部压缩”（Header Compression），通过 HPACK 算法减少重复头部信息的传输，降低了带宽占用
  • 这两个特点共同解决了队头阻塞的问题，提高了并发性能，
  • 默认使用长连接，所有请求共享一个 TCP 连接，连接复用减少了连接建立和关闭的开销
  • 支持服务器推送，服务器可以在客户端请求之前主动推送资源（如 CSS、JS 文件），减少延迟
特性HTTP/1.1HTTP/2
多路复用不支持支持
数据传输格式明文二进制
头部压缩不支持支持（HPACK 算法）
服务器推送不支持支持
连接复用部分支持（Keep-Alive）完全支持
加密传输可选（HTTP 或 HTTPS）主流浏览器要求 HTTPS
性能较低高

实际开发里的http优化

  1. 合并资源：将多个CSS、JS文件合并为一个文件，精灵图，减少请求次数

  2. 使用HTTP/2

    • 多路复用：HTTP/2支持在一个TCP连接中并发多个请求，减少连接开销。
    • 头部压缩：HTTP/2对请求和响应头部进行压缩，减少数据传输量。
    • 服务器推送：服务器可以主动推送资源到客户端，减少等待时间。

  3. CDN加速：静态资源（img、JS）放到离用户近的服务器

  4. 缓存控制：静态资源设置长缓存，max-age= 1年（文件名带hash，代码变了文件名就变）

  5. 文件压缩：HTTP Response 报文中，用 Content-Encoding 指明使用 gzip 压缩

  6. 使用webp格式图片：能够优化网页加载速度的原因主要在于其高效的压缩算法和更小的文件体积

    • 有损压缩：相比 JPEG，WebP 的文件体积通常可以减少 25%-34% ，但图像质量几乎无损。
    • 无损压缩：相比 PNG，WebP 的文件体积可以减少 26%  左右。

什么是跨域及常见跨域的解决办法

同源是指：

  • 协议（protocol）
  • 域名（host）
  • 端口（port）

三者必须完全相同，才被认为是同源。

跨域问题是浏览器的安全机制导致的，解决跨域问题的方法需要根据具体场景选择：

  • 简单场景：可以使用 JSONP 或 CORS。
  • 复杂场景：可以使用代理服务器或 Nginx 反向代理。
  • 实时通信：可以使用 WebSocket。
  • 页面间通信：可以使用 iframe + postMessage。
avatar
文章
阅读
粉丝