HTTP

front_
623 阅读6分钟

一、HTTP 基础

1. HTTP 协议是什么？它的主要特点是什么？

答案：

  • HTTP（HyperText Transfer Protocol）是用于传输超媒体文档（如 HTML）的应用层协议。
  • 特点：
    • 无状态（Stateless）：默认不保留请求间状态，依赖 Cookie/Session 管理。
    • 基于请求-响应模型（Client-Server）。
    • 支持多种方法（GET、POST 等）和状态码。
    • 可扩展性强（如自定义 Headers）。

2. HTTP 请求和响应的组成部分有哪些？

答案：

  • 请求结构：

    GET /index.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept: text/html
    • 请求行：方法（Method）、URL、协议版本。
    • 请求头（Headers）：附加信息（如 Content-Type）。
    • 请求体（Body）：POST/PUT 请求的数据。

  • 响应结构：

    HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234

<html>...</html>
    • 状态行：协议版本、状态码、状态消息。
    • 响应头（Headers）：元数据（如 Cache-Control）。
    • 响应体（Body）：返回的资源内容（如 HTML、JSON）。

3. HTTP 方法 GET 和 POST 的区别？

答案：

特性GETPOST
数据位置URL 参数（Query String）请求体（Body）
数据长度受限（URL 长度限制，通常 2KB）无限制
安全性数据明文暴露，不适合敏感信息数据在 Body 中，相对更安全
幂等性幂等（多次请求结果相同）非幂等（可能修改服务器状态）
缓存可缓存默认不可缓存

二、HTTP 状态码

4. 常见状态码及其含义？

答案：

  • 1xx（信息性）：请求已接收，继续处理。
    • 100 Continue：客户端应继续发送请求体。
  • 2xx（成功）：请求成功处理。
    • 200 OK：标准成功响应。
    • 201 Created：资源已创建（如 POST 成功）。
    • 204 No Content：成功但无返回内容（如 DELETE）。
  • 3xx（重定向）：需进一步操作完成请求。
    • 301 Moved Permanently：永久重定向。
    • 302 Found：临时重定向。
    • 304 Not Modified：资源未修改（缓存有效）。
  • 4xx（客户端错误）：
    • 400 Bad Request：请求语法错误。
    • 401 Unauthorized：未认证。
    • 403 Forbidden：无权访问。
    • 404 Not Found：资源不存在。
  • 5xx（服务器错误）：
    • 500 Internal Server Error：服务器内部错误。
    • 502 Bad Gateway：网关错误。
    • 503 Service Unavailable：服务不可用。

5. 301 和 302 状态码的区别？

答案：

  • 301 Moved Permanently：资源已永久移动到新 URL，浏览器会缓存此重定向，后续请求直接访问新 URL。
  • 302 Found：资源临时重定向，浏览器下次请求仍使用原 URL。

三、HTTP 缓存

6. HTTP 缓存机制有哪些？如何控制缓存？

答案：

  • 缓存策略：
    • 强缓存：直接使用本地缓存，不发送请求（Cache-Control/Expires）。
    • 协商缓存：发送请求验证缓存是否有效（Last-Modified/ETag）。
  • 关键 Header：
    • Cache-Control（优先级高于 Expires）：
      • max-age=3600：资源有效期（秒）。
      • no-cache：强制协商缓存。
      • no-store：禁止缓存。
    • Expires：资源过期时间（HTTP/1.0，受客户端时间影响）。
    • Last-Modified：资源最后修改时间（精度到秒，可能不准）。
    • ETag：资源唯一标识（哈希值，更精准）。

7. ETag 和 Last-Modified 的区别？

答案：

  • Last-Modified：基于时间戳，精度为秒，可能因文件内容未变但时间戳更新导致缓存失效。
  • ETag：基于内容哈希值，更精确，但计算可能消耗服务器资源。

四、HTTP 安全

8. HTTPS 的工作原理是什么？

答案：

  • HTTPS = HTTP + TLS/SSL 加密，通过以下步骤建立安全连接：
    1. TCP 三次握手建立连接。
    2. TLS 握手：
      • 客户端发送支持的加密算法列表。
      • 服务器返回证书和选择的加密算法。
      • 客户端验证证书（CA 颁发机构），生成对称密钥并用证书公钥加密发送给服务器。
      • 服务器用私钥解密，后续通信使用对称加密。

9. 什么是 CORS（跨域资源共享）？如何解决跨域问题？

答案：

  • CORS：浏览器安全机制，限制跨域请求（协议、域名、端口任一不同即为跨域）。
  • 解决方案：
    • 简单请求（GET/POST/HEAD，无自定义 Header）：服务器返回 Access-Control-Allow-Origin: *。
    • 预检请求（复杂请求如 PUT/DELETE）：
      1. 浏览器发送 OPTIONS 请求检查权限。
      2. 服务器返回允许的 Method 和 Headers（Access-Control-Allow-Methods, Access-Control-Allow-Headers）。
    • JSONP：利用 <script> 标签跨域加载资源（仅 GET 请求）。
    • 代理服务器：前端请求同域代理，代理转发到目标服务器。

10. 如何防范 CSRF（跨站请求伪造）攻击？

答案：

  • CSRF 原理：攻击者诱导用户访问恶意页面，伪造用户身份发起请求（如转账）。
  • 防御方法：
    • Token 验证：服务器生成随机 Token 并嵌入表单，提交时验证。
    • SameSite Cookie：设置 SameSite=Strict/Lax，限制跨站发送 Cookie。
    • 验证 Referer/Origin Header：检查请求来源是否合法。
    • 二次验证：敏感操作需密码或短信验证。

五、HTTP 性能优化

11. HTTP/1.1 的队头阻塞（HOL Blocking）是什么？HTTP/2 如何解决？

答案：

  • HTTP/1.1 队头阻塞：同一 TCP 连接中，前一个请求未完成会阻塞后续请求。
  • HTTP/2 解决方案：
    • 多路复用（Multiplexing）：一个 TCP 连接上并行传输多个请求/响应。
    • 二进制分帧：数据分割为帧（Headers/Data Frame），乱序传输后重组。
    • 头部压缩（HPACK）：减少重复 Header 传输。

12. HTTP/2 和 HTTP/3 的核心区别？

答案：

  • HTTP/2：基于 TCP，多路复用解决队头阻塞，但 TCP 层仍有重传问题。
  • HTTP/3：基于 QUIC 协议（UDP 实现），解决 TCP 队头阻塞，支持 0-RTT 快速握手，连接迁移（IP 切换不影响连接）。

13. 如何减少 HTTP 请求数量？

答案：

  • 合并资源：CSS/JS 文件合并、图片雪碧图（Sprite）。
  • 内联资源：小图片转为 Base64 嵌入 HTML/CSS。
  • 使用缓存：强缓存减少重复请求。
  • 懒加载：非首屏资源延迟加载。

六、其他高级问题

14. WebSocket 和 HTTP 的关系？

答案：

  • WebSocket：基于 HTTP 建立的持久化全双工通信协议（ws:// 或 wss://）。
  • 握手过程：
    1. 客户端发送 HTTP 请求，Header 包含 Upgrade: websocket。
    2. 服务器返回 101 Switching Protocols，升级为 WebSocket 连接。
  • 应用场景：实时聊天、股票行情推送等。

15. 什么是 HTTP 持久连接（Keep-Alive）？

答案：

  • HTTP/1.1 默认启用 Keep-Alive：复用 TCP 连接发送多个请求，减少握手开销。
  • 控制参数：
    • Connection: Keep-Alive（HTTP/1.1 默认）。
    • Keep-Alive: timeout=5, max=100（空闲 5 秒后关闭，最多处理 100 个请求）。

16. 如何实现文件上传的断点续传？

答案：

  • 前端：将文件分片（Chunk），记录已上传的分片索引。
  • 后端：
    • 检查 Content-Range Header 确定上传范围。
    • 保存分片，合并后验证完整性（MD5）。
  • 关键 Header：Content-Range: bytes 0-999/2000。

七、实战场景

17. 如何在前端监控 HTTP 请求性能？

答案：

  • Performance API： 
    const [entry] = performance.getEntriesByName(url);
console.log(entry.duration); // 请求耗时
  • 浏览器 DevTools：Network 面板分析请求瀑布流。
  • 前端埋点：拦截请求（如 Axios 拦截器），上报耗时、状态码等指标。

18. 如何优化首屏加载速度？

答案：

  • 减少关键资源数量：内联关键 CSS/JS，异步加载非关键脚本（async/defer）。
  • CDN 加速：静态资源分发到全球节点。
  • 服务端渲染（SSR）：直接返回渲染好的 HTML。
  • 预加载：<link rel="preload"> 提前加载关键资源。
avatar
文章
阅读
粉丝