http和浏览器相关的高频面试题

一、HTTP相关问题

1. HTTP状态码及其含义

✅ HTTP 状态码分类：

• 1xx（信息响应）：101（协议切换）
• 2xx（成功）：200（OK）、201（Created）
• 3xx（重定向）：301（永久重定向）、302（临时重定向）、304（缓存）
• 4xx（客户端错误）：400（请求错误）、401（未授权）、403（禁止访问）、404（找不到资源）
• 5xx（服务器错误）：500（服务器异常）、502（网关错误）、503（服务器过载）

常见状态码包括：

• 200 OK：请求成功。
• 301 Moved Permanently：资源永久重定向。
• 302 Found：临时重定向。
• 304 Not Modified：协商缓存生效，资源未修改。
• 400 Bad Request：请求语法错误。
• 401 Unauthorized：未认证。
• 403 Forbidden：服务器拒绝请求。
• 404 Not Found：资源不存在。
• 500 Internal Server Error：服务器内部错误。

2. GET和POST的区别

• 参数位置：GET通过URL传递，POST通过请求体。
• 安全性：GET参数可见，不适合敏感数据；POST参数不可见。
• 数据大小：GET受URL长度限制（约4KB），POST无限制。
• 缓存：GET会被浏览器主动缓存，POST需手动设置。
• TCP数据包：GET发送一个包（Header+Data），POST发送两个（先Header，后Data）。

3. 📌 1. HTTP1.0、HTTP1.1 和 HTTP2.0、HTTP3.0 有什么区别？

✅ HTTP1.0（1996年）

• 每次请求都会建立新的 TCP 连接，请求/响应完就关闭，性能低。
• 无 Keep-Alive 机制，每个请求都需重新建立连接。
• 不支持并发请求，浏览器需等待请求完成才能发起下一个请求。

✅ HTTP1.1（1999年）

• 默认开启 Keep-Alive，减少连接创建开销，提高性能。
• 支持管线化（Pipelining），可以同时发送多个请求，但服务器仍需按顺序响应，容易阻塞。
• 新增 Host 头，支持虚拟主机（多个域名共用 IP）。
• 支持分块传输（Chunked Transfer），适合大文件传输。

✅ HTTP2.0（2015年）

• 多路复用（Multiplexing）：多个请求共用一个 TCP 连接，避免队头阻塞。
• 二进制格式：比 HTTP1.x 的文本格式更高效。
• 头部压缩（HPACK）：减少请求头占用的带宽。
• 服务器推送（Server Push）：可主动向客户端发送资源，提高性能。

✅ HTTP3.0（基于 QUIC）

• 基于 UDP 协议，减少握手延迟，连接更快。
• 避免 TCP 队头阻塞问题，每个数据流独立传输。
• 内置 TLS 1.3 加密，提高安全性。

💡 总结：HTTP3.0 最快，但目前仍未完全普及，HTTP2.0 是大多数网站的最佳选择。

4. HTTPS的工作原理

• 加密流程：基于SSL/TLS协议，通过非对称加密交换密钥，后续通信使用对称加密。
• 证书验证：客户端验证服务器证书的合法性（颁发机构、域名匹配等）。
• 端口：默认443（HTTP为80）。

二、浏览器相关问题

5. 从输入URL到页面渲染的完整流程

1. DNS解析：浏览器缓存 → 系统缓存 → 路由器 → ISP → 递归查询。
2. TCP三次握手：建立连接。
3. 发送HTTP请求：携带请求头和参数。
4. 服务器处理请求：返回响应（HTML/CSS/JS等）。
5. 浏览器解析渲染：
   • 构建DOM树（HTML解析）。
   • 构建CSSOM树（样式规则）。
   • 合并生成渲染树（Render Tree）。
   • 布局（Layout）和绘制（Painting）。
6. TCP四次挥手：关闭连接。

6. 浏览器缓存机制

• 强制缓存：通过Cache-Control（优先级高）或Expires头控制，直接使用本地缓存。
• 协商缓存：通过ETag（资源标识）或Last-Modified（修改时间）验证资源是否更新，返回304时复用缓存。

7. 跨域解决方案

✅ 跨域（Same-Origin Policy）：
同源策略（Same-Origin Policy）是浏览器的安全机制，要求协议、域名、端口都相同才能访问资源。

✅ 跨域解决方案：

1. CORS（推荐）：服务端配置 Access-Control-Allow-Origin 头，允许跨域请求。
2. JSONP：利用 <script> 标签的跨域能力，但仅支持 GET 请求。
3. Nginx 反向代理：在服务器端代理请求，避免跨域。
4. PostMessage：用于iframe 之间通信。
5. WebSocket：不受同源策略限制，可跨域通信。

💡 推荐使用 CORS + Nginx 反向代理。

8 Cookie、LocalStorage、SessionStorage的区别

9. TCP三次握手与四次挥手

📌 2. TCP 三次握手和四次挥手的过程？
✅ TCP 三次握手（建立连接）：

1. 客户端 发送 SYN（同步）请求，表示“我要建立连接”。
2. 服务器 返回 SYN+ACK（确认），表示“可以建立连接”。
3. 客户端 发送 ACK（确认），连接建立成功。

✅ TCP 四次挥手（断开连接）：

1. 客户端 发送 FIN（终止），表示“我要关闭连接”。
2. 服务器 返回 ACK，表示“收到请求，但还没准备好断开”。
3. 服务器 发送 FIN，表示“现在可以关闭了”。
4. 客户端 发送 ACK，连接完全断开。

💡 为什么挥手要四次？
因为 TCP 是全双工通信，双方都需要单独关闭自己的数据通道，所以需要 4 次挥手。

三、高频扩展问题

10. HTTP无状态如何解决？

通过Cookie（客户端）或Session（服务端）记录状态。

11. TCP与UDP的区别？

• TCP：面向连接、可靠传输（如HTTP）、有拥塞控制。
• UDP：无连接、高效（如视频流）、不保证可靠性。

12. 页面渲染优化策略？

• 减少DOM层级，避免深层嵌套。
• CSS放在头部，JS使用defer/async避免阻塞。
• 使用缓存减少重复请求。

13. ** GET 和 POST 的区别？**

✅ 主要区别：

💡 总结：

• GET 适合查询数据，如搜索、页面跳转。
• POST 适合提交数据，如表单、上传文件。

14. 强缓存 vs 协商缓存？

✅ 浏览器缓存分为：

1. 强缓存（不用请求服务器）：

   • Expires（HTTP1.0）：指定缓存到期时间，受客户端时间影响。
   • Cache-Control: max-age=3600（HTTP1.1）：相对时间，单位秒。

2. 协商缓存（需要服务器确认）：

   • Last-Modified + If-Modified-Since（基于修改时间）。
   • ETag + If-None-Match（基于文件指纹）。

💡 缓存策略：

• 静态资源（CSS/JS/图片） -> 强缓存，减少请求数。
• API 接口数据 -> 协商缓存，确保数据最新。

15. 重排（Reflow）和重绘（Repaint）的区别？

16. 前端如何优化网页性能？

✅ 优化策略：

1. 减少 HTTP 请求（合并 CSS/JS、使用雪碧图）。
2. 开启 Gzip 压缩（减少文件体积）。
3. 使用 CDN 加速（减少服务器压力）。
4. 合理使用缓存（强缓存 + 协商缓存）。
5. 懒加载 & 预加载（lazyload、prefetch）。
6. 优化 DOM 操作（减少回流、批量操作）。
7. 使用 HTTP2.0 多路复用。

17. 什么是 XSS（跨站脚本攻击）？如何防范？

✅ XSS（Cross-Site Scripting）：攻击者在网页中注入恶意 JavaScript 代码，从而窃取用户信息、劫持会话、篡改页面等。

✅ XSS 类型：

1. 存储型 XSS（Persistent XSS）：恶意代码存入数据库，当用户访问时执行。
   示例：攻击者提交 <script>alert('Hacked!')</script> 到评论区，其他人访问该页面时会执行脚本。
2. 反射型 XSS（Reflected XSS）：攻击代码作为 URL 参数传输，诱导用户点击触发。
   示例：https://example.com?search=<script>alert('XSS')</script>
3. DOM 型 XSS（DOM-based XSS）：前端 JavaScript 操作不当导致 XSS。
   示例：

   document.write(location.search); // 直接拼接 URL 参数，易受 XSS 攻击
   

✅ 如何防范 XSS？

1. 输入校验（过滤恶意代码）：
   • 禁止 <script>、onerror 等可执行代码。
   • 仅允许安全 HTML 标签，如 <b>、<i>、<p>。
2. 输出编码：
   • 使用 innerText 代替 innerHTML，防止 HTML 解析。
   • encodeURIComponent() 对 URL 进行编码。
3. CSP（内容安全策略）：
   • 只允许指定来源的脚本执行，禁止 inline 代码。

   Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com
   

4. HttpOnly Cookie：禁止 JavaScript 读取 Cookie，防止 XSS 窃取 Session。

18. 什么是 CSRF（跨站请求伪造）？如何防范？

✅ CSRF（Cross-Site Request Forgery）：攻击者伪造用户身份，在用户不知情的情况下执行恶意操作（如转账、改密码）。

✅ CSRF 攻击示例：

1. 用户登录 bank.com（已有 Cookie）。
2. 访问攻击者网站 evil.com，该网站自动请求：

   <img src="https://bank.com/transfer?to=attacker&amount=10000" />
   

3. 浏览器带上 bank.com 的 Cookie，导致自动转账。

✅ 如何防范 CSRF？

1. SameSite Cookie（最推荐）：
   • SameSite=Strict：禁止任何跨站请求携带 Cookie。
   • SameSite=Lax：仅允许 GET 请求携带 Cookie，不允许表单提交。

   Set-Cookie: sessionid=abc123; HttpOnly; Secure; SameSite=Strict
   

2. CSRF Token（令牌校验）：
   • 后端生成 csrf_token 并存入表单。
   • 提交时，校验 csrf_token 是否匹配。
3. Referer 校验：
   • 服务器检查请求头 Referer 是否来自本站。
4. CORS 限制：
   • 通过 Access-Control-Allow-Origin 仅允许可信域访问。

19. Cookie 和 Token 的区别？

✅ Cookie：

• 存储位置：浏览器（自动随请求发送）。
• 安全性：容易被 XSS 窃取。
• 用途：主要用于会话管理（Session ID）。

✅ Token（如 JWT）：

• 存储位置：LocalStorage / SessionStorage / Cookie。
• 安全性：不自动随请求发送，需手动放入 Authorization 头。
• 用途：适合前后端分离，可用于单点登录（SSO）。

💡 推荐使用 Token 进行身份认证，搭配 HttpOnly Cookie 保护安全。

20. OAuth2.0 认证流程？

✅ OAuth2.0 是常见的第三方授权登录协议，如**“使用 GitHub 登录”**。

✅ OAuth2.0 授权流程：

1. 用户点击 “使用 GitHub 登录”。
2. 跳转到 GitHub 授权页面，用户输入 GitHub 账号密码。
3. GitHub 返回授权码（code）。
4. 前端用 code 请求服务器，服务器向 GitHub 获取 access_token。
5. 服务器用 access_token 请求 GitHub API，获取用户信息。

✅ OAuth2.0 常见授权方式：

• 授权码模式（最安全，推荐）。
• 隐式模式（Token 存储在 URL，容易泄露）。
• 密码模式（不推荐，用户需提供密码）。

21. HTTPS 如何保证数据安全？

✅ HTTPS = HTTP + SSL/TLS 加密，主要作用：

1. 数据加密：防止流量被窃听（防止中间人攻击）。
2. 身份认证：防止钓鱼网站（CA 证书验证）。
3. 数据完整性：防止数据被篡改（MAC 机制）。

✅ TLS 握手过程：

1. 客户端：发起 HTTPS 请求，提供支持的加密算法列表。
2. 服务器：返回 SSL 证书，包含公钥和加密算法。
3. 客户端：
   • 验证服务器证书是否可信。
   • 生成随机数，并用公钥加密，发送给服务器。
4. 服务器：
   • 用私钥解密随机数。
   • 生成会话密钥，用于后续对称加密通信。

22. 前端如何进行数据加密？

✅ 常见加密方式：

✅ 示例：RSA 加密登录密码

import JSEncrypt from 'jsencrypt';

const encrypt = new JSEncrypt();
encrypt.setPublicKey(PUBLIC_KEY);
const encryptedPwd = encrypt.encrypt(password);

💡 服务器收到加密密码后，用私钥解密。