以下是一份详细的前端计算机网络常问问题大全，涵盖核心概念、协议、优化及安全等方向，每个问题均附有详细解释：
一、HTTP/HTTPS 相关问题
1. HTTP 和 HTTPS 的区别？
• HTTP：明文传输，端口 80，无加密，易被中间人攻击。
• HTTPS：通过 SSL/TLS 加密，端口 443，需 CA 证书验证身份，保证数据完整性和机密性。
2. HTTP/1.1 vs HTTP/2 核心改进？
• HTTP/1.1：串行请求（队头阻塞）、无头部压缩、不支持服务器推送。
• HTTP/2：多路复用（一个连接并行传输）、头部压缩（HPACK）、服务器主动推送资源。
3. HTTP 状态码分类及常见状态码
• 1xx：信息性状态码（如 101 协议切换）。
• 2xx：成功（200 OK、206 部分内容）。
• 3xx：重定向（301 永久重定向、302 临时重定向、304 缓存有效）。
• 4xx：客户端错误（400 请求错误、401 未授权、403 禁止访问、404 未找到）。
• 5xx：服务端错误（500 内部错误、502 网关错误、504 网关超时）。
4. HTTP 强缓存与协商缓存
• 强缓存：通过 Cache-Control（max-age）和 Expires 实现，直接使用本地缓存，无需请求服务器。
• 协商缓存：通过 Last-Modified/If-Modified-Since 或 ETag/If-None-Match 向服务器验证资源是否更新，返回 304 或新资源。
5. HTTPS 的握手过程（TLS 握手）
- 客户端发送支持的加密套件和随机数。
- 服务器返回证书、选择的加密套件和随机数。
- 客户端验证证书，生成预主密钥并用公钥加密发送。
- 双方通过随机数和预主密钥生成会话密钥，后续通信对称加密。
二、TCP/UDP 相关问题
6. TCP 和 UDP 的区别
• TCP：面向连接、可靠传输（确认重传、流量控制、拥塞控制）、有序、适合文件传输。
• UDP：无连接、不可靠、低延迟、适合实时通信（视频、语音）。
7. TCP 三次握手与四次挥手
• 三次握手（建立连接）：
- 客户端发送
SYN=1, seq=x。 - 服务器回复
SYN=1, ACK=1, seq=y, ack=x+1。 - 客户端发送
ACK=1, seq=x+1, ack=y+1。
• 四次挥手（关闭连接）： - 客户端发送
FIN=1。 - 服务器回复
ACK=1。 - 服务器发送
FIN=1。 - 客户端回复
ACK=1（等待 2MSL 后关闭）。
8. TCP 如何保证可靠性？
• 确认应答（ACK）：接收方确认收到数据。
• 超时重传：未收到 ACK 则重发。
• 流量控制：滑动窗口机制调整发送速率。
• 拥塞控制：慢启动、拥塞避免、快速重传等策略。
三、WebSocket 相关问题
9. WebSocket 与 HTTP 长轮询的区别
• HTTP 长轮询：客户端不断轮询服务器，实时性差、开销大。
• WebSocket：基于 TCP 的全双工通信，通过一次 HTTP 握手升级协议（101 Switching Protocols），适合实时聊天、游戏等场景。
四、DNS 相关问题
10. DNS 解析过程
- 浏览器缓存 → 系统 hosts 文件 → 本地 DNS 服务器。
- 本地 DNS 递归查询：根域名服务器 → 顶级域（.com）→ 权威域名服务器 → 返回 IP。
11. DNS 预解析（Prefetching）
• 通过 <link rel="dns-prefetch" href="//example.com"> 提前解析域名，减少延迟。
五、跨域问题
12. 同源策略（Same-Origin Policy）
• 协议、域名、端口一致才视为同源，限制跨域 AJAX 请求、Cookie 访问等。
13. 跨域解决方案
• CORS（主流方案）：服务器设置 Access-Control-Allow-Origin，简单请求直接放行，复杂请求需预检（OPTIONS）。
• JSONP：通过 <script> 标签加载跨域数据，仅支持 GET 请求。
• 代理服务器：前端请求同源代理，由代理转发请求。
• postMessage：跨窗口通信 API。
六、网络安全
14. XSS（跨站脚本攻击）
• 原理：注入恶意脚本到页面（如未转义的用户输入）。
• 防御：输入过滤、输出转义（如 Vue/React 自动转义）、设置 Content-Security-Policy（CSP）。
15. CSRF（跨站请求伪造）
• 原理：诱导用户点击链接，伪造合法请求（如携带用户 Cookie）。
• 防御：同源检测、Token 验证、设置 SameSite Cookie 属性。
16. 中间人攻击（MITM）
• 场景：攻击者截获 HTTPS 通信。
• 防御：使用 HTTPS、HSTS（强制 HTTPS）、证书严格校验。
七、性能优化
17. 从输入 URL 到页面加载的完整过程
- DNS 解析 → TCP 握手 → HTTP 请求 → 服务器处理 → 返回响应 → 浏览器解析 HTML/CSS/JS → 渲染页面。
18. 减少 HTTP 请求的方法
• 合并资源（雪碧图、JS/CSS 合并）、使用缓存、内联小资源、懒加载图片。
19. CDN 的作用
• 将静态资源分发到全球节点，减少网络延迟，提高访问速度。
八、其他协议与技术
20. HTTP/3 的核心改进
• 基于 QUIC 协议（UDP 实现），解决队头阻塞、支持连接迁移、0-RTT 快速握手。
21. WebRTC 的作用
• 支持浏览器间点对点实时通信（音视频、数据传输），无需插件。
22. Web 安全头部
• Content-Security-Policy：限制资源加载来源。
• X-Content-Type-Options: nosniff：禁止浏览器猜测 MIME 类型。
• Strict-Transport-Security：强制使用 HTTPS。
九、高频进阶问题
TCP 的粘包/拆包问题如何解决？
◦ 固定包长度、添加分隔符、自定义协议（如长度 + 内容）。
OPTIONS 预检请求的作用？
◦ 检查服务器是否支持跨域请求，避免复杂请求（如 PUT、自定义头）直接触发主请求。Session、Cookie、Token 的区别？
◦ Cookie：存储在客户端的会话标识。
◦ Session：存储在服务端的用户状态。
◦ Token：无状态认证（如 JWT），可避免 CSRF。
十、综合场景题
如何实现网页秒开？
◦ 答案方向：SSR、资源预加载、CDN、HTTP/2 推送、代码分割 + 懒加载。大量图片的页面如何优化？
◦ 答案方向：懒加载、WebP 格式、图片 CDN、响应式图片（srcset）、压缩工具。
以上问题覆盖了前端面试中 90% 的计算机网络考点，建议结合具体场景和底层协议（如 TLS 握手细节、TCP 滑动窗口）深入理解原理。
WebSocket
以下是关于 WebSocket 的详细解释，适合在面试中向面试官系统化介绍：
1. WebSocket 的基本概念
• 定义：WebSocket 是一种基于 TCP 协议的全双工通信协议，允许客户端和服务器在 单个持久连接 上双向实时传输数据。
• 核心特点：
• 全双工通信：客户端和服务器可以同时发送和接收数据。
• 低延迟：无需频繁建立新连接，避免 HTTP 的请求-响应模式开销。
• 轻量级协议：数据传输头（Header）极小（仅 2-10 字节），适合高频通信场景。
• 基于 HTTP 握手：通过一次 HTTP 握手升级协议，兼容现有网络基础设施。
2. WebSocket 与 HTTP 长轮询的区别
| 特性 | WebSocket | HTTP 长轮询 |
|---|---|---|
| 通信模式 | 全双工，双向实时通信 | 半双工，客户端轮询请求 |
| 连接方式 | 持久化连接（一次握手，长期复用） | 短连接（每次请求后关闭） |
| 延迟 | 极低（直接推送） | 高（依赖轮询间隔） |
| 头部开销 | 小（仅首次握手和少量帧头） | 大（每次请求携带完整 HTTP 头） |
| 适用场景 | 实时聊天、在线游戏、股票行情 | 低频更新（如消息通知） |
3. WebSocket 工作原理
（1）握手阶段（Handshake）
- 客户端发起请求：通过 HTTP 请求头
Upgrade: websocket和Connection: Upgrade申请协议升级。GET /chat HTTP/1.1 Host: example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Version: 13 - 服务器响应升级：返回状态码
101 Switching Protocols确认协议升级。HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
（2）数据传输阶段
• 数据帧（Frame）结构：每个 WebSocket 消息由多个帧（Frame）组成，包含操作码（Opcode）、负载长度（Payload Length）和实际数据。
• 控制帧：用于心跳检测（Ping/Pong）、关闭连接（Opcode 0x8）等。
• 数据帧：传输文本（Opcode 0x1）或二进制数据（Opcode 0x2）。
4. 前端实现 WebSocket
（1）创建 WebSocket 连接
const socket = new WebSocket("wss://example.com/chat"); // 使用加密协议 wss
// 监听连接建立
socket.onopen = () => {
console.log("WebSocket 连接已建立");
socket.send("Hello Server!"); // 发送消息
};
// 监听消息接收
socket.onmessage = (event) => {
console.log("收到消息:", event.data);
};
// 监听错误
socket.onerror = (error) => {
console.error("WebSocket 错误:", error);
};
// 监听连接关闭
socket.onclose = (event) => {
console.log("连接关闭:", event.code, event.reason);
};
（2）关键 API
• send(data)：发送文本或二进制数据（Blob、ArrayBuffer）。
• close(code?, reason?)：主动关闭连接（可选状态码和原因）。
5. WebSocket 安全性
• 加密传输：使用 wss://（WebSocket Secure）协议，基于 TLS 加密通信。
• Origin 验证：服务器应校验请求头中的 Origin，防止跨站 WebSocket 劫持。
• 心跳机制（Ping/Pong）：定期发送 Ping 帧检测连接活性，避免僵尸连接。
6. 高级特性与优化
（1）断线重连
• 自动重连：在 onclose 事件中设置定时器尝试重新连接。
socket.onclose = () => {
setTimeout(() => {
new WebSocket(socket.url); // 重新连接
}, 5000);
};
（2）消息压缩
• Per-Message Deflate：通过扩展协议压缩消息内容，减少带宽占用。
（3）与 HTTP/2 的关系
• HTTP/2 不支持 WebSocket：HTTP/2 主要优化 HTTP 请求，WebSocket 仍独立运行。
• 替代方案：部分框架（如 gRPC-Web）基于 HTTP/2 实现双向流，但兼容性有限。
7. 应用场景
- 实时聊天应用：消息即时推送，避免轮询延迟。
- 在线多人游戏：同步玩家状态和动作。
- 股票行情系统：高频更新价格数据。
- 协同编辑工具：实时同步文档内容。
8. 常见问题（面试可能追问）
Q1: WebSocket 如何保证消息顺序？
• 底层依赖 TCP：TCP 协议本身保证数据按顺序到达，WebSocket 直接复用此特性。
Q2: WebSocket 如何与 RESTful API 共存？
• 分工明确：RESTful API 处理 CRUD 操作，WebSocket 处理实时推送。
Q3: 如何兼容旧浏览器？
• 降级方案：使用库（如 Socket.IO）自动回退到长轮询（Long Polling）。
9. 相关工具与库
• Socket.IO：封装 WebSocket 并提供自动重连、多路复用等功能。
• ws：Node.js 的轻量级 WebSocket 库。
• SignalR：ASP.NET 的实时通信框架，支持 WebSocket 和降级方案。
总结
在面试中介绍 WebSocket 时，需强调其 全双工、低延迟、持久连接 的核心优势，并结合具体应用场景（如实时聊天）说明其价值。同时，需熟悉握手过程、前端 API 使用和常见问题（如安全性、兼容性）的解决方案。通过对比 HTTP 长轮询，展示对实时通信技术的深入理解。
DNS解析过程
跨域解决方案
以下是关于 JSONP、CORS 和 OPTIONS 预检请求的详细解析，涵盖原理、实现和对比：
一、JSONP（JSON with Padding）
1. 基本原理
• 跨域限制：浏览器同源策略禁止跨域 AJAX 请求，但允许 <script> 标签加载跨域资源。
• 核心思想：通过动态创建 <script> 标签，请求一个返回 JavaScript 函数调用 的接口，将数据包裹在函数参数中传递。
2. 实现步骤
- 定义回调函数：
function handleResponse(data) { console.log("Received:", data); } - 动态创建 script 标签：
const script = document.createElement('script'); script.src = 'https://api.example.com/data?callback=handleResponse'; document.body.appendChild(script); - 服务器响应：
handleResponse({ "name": "Alice", "age": 30 }); // 返回函数调用的字符串
3. 特点
• 仅支持 GET 请求：参数通过 URL 传递。
• 需服务器配合：服务器需支持 callback 参数并返回 JS 代码。
• 安全隐患：可能被恶意注入代码（XSS），需谨慎验证来源。
4. 应用场景
• 兼容老式浏览器（如 IE9 以下）。
• 第三方数据源提供 JSONP 接口（如早期天气 API）。
二、CORS（跨域资源共享）
1. 基本原理
• 官方标准：W3C 规范，通过 HTTP 头部控制跨域访问。
• 核心流程：
- 浏览器自动在跨域请求中添加
Origin头。 - 服务器响应
Access-Control-Allow-Origin等头部，声明允许的源。
2. 简单请求 vs 预检请求
（1）简单请求（Simple Request）
• 条件：
• 方法为 GET、HEAD 或 POST。
• 仅包含安全头部（如 Accept、Content-Type 仅限于 text/plain、application/x-www-form-urlencoded、multipart/form-data）。
• 流程：
- 浏览器直接发送请求，携带
Origin头。 - 服务器返回
Access-Control-Allow-Origin，若匹配则允许访问。
（2）预检请求（Preflight Request）
• 触发条件：
• 方法为 PUT、DELETE 等非简单方法。
• 包含自定义头（如 Authorization）或 Content-Type: application/json。
• 流程：
- 浏览器先发送
OPTIONS请求（预检），询问服务器是否允许实际请求。 - 服务器响应允许的方法、头、有效期等。
- 预检通过后，发送实际请求。
3. OPTIONS 预检请求详解
（1）请求头关键字段
• Access-Control-Request-Method：实际请求的方法（如 PUT）。
• Access-Control-Request-Headers：实际请求的自定义头（如 X-Custom-Header）。
（2）响应头关键字段
• Access-Control-Allow-Origin：允许的源（或 * 表示任意）。
• Access-Control-Allow-Methods：允许的 HTTP 方法（如 GET, POST, PUT）。
• Access-Control-Allow-Headers：允许的请求头（如 X-Custom-Header）。
• Access-Control-Max-Age：预检结果缓存时间（单位：秒）。
（3）预检请求示例
客户端发送 OPTIONS：
OPTIONS /data HTTP/1.1
Origin: https://your-site.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
服务器响应：
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://your-site.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 3600
4. CORS 实现
服务端配置（以 Node.js 为例）
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', 'https://your-client.com');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.setHeader('Access-Control-Max-Age', '3600');
// 处理预检请求
if (req.method === 'OPTIONS') {
res.sendStatus(204); // 空响应
} else {
next();
}
});
客户端请求（带凭据）
fetch('https://api.example.com/data', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include' // 允许发送 Cookie
});
服务端需额外配置：
Access-Control-Allow-Credentials: true
三、JSONP 与 CORS 对比
| 特性 | JSONP | CORS |
|---|---|---|
| 协议支持 | 仅 GET | 所有 HTTP 方法 |
| 安全性 | 低（易受 XSS 攻击） | 高（需服务器显式配置） |
| 数据格式 | 仅 JSON（包裹为 JS） | 任意类型（JSON、文本、二进制） |
| 浏览器兼容性 | 所有浏览器（包括旧版 IE） | 现代浏览器（IE10+） |
| 服务器改动 | 需支持回调函数 | 需配置 CORS 响应头 |
四、总结
• JSONP：适合简单 GET 请求和兼容旧浏览器，但安全性差。
• CORS：现代跨域标准，支持复杂场景，需服务器配合。
• OPTIONS 预检：非简单请求的“探路”机制，确保跨域安全。
最佳实践：
• 优先使用 CORS，尤其是需要安全性和复杂请求的场景。
• 仅在必须兼容旧系统时使用 JSONP，并严格验证数据来源。