前言

计算机网络作为前端开发中绕不开的基础知识，面试时也特爱问，很多时候都有可能被打一个冷不防。这份文档旨在整理前端面试中高频出现的计算机网络知识点，希望能帮助到正在准备面试的你。

内容基于个人面试经验和学习总结，如有不当之处，欢迎指正交流。本文不追求面面俱到，而是聚焦于前端面试中的高频考点，力求每个知识点都讲透彻、讲实用。

一、HTTP 协议篇

1.1 HTTP 基础

HTTP 是什么？

核心答案： HTTP（超文本传输协议）是应用层协议，基于TCP/IP，采用请求-响应模式，无状态。用于客户端和服务器之间传输超文本数据。
HTTP 请求方法详解

核心答案：
- GET：获取资源，幂等，可缓存
- POST：提交数据，非幂等，不可缓存
- PUT：更新整个资源，幂等
- DELETE：删除资源，幂等
- HEAD：获取响应头，不返回body
- OPTIONS：预检请求，询问支持的方法
- PATCH：部分更新资源
HTTP 状态码分类及常见状态码

核心答案：
- 1xx：信息提示（100 Continue）
- 2xx：成功（200 OK、201 Created、204 No Content）
- 3xx：重定向（301永久、302临时、304未修改）
- 4xx：客户端错误（400 Bad Request、401未授权、403禁止、404未找到）
- 5xx：服务器错误（500内部错误、502网关错误、503服务不可用）

HTTP 报文结构

请求报文：
请求行：GET /index.html HTTP/1.1
请求头：Host: www.example.com
空行
请求体：（POST请求的数据）

响应报文：
状态行：HTTP/1.1 200 OK
响应头：Content-Type: text/html
空行
响应体：<html>...</html>

1.2 HTTP 缓存机制

强缓存 vs 协商缓存

核心答案：
- 强缓存：不发请求，直接从缓存取（Cache-Control、Expires）
- 协商缓存：发请求询问服务器，资源是否更新（ETag/If-None-Match、Last-Modified/If-Modified-Since）
理解tips：
- 强缓存像冰箱里的牛奶：看保质期（Cache-Control），没过期直接喝
- 协商缓存像打电话问妈妈：冰箱里的菜还能吃吗？妈妈说能吃（304）就吃，不能吃就买新的（200）

Cache-Control 详解

// 常用指令
Cache-Control: max-age=3600     // 强缓存3600秒
Cache-Control: no-cache         // 需要协商缓存
Cache-Control: no-store         // 不缓存
Cache-Control: private          // 只能浏览器缓存
Cache-Control: public           // 可以被代理服务器缓存
Cache-Control: must-revalidate  // 过期前可用，过期后必须验证

记忆技巧： “max定时间，no-cache要协商，no-store不存储”

ETag 和 Last-Modified

核心答案：

Last-Modified：文件最后修改时间（精度秒级，可能误判）
ETag：文件内容哈希值（精度高，需要计算）

优先级： ETag > Last-Modified（ETag更准确）

实际场景：

// 第一次请求
Response Headers:
  Last-Modified: Mon, 10 Jan 2024 10:00:00 GMT
  ETag: "abc123"

// 第二次请求
Request Headers:
  If-Modified-Since: Mon, 10 Jan 2024 10:00:00 GMT
  If-None-Match: "abc123"

// 未修改返回304，修改了返回200+新内容

缓存位置（Memory Cache、Disk Cache等）

核心答案（优先级从高到低）：
1. Service Worker：可编程控制
2. Memory Cache：内存缓存，快但量小，关闭Tab就没了
3. Disk Cache：硬盘缓存，慢但量大，持久化
4. Push Cache：HTTP/2推送缓存，会话级别
记忆口诀： “Service控制权最高，Memory快但活不久，Disk慢但能持久，Push是HTTP/2特有”

1.3 HTTP 版本演进

HTTP/1.0 vs HTTP/1.1

核心答案： HTTP/1.1 的改进：
- 持久连接：Connection: keep-alive（默认开启）
- 管道化：可以同时发多个请求（但有队头阻塞）
- Host头：支持虚拟主机
- 断点续传：Range头支持
- 缓存增强：Cache-Control、ETag等
理解tips：
- HTTP/1.0像打一次电话说一件事就挂
- HTTP/1.1像打一次电话可以说多件事
HTTP/2 的优势（多路复用、服务器推送等）

核心答案：
- 二进制分帧：将数据分成帧，不再是文本
- 多路复用：一个TCP连接并行处理多个请求
- 头部压缩：HPACK算法压缩头部
- 服务器推送：主动推送资源
- 流优先级：可以设置请求优先级
理解tips： HTTP/1.1像单车道排队通行，HTTP/2像多车道高速并行通行
HTTP/3 和 QUIC 协议

核心答案：
- 基于UDP：避免TCP的队头阻塞
- 0-RTT建连：减少握手延迟
- 连接迁移：IP变化不断连（手机切换WiFi/4G）
- 改进的拥塞控制：更快的恢复
记忆要点： “HTTP/3 = HTTP/2 + QUIC(UDP)”

1.4 HTTPS 安全通信

HTTP vs HTTPS

核心答案：
- HTTP：明文传输，80端口，不安全
- HTTPS：HTTP + SSL/TLS加密，443端口，安全
HTTPS 加密原理

核心答案（混合加密）：
1. 非对称加密：交换对称密钥（慢但安全）
2. 对称加密：传输数据（快）
3. 数字证书：验证服务器身份
4. 摘要算法：验证数据完整性
理解tips： 像寄贵重物品：先用保险箱（对称加密）装东西，用挂号信（非对称加密）寄保险箱钥匙，快递公司的营业执照（数字证书）证明身份
HTTPS 握手过程：

精简版答案：
1. Client Hello：客户端发送支持的加密套件
2. Server Hello：服务器选择加密套件+发送证书
3. 客户端验证证书：验证证书合法性
4. 生成会话密钥：用服务器公钥加密随机数
5. 服务器解密：得到会话密钥
6. 加密通信：使用会话密钥对称加密
中间人攻击：

核心答案： 攻击者在客户端和服务器之间，分别与两者建立连接，窃取或篡改数据。

防御方式：
- 数字证书验证
- HSTS（强制使用HTTPS）
- 证书锁定（Certificate Pinning）

二、TCP/IP 协议篇

2.1 TCP 基础

TCP 三次握手详解

核心答案：
1. SYN：客户端发送SYN=1, seq=x
2. SYN+ACK：服务器发送SYN=1, ACK=1, seq=y, ack=x+1
3. ACK：客户端发送ACK=1, seq=x+1, ack=y+1
生动比喻： 像打电话：
- “喂，听得到吗？”（SYN）
- “听得到，你听得到我吗？”（SYN+ACK）
- “我也听得到”（ACK）
为什么需要三次握手？

核心答案：
- 确认双方收发能力正常
- 防止已失效的连接请求突然传到服务器
- 同步双方序列号
两次不行的原因： 无法确认客户端的接收能力，可能造成服务器资源浪费
TCP 四次挥手详解

核心答案：
1. FIN：客户端发送FIN，进入FIN_WAIT_1
2. ACK：服务器发送ACK，客户端进入FIN_WAIT_2
3. FIN：服务器发送FIN，进入LAST_ACK
4. ACK：客户端发送ACK，进入TIME_WAIT
为什么是四次不是三次？ 服务器收到FIN时可能还有数据要发送，所以ACK和FIN分开发送

TIME_WAIT 状态的作用：

核心答案：
- 持续2MSL（最大报文生存时间）
- 作用：
  1. 确保最后的ACK能到达
  2. 让所有报文在网络中消失，避免影响新连接

2.2 TCP 可靠传输

序列号和确认应答

核心答案：
- 序列号：给每个字节编号，保证数据顺序
- 确认应答：ACK=期望收到的下一个序列号
- 累积确认：确认号之前的数据都已收到
理解tips： 像老师点名：1号到了，2号到了…如果说”我要3号”，说明1、2号都到了
超时重传机制

核心答案：
- RTO（超时时间）= RTT（往返时间）+ 4×RTT偏差
- 超时加倍：每次超时RTO翻倍（避免网络雪崩）
- 快速重传：收到3个重复ACK立即重传（不等超时）
记忆要点： “超时要等，快重传收3个重复ACK就传”
流量控制（滑动窗口）

核心答案：
- 接收窗口：接收方告诉发送方自己还能接收多少数据
- 发送窗口：发送方根据接收窗口调整发送量
- 零窗口探测：窗口为0时定期发送探测报文
生动比喻： 像自助餐：服务员（接收方）告诉你盘子还能装多少（窗口大小），装满了就说”等一下”（窗口为0）
拥塞控制

核心答案（四个算法）：
1. 慢开始：指数增长（1,2,4,8…）
2. 拥塞避免：线性增长（到达阈值后）
3. 快重传：3个重复ACK立即重传
4. 快恢复：阈值减半，不重新慢开始
记忆口诀： “慢开始指数增，避免后线性增，快重传3个ACK，快恢复阈值减半”

2.3 TCP vs UDP

两者的区别对比

核心答案：

TCP	UDP
可靠传输	不可靠
面向连接	无连接
字节流	数据报
有序	可能乱序
有流量控制、拥塞控制	无
头部20字节	头部8字节
一对一	支持一对多、多对多

记忆技巧： TCP像打电话（可靠但费事），UDP像发短信（快但不保证送达）

各自的应用场景

TCP适用：
- HTTP/HTTPS
- FTP文件传输
- SMTP邮件
- SSH远程登录
UDP适用：
- DNS查询
- 视频直播/语音通话
- 游戏实时对战
- DHCP
为什么视频直播常用 UDP？

核心答案：
- 实时性要求高：宁可丢帧也不要卡顿
- 可以容忍少量丢包：丢几帧人眼察觉不到
- 不需要重传：重传的旧数据没意义

三、浏览器网络篇

3.1 跨域问题

同源策略是什么？

核心答案：
- 同源：协议+域名+端口都相同
- 限制：DOM访问、Cookie/LocalStorage读取、AJAX请求
- 不限制：<script>、<img>、<link>标签
记忆要点： “协议域名端口，三同才同源”
跨域的解决方案汇总

核心答案（按常用度排序）：
1. CORS：服务器设置Access-Control-Allow-Origin
2. 代理服务器：同源服务器转发请求
3. JSONP：script标签+回调函数
4. WebSocket：没有同源限制
5. postMessage：iframe通信

CORS 详解

核心答案：

// 简单请求（GET/POST/HEAD + 简单头）
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true  // 携带Cookie

// 预检请求（复杂请求先发OPTIONS）
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, X-Token
Access-Control-Max-Age: 86400  // 预检缓存时间

触发预检的条件：

非简单请求方法（PUT/DELETE等）
自定义请求头
Content-Type不是简单类型

JSONP 原理及限制

核心答案：

// 原理：动态创建script标签
function jsonp(url, callback) {
  const script = document.createElement('script');
  window[callback] = function(data) {
    console.log(data);
    delete window[callback];
    document.body.removeChild(script);
  }
  script.src = `${url}?callback=${callback}`;
  document.body.appendChild(script);
}

限制：

只支持GET请求
可能XSS攻击
错误处理困难

3.2 经典问题：从 URL 到页面展示

非常详细的一片回答：https://bytetech.info/articles/6903166461217341454?searchId=2025081516181986474146815928AE395F

3.3 WebSocket

WebSocket vs HTTP

核心答案：

HTTP WebSocket

半双工全双工

无状态有状态

请求-响应模式持久连接

文本/二进制帧协议

每次请求都有头部建立后头部开销小

HTTP	WebSocket
半双工	全双工
无状态	有状态
请求-响应模式	持久连接
文本/二进制	帧协议
每次请求都有头部	建立后头部开销小

WebSocket 连接过程

核心答案：

// 1. 握手请求（HTTP升级）
GET /ws HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

// 2. 握手响应
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=

// 3. 数据传输（使用帧）
const ws = new WebSocket('ws://localhost:8080');
ws.onmessage = (e) => console.log(e.data);
ws.send('Hello Server');

应用场景：

实时聊天
实时推送
协同编辑
实时游戏
股票行情

四、Web 安全篇

4.1 XSS 攻击

XSS 类型（反射型、存储型、DOM型）

核心答案：
1. 反射型XSS：URL参数直接输出到页面
2. 存储型XSS：恶意脚本存入数据库
3. DOM型XSS：修改DOM节点触发
记忆口诀： “反射即时现，存储入库险，DOM改节点”

XSS 防御策略

// 1. 输入过滤（不可靠）
// 2. 输出转义（核心）
function escape(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;');
}

// 3. CSP内容安全策略
Content-Security-Policy: default-src 'self'

// 4. HttpOnly Cookie（防止JS读取）
Set-Cookie: session=abc; HttpOnly

CSP 内容安全策略

// 限制资源加载来源
Content-Security-Policy: 
  default-src 'self';           // 默认同源
  script-src 'self' cdn.com;    // JS来源
  style-src 'self' 'unsafe-inline'; // CSS来源
  img-src *;                     // 图片来源
  connect-src api.example.com;  // AJAX/WebSocket

4.2 CSRF 攻击

CSRF 攻击原理

核心答案： 跨站请求伪造：利用用户已登录的身份，诱导用户访问恶意网站，恶意网站向目标网站发送请求。

攻击流程：
1. 用户登录银行网站，有了Cookie
2. 用户访问恶意网站
3. 恶意网站发送转账请求到银行
4. 浏览器自动带上Cookie
5. 银行执行转账
生动比喻： 像偷用你的身份证：你登录了银行（有身份证明），骗子网站偷偷拿你的身份证明去办事

CSRF 防御方法

// 1. CSRF Token
// 服务器生成token放在表单中
<input type="hidden" name="csrf_token" value="random_token">

// 2. 验证Referer
if (request.headers.referer !== 'https://mybank.com') {
  return 403;
}

// 3. SameSite Cookie
Set-Cookie: session=abc; SameSite=Strict;  // 完全禁止第三方
Set-Cookie: session=abc; SameSite=Lax;     // 部分允许（链接可以）
Set-Cookie: session=abc; SameSite=None;    // 都允许（需HTTPS）

// 4. 双重Cookie验证
// Cookie中和请求参数都带token，服务器对比

记忆要点： “Token验身份，Referer看来源，SameSite限Cookie”

五、性能优化篇

5.1 网络层优化

减少 HTTP 请求数

// 1. 资源合并
// CSS Sprites、JS/CSS打包

// 2. 内联资源
// 小图片base64、关键CSS内联

// 3. 使用缓存
// 强缓存避免请求

// 4. 懒加载
// 图片懒加载、路由懒加载

使用 HTTP/2

核心答案：
- 多路复用减少连接数
- 服务器推送关键资源
- 头部压缩减少传输量
- 请求优先级优化加载顺序

启用 Gzip 压缩

// Nginx配置
gzip on;
gzip_types text/plain text/css application/javascript;
gzip_min_length 1024;
gzip_comp_level 6;  // 压缩级别1-9

// 效果：通常能压缩60-80%

使用 CDN

核心答案：
- 就近访问：用户访问最近节点
- 负载均衡：分散服务器压力
- 缓存静态资源：减少源站压力
- 抗DDoS：分布式架构
记忆要点： “CDN = 内容分发网络，让用户就近拿资源”

5.2 资源加载优化

预加载（preload、prefetch）

<!-- preload：当前页面必需，高优先级 -->
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="font.woff2" as="font" crossorigin>

<!-- prefetch：未来页面需要，低优先级 -->
<link rel="prefetch" href="next-page.js">

<!-- dns-prefetch：预解析DNS -->
<link rel="dns-prefetch" href="//api.example.com">

<!-- preconnect：预建立连接(DNS+TCP+TLS) -->
<link rel="preconnect" href="//api.example.com">

懒加载

// 1. 图片懒加载
// Intersection Observer API
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

// 2. 路由懒加载
const Home = () => import('./views/Home.vue');

// 3. 组件懒加载
const HeavyComponent = React.lazy(() => import('./Heavy'));

图片优化策略

// 1. 选择合适格式
WebP > JPEG/PNG    // 新浏览器
JPEG：照片        // 有损压缩
PNG：透明图       // 无损压缩
SVG：图标矢量图   // 可缩放

// 2. 响应式图片
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="">
</picture>

// 3. 图片尺寸
<img srcset="320w.jpg 320w, 640w.jpg 640w" 
     sizes="(max-width: 320px) 320px, 640px">

// 4. 渐进式加载
// 先模糊后清晰（如知乎、Medium）

六、实战题目篇

（收录各大公司真实面试题及详解）

陌上人如玉，公子世无双

【秋招备战】计算机网络

前言

一、HTTP 协议篇

1.1 HTTP 基础

1.2 HTTP 缓存机制

1.3 HTTP 版本演进

1.4 HTTPS 安全通信

二、TCP/IP 协议篇

2.1 TCP 基础

2.2 TCP 可靠传输

2.3 TCP vs UDP

三、浏览器网络篇

3.1 跨域问题

3.2 经典问题：从 URL 到页面展示

3.3 WebSocket

四、Web 安全篇

4.1 XSS 攻击

4.2 CSRF 攻击

五、性能优化篇

5.1 网络层优化

5.2 资源加载优化

六、实战题目篇