互联网基础知识面试手册
文档类型: 基础必备知识
更新时间: 2025-10-28
目录
1. 互联网协议概览
1.1 OSI七层模型 vs TCP/IP四层模型
OSI七层模型 TCP/IP四层 协议示例 数据单位
┌─────────────┐ ┌─────────────┐
│ 应用层 │ │ │ HTTP, FTP, DNS 数据
├─────────────┤ │ 应用层 │ SMTP, Telnet (Data)
│ 表示层 │ │ │
├─────────────┤ │ │
│ 会话层 │ │ │
├─────────────┤ ├─────────────┤
│ 传输层 │ │ 传输层 │ TCP, UDP 段/数据报
├─────────────┤ ├─────────────┤ (Segment)
│ 网络层 │ │ 网络层 │ IP, ICMP, ARP 包
├─────────────┤ ├─────────────┤ (Packet)
│ 数据链路层 │ │ 链路层 │ Ethernet, WiFi 帧
├─────────────┤ │ │ (Frame)
│ 物理层 │ │ │ 光纤, 双绞线 比特
└─────────────┘ └─────────────┘ (Bit)
1.2 数据传输流程
发送端 接收端
┌──────────┐ ┌──────────┐
│ 应用层 │ HTTP请求 │ 应用层 │
│ Data │ │ Data │
└────┬─────┘ └────▲─────┘
│ 添加HTTP头 │ 解析HTTP头
┌────▼─────┐ ┌────┴─────┐
│ 传输层 │ TCP头 + Data │ 传输层 │
│ Segment │ │ Segment │
└────┬─────┘ └────▲─────┘
│ 添加TCP头 │ 解析TCP头
┌────▼─────┐ ┌────┴─────┐
│ 网络层 │ IP头 + TCP头 + Data │ 网络层 │
│ Packet │ │ Packet │
└────┬─────┘ └────▲─────┘
│ 添加IP头 │ 解析IP头
┌────▼─────┐ ┌────┴─────┐
│ 链路层 │ 帧头 + IP头 + TCP头 + Data + 帧尾 │ 链路层 │
│ Frame │ │ Frame │
└────┬─────┘ └────▲─────┘
│ │
└───────────────────► 物理传输 ─────────────────────────┘
2. HTTP/HTTPS协议
2.1 HTTP请求结构
POST /api/users HTTP/1.1 ← 请求行
Host: api.example.com ← 请求头
Content-Type: application/json │
Authorization: Bearer token123 │
User-Agent: Mozilla/5.0 │
Content-Length: 45 │
← 空行
{"name": "John", "email": "john@test.com"} ← 请求体
2.2 HTTP响应结构
HTTP/1.1 200 OK ← 状态行
Content-Type: application/json ← 响应头
Content-Length: 58 │
Cache-Control: max-age=3600 │
Set-Cookie: session_id=abc123 │
← 空行
{"id": 1, "name": "John", "status": "ok"} ← 响应体
2.3 HTTP状态码
| 类别 | 状态码 | 含义 | 说明 |
|---|---|---|---|
| 1xx | 100 | Continue | 继续请求 |
| 2xx | 200 | OK | 请求成功 |
| 201 | Created | 创建成功 | |
| 204 | No Content | 无内容返回 | |
| 3xx | 301 | Moved Permanently | 永久重定向 |
| 302 | Found | 临时重定向 | |
| 304 | Not Modified | 资源未修改（缓存） | |
| 4xx | 400 | Bad Request | 请求错误 |
| 401 | Unauthorized | 未授权 | |
| 403 | Forbidden | 禁止访问 | |
| 404 | Not Found | 资源不存在 | |
| 429 | Too Many Requests | 请求过多 | |
| 5xx | 500 | Internal Server Error | 服务器错误 |
| 502 | Bad Gateway | 网关错误 | |
| 503 | Service Unavailable | 服务不可用 | |
| 504 | Gateway Timeout | 网关超时 |
2.4 HTTP方法
// GET - 获取资源（幂等、安全）
GET /api/users/123
// POST - 创建资源（非幂等）
POST /api/users
Body: {"name": "John"}
// PUT - 完整更新资源（幂等）
PUT /api/users/123
Body: {"name": "John", "email": "john@test.com"}
// PATCH - 部分更新资源（非幂等）
PATCH /api/users/123
Body: {"email": "new@test.com"}
// DELETE - 删除资源（幂等）
DELETE /api/users/123
// HEAD - 获取响应头（不返回body）
HEAD /api/users/123
// OPTIONS - 获取支持的方法（CORS预检）
OPTIONS /api/users
幂等性：
- 幂等: 多次请求结果相同（GET、PUT、DELETE）
- 非幂等: 多次请求结果不同（POST、PATCH）
2.5 HTTP/1.1 vs HTTP/2 vs HTTP/3
| 特性 | HTTP/1.1 | HTTP/2 | HTTP/3 |
|---|---|---|---|
| 传输协议 | TCP | TCP | QUIC(UDP) |
| 多路复用 | ❌ | ✅ | ✅ |
| 头部压缩 | ❌ | ✅ (HPACK) | ✅ (QPACK) |
| 服务器推送 | ❌ | ✅ | ✅ |
| 连接数 | 6个/域名 | 1个 | 1个 |
| 队头阻塞 | ✅ (严重) | ✅ (TCP层) | ❌ |
| 连接建立 | 3次握手 | 3次握手+TLS | 1-RTT/0-RTT |
HTTP/2多路复用:
HTTP/1.1 (6个连接) HTTP/2 (1个连接)
┌────┐┌────┐┌────┐ ┌─────────────────┐
│Req1││Req2││Req3│ │Stream1: Req1 │
└────┘└────┘└────┘ │Stream2: Req2 │
┌────┐┌────┐┌────┐ │Stream3: Req3 │
│Req4││Req5││Req6│ │Stream4: Req4 │
└────┘└────┘└────┘ │... │
└─────────────────┘
2.6 HTTPS加密流程
客户端 服务器
│ │
├─────── Client Hello ────────────► │
│ (支持的加密套件) │
│ │
│◄────── Server Hello ───────────── │
│ (选择的加密套件 + 证书) │
│ │
├─ 验证证书（CA签名） ─►│ │
│ │
├── 生成随机数(Pre-Master Secret) ─► │
│ (使用服务器公钥加密) │
│ │
│ 服务器用私钥解密 ─┤
│ │
├─ 双方生成会话密钥(Session Key) ────┤
│ = f(Client随机数, Server随机数, │
│ Pre-Master Secret) │
│ │
├────── 加密数据传输 ◄────────────► │
│ (使用对称加密：AES-256-GCM) │
加密算法:
- 非对称加密: RSA/ECDHE（握手阶段，慢）
- 对称加密: AES-256（数据传输，快）
- 哈希算法: SHA-256（完整性校验）
3. RESTful API设计
3.1 设计原则
资源导向 (Resource-Oriented)
✅ 正确设计：
GET /api/users - 获取用户列表
GET /api/users/123 - 获取指定用户
POST /api/users - 创建用户
PUT /api/users/123 - 更新用户
PATCH /api/users/123 - 部分更新
DELETE /api/users/123 - 删除用户
GET /api/users/123/orders - 获取用户的订单
❌ 错误设计：
GET /api/getUsers
POST /api/createUser
GET /api/deleteUser?id=123
POST /api/user/delete
3.2 HTTP动词映射
CRUD操作 HTTP方法 URL示例
─────────────────────────────────────────────
Create (创建) POST /api/users
Read (读取) GET /api/users/123
Update (完整更新) PUT /api/users/123
Update (部分更新) PATCH /api/users/123
Delete (删除) DELETE /api/users/123
List (列表) GET /api/users
Search (搜索) GET /api/users?name=John
3.3 响应格式规范
// 成功响应
{
"code": 0,
"message": "success",
"data": {
"id": 123,
"name": "John Doe",
"email": "john@example.com"
},
"timestamp": 1698123456
}
// 列表响应（带分页）
{
"code": 0,
"message": "success",
"data": {
"items": [
{"id": 1, "name": "User1"},
{"id": 2, "name": "User2"}
],
"pagination": {
"page": 1,
"page_size": 20,
"total": 100,
"total_pages": 5
}
}
}
// 错误响应
{
"code": 400,
"message": "Validation failed",
"errors": {
"email": ["Email is required", "Invalid email format"],
"password": ["Password must be at least 8 characters"]
},
"timestamp": 1698123456
}
3.4 版本控制
方式1: URL路径
https://api.example.com/v1/users
https://api.example.com/v2/users
方式2: 请求头
GET /api/users
Accept: application/vnd.example.v1+json
方式3: 参数
GET /api/users?version=1
3.5 过滤、排序、分页
# 过滤
GET /api/users?status=active&role=admin
# 排序
GET /api/users?sort=-created_at,name
# -created_at: 按创建时间降序
# name: 按名称升序
# 分页
GET /api/users?page=2&page_size=20
# 字段筛选（减少数据传输）
GET /api/users?fields=id,name,email
# 搜索
GET /api/users?q=John
# 组合
GET /api/users?status=active&sort=-created_at&page=1&page_size=20
4. WebSocket协议
4.1 WebSocket vs HTTP
| 特性 | HTTP | WebSocket |
|---|---|---|
| 连接方式 | 短连接 | 长连接 |
| 通信模式 | 请求-响应 | 全双工 |
| 开销 | 每次请求都有头部 | 握手后低开销 |
| 实时性 | 需要轮询 | 真实时 |
| 适用场景 | 普通API | 聊天、推送、游戏 |
4.2 WebSocket握手流程
客户端 ────────────────────────────────────► 服务器
GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket ← 协议升级
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZQ== ← 随机密钥
Sec-WebSocket-Version: 13
客户端 ◄──────────────────────────────────── 服务器
HTTP/1.1 101 Switching Protocols ← 切换协议
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
════════════ WebSocket连接建立 ════════════
客户端 ◄──────────────────────────────────► 服务器
双向实时数据传输
4.3 WebSocket实现
// 客户端
const ws = new WebSocket('ws://localhost:9501');
ws.onopen = () => {
console.log('连接已建立');
ws.send('Hello Server');
};
ws.onmessage = (event) => {
console.log('收到消息:', event.data);
};
ws.onerror = (error) => {
console.error('错误:', error);
};
ws.onclose = () => {
console.log('连接已关闭');
};
// 服务端（Swoole）
$server = new Swoole\WebSocket\Server('0.0.0.0', 9501);
$server->on('open', function ($server, $request) {
echo "客户端{$request->fd}连接\n";
});
$server->on('message', function ($server, $frame) {
echo "收到消息: {$frame->data}\n";
$server->push($frame->fd, "Server: {$frame->data}");
});
$server->on('close', function ($server, $fd) {
echo "客户端{$fd}断开\n";
});
$server->start();
4.4 心跳保活
// 客户端心跳
let heartbeatInterval;
function startHeartbeat() {
heartbeatInterval = setInterval(() => {
if (ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ type: 'ping' }));
}
}, 30000); // 30秒一次
}
function stopHeartbeat() {
clearInterval(heartbeatInterval);
}
ws.onopen = () => {
startHeartbeat();
};
ws.onclose = () => {
stopHeartbeat();
};
5. 认证与授权
5.1 认证方式对比
| 方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| Session/Cookie | 服务器控制强 | 不适合分布式 | 传统Web应用 |
| JWT | 无状态、跨域 | 无法主动失效 | 微服务、移动端 |
| OAuth2.0 | 标准化、安全 | 复杂度高 | 第三方授权 |
| API Key | 简单 | 安全性低 | 内部服务 |
5.2 Session/Cookie认证
┌────────┐ ┌────────┐
│ 客户端 │ │ 服务器 │
└───┬────┘ └───┬────┘
│ │
├──── 1. POST /login ──────────────►│
│ (username + password) │
│ │
│ 2. 验证用户密码 ──┤
│ 3. 创建Session ──┤
│ 4. 存储到Redis ──┤
│ │
│◄── 5. Set-Cookie: sid=abc123 ────┤
│ │
├──── 6. GET /api/profile ─────────►│
│ Cookie: sid=abc123 │
│ │
│ 7. 从Redis获取用户 ─┤
│ │
│◄────── 8. 返回用户信息 ───────────┤
// Session认证实现
class SessionAuth
{
public function login(string $username, string $password): string
{
// 验证密码
$user = User::where('username', $username)->first();
if (!$user || !password_verify($password, $user->password)) {
throw new Exception('Invalid credentials');
}
// 创建Session
$sessionId = bin2hex(random_bytes(32));
// 存储到Redis
$redis->setex("session:{$sessionId}", 7200, json_encode([
'user_id' => $user->id,
'username' => $user->username,
'login_time' => time(),
]));
return $sessionId;
}
public function verify(string $sessionId): ?array
{
$data = $redis->get("session:{$sessionId}");
return $data ? json_decode($data, true) : null;
}
}
5.3 JWT认证
JWT结构:
Header.Payload.Signature
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. ← Header (Base64)
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6I. ← Payload (Base64)
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c ← Signature (HMAC-SHA256)
Header:
{
"alg": "HS256",
"typ": "JWT"
}
Payload:
{
"sub": "1234567890",
"name": "John Doe",
"iat": 1516239022,
"exp": 1516242622
}
Signature:
HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
secret
)
// JWT认证实现
class JWTAuth
{
private string $secret = 'your-secret-key';
public function generateToken(array $payload): string
{
$header = base64_encode(json_encode([
'alg' => 'HS256',
'typ' => 'JWT'
]));
$payload['iat'] = time();
$payload['exp'] = time() + 7200; // 2小时过期
$payloadEncoded = base64_encode(json_encode($payload));
$signature = hash_hmac(
'sha256',
"{$header}.{$payloadEncoded}",
$this->secret,
true
);
$signatureEncoded = base64_encode($signature);
return "{$header}.{$payloadEncoded}.{$signatureEncoded}";
}
public function verifyToken(string $token): ?array
{
[$header, $payload, $signature] = explode('.', $token);
// 验证签名
$expectedSignature = hash_hmac(
'sha256',
"{$header}.{$payload}",
$this->secret,
true
);
if (base64_encode($expectedSignature) !== $signature) {
return null; // 签名无效
}
$data = json_decode(base64_decode($payload), true);
// 检查过期
if ($data['exp'] < time()) {
return null; // Token过期
}
return $data;
}
}
5.4 OAuth 2.0授权流程
┌────────┐ ┌──────────┐
│ 用户 │ │ 客户端 │
└───┬────┘ └────┬─────┘
│ │
├─ 1. 点击"使用微信登录" ──────────────────────►│
│ │
│ ┌─────────────────────────────────────────┤
│ │ 2. 重定向到授权服务器 │
│◄───┤ (带client_id, redirect_uri等) │
│ └─────────────────────────────────────────┘
│
├──────────────────────────────────┐
│ 3. 授权页面 │ ┌──────────────┐
│ - 显示应用信息 ├─►│ 授权服务器 │
│ - 请求权限列表 │ │ (微信) │
│ - 同意/拒绝按钮 │ └──────┬───────┘
├─ 4. 用户点击"同意" ───────────────┤ │
│ │ │
│◄─ 5. 重定向到回调URL ─────────────┴────────┤
│ (带authorization_code) │
│ │
│ ┌─────────────────┤
│ 6. 用授权码换取Token │ │
│ POST /token ───────────► │
│ code=xxx │
│ client_secret=xxx │
│ │
│◄── 7. 返回access_token ────────────────────┤
│ │
│ 8. 使用token请求用户信息 │
│ GET /userinfo ──────────► │
│ Authorization: Bearer token │
│ │
│◄── 9. 返回用户信息 ────────────────────────┤
6. Web安全
6.1 常见安全威胁
XSS（跨站脚本攻击）
<!-- ❌ 危险：直接输出用户输入 -->
<div><?php echo $_GET['name']; ?></div>
<!-- 用户输入: <script>alert('XSS')</script> -->
<!-- 结果: 脚本被执行 -->
<!-- ✅ 安全：转义输出 -->
<div><?php echo htmlspecialchars($_GET['name'], ENT_QUOTES, 'UTF-8'); ?></div>
防御措施:
// 1. 输出转义
echo htmlspecialchars($userInput, ENT_QUOTES, 'UTF-8');
// 2. CSP (Content Security Policy)
header("Content-Security-Policy: default-src 'self'");
// 3. HttpOnly Cookie
setcookie('session', $value, [
'httponly' => true, // JavaScript无法访问
'secure' => true, // 只通过HTTPS传输
'samesite' => 'Strict'
]);
CSRF（跨站请求伪造）
<!-- 攻击者网站 -->
<img src="https://bank.com/transfer?to=attacker&amount=1000">
<!-- 用户在bank.com已登录，cookie会被自动发送 -->
防御措施:
// 1. CSRF Token
session_start();
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
// 表单中添加
<input type="hidden" name="csrf_token"
value="<?php echo $_SESSION['csrf_token']; ?>">
// 验证
if ($_POST['csrf_token'] !== $_SESSION['csrf_token']) {
die('CSRF attack detected');
}
// 2. SameSite Cookie
setcookie('session', $value, [
'samesite' => 'Strict' // 禁止跨站携带
]);
// 3. 验证Referer头
if (!str_starts_with($_SERVER['HTTP_REFERER'], 'https://yoursite.com')) {
die('Invalid referer');
}
SQL注入
// ❌ 危险：直接拼接SQL
$sql = "SELECT * FROM users WHERE id = {$_GET['id']}";
// 输入: 1 OR 1=1 --
// 结果: 查询所有用户
// ✅ 安全：使用预处理语句
$stmt = $pdo->prepare("SELECT * FROM users WHERE id = ?");
$stmt->execute([$_GET['id']]);
文件上传漏洞
// ❌ 危险：未验证文件类型
move_uploaded_file($_FILES['file']['tmp_name'],
'/uploads/' . $_FILES['file']['name']);
// 上传: shell.php
// ✅ 安全：严格验证
$allowedTypes = ['image/jpeg', 'image/png'];
$allowedExts = ['jpg', 'jpeg', 'png'];
$fileType = $_FILES['file']['type'];
$fileExt = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
if (!in_array($fileType, $allowedTypes) ||
!in_array($fileExt, $allowedExts)) {
die('Invalid file type');
}
// 重命名文件
$newName = bin2hex(random_bytes(16)) . '.' . $fileExt;
move_uploaded_file($_FILES['file']['tmp_name'],
'/uploads/' . $newName);
6.2 HTTPS部署
server {
listen 443 ssl http2;
server_name example.com;
# SSL证书
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
# SSL协议
ssl_protocols TLSv1.2 TLSv1.3;
# 加密套件
ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256';
ssl_prefer_server_ciphers on;
# HSTS (强制HTTPS)
add_header Strict-Transport-Security "max-age=31536000" always;
# 安全头
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
}
# HTTP重定向到HTTPS
server {
listen 80;
server_name example.com;
return 301 https://$server_name$request_uri;
}
7. CDN与负载均衡
7.1 CDN工作原理
用户 (北京)
│
├─ 请求: https://cdn.example.com/image.jpg
│
▼
DNS解析
│
├─ 返回最近的CDN节点IP (北京节点)
│
▼
CDN节点 (北京)
│
├─ 缓存命中？
│ ├─ 是 → 直接返回
│ └─ 否 → 回源服务器获取
│
▼
源服务器
│
└─ 返回内容 → CDN缓存 → 返回给用户
优势:
- 加速访问（就近节点）
- 减轻源站压力
- 防御DDoS攻击
- 跨地域高可用
7.2 负载均衡策略
轮询（Round Robin）
请求1 → Server1
请求2 → Server2
请求3 → Server3
请求4 → Server1 (循环)
加权轮询（Weighted Round Robin）
upstream backend {
server 192.168.1.1 weight=3; # 性能好，权重高
server 192.168.1.2 weight=1; # 性能一般
}
# 4个请求分配: Server1收到3个，Server2收到1个
IP Hash
upstream backend {
ip_hash; # 同一IP总是分配到同一服务器
server 192.168.1.1;
server 192.168.1.2;
}
# 优点: Session不丢失
# 缺点: 负载可能不均衡
最少连接（Least Connections）
upstream backend {
least_conn; # 分配到连接数最少的服务器
server 192.168.1.1;
server 192.168.1.2;
}
8. 面试高频题
Q1: HTTP和HTTPS的区别？
A:
| 维度 | HTTP | HTTPS |
|---|---|---|
| 协议 | HTTP | HTTP + SSL/TLS |
| 端口 | 80 | 443 |
| 安全性 | 明文传输 | 加密传输 |
| 证书 | 不需要 | 需要CA证书 |
| SEO | 正常 | 搜索引擎优先 |
| 性能 | 快 | 稍慢（加密开销） |
HTTPS优势:
- 数据加密（防窃听）
- 身份认证（防伪装）
- 数据完整性（防篡改）
Q2: GET和POST的区别？
| 维度 | GET | POST |
|---|---|---|
| 语义 | 获取资源 | 创建/提交资源 |
| 参数位置 | URL | Body |
| 参数长度 | 限制（2KB-8KB） | 无限制 |
| 缓存 | 可缓存 | 不可缓存 |
| 历史记录 | 保留 | 不保留 |
| 书签 | 可添加 | 不可添加 |
| 幂等性 | 幂等 | 非幂等 |
| 安全性 | 低（URL可见） | 相对高 |
Q3: Cookie、Session、Token的区别？
| 维度 | Cookie | Session | Token(JWT) |
|---|---|---|---|
| 存储位置 | 客户端 | 服务器 | 客户端 |
| 存储内容 | 少量数据 | 任意数据 | 用户信息 |
| 安全性 | 低 | 高 | 中 |
| 跨域 | 受限 | 受限 | 支持 |
| 分布式 | 支持 | 需要共享存储 | 天然支持 |
| 服务器压力 | 无 | 有 | 无 |
Q4: 什么是跨域？如何解决？
同源策略: 协议、域名、端口必须完全相同
https://example.com:443/api/users (源)
✅ 同源: https://example.com:443/api/posts
❌ 跨域: http://example.com:443/api/users (协议不同)
❌ 跨域: https://api.example.com:443/users (域名不同)
❌ 跨域: https://example.com:8080/api/users (端口不同)
解决方案:
- CORS（推荐）
header('Access-Control-Allow-Origin: https://example.com');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
header('Access-Control-Allow-Headers: Content-Type, Authorization');
header('Access-Control-Allow-Credentials: true');
- JSONP（仅GET）
<script>
function callback(data) {
console.log(data);
}
</script>
<script src="https://api.example.com/data?callback=callback"></script>
- 代理服务器
前端(localhost:3000) → 同域代理(localhost:3000/api)
→ 后端(api.example.com)
Q5: 浏览器从输入URL到页面渲染的完整流程？
1. URL解析
├─ 协议: https
├─ 域名: www.example.com
└─ 路径: /index.html
2. DNS解析
├─ 浏览器缓存
├─ 系统缓存 (/etc/hosts)
├─ 路由器缓存
├─ ISP DNS服务器
└─ 根DNS → 顶级域DNS → 权威DNS
结果: www.example.com → 192.168.1.1
3. TCP连接（三次握手）
客户端 ─SYN─────────────► 服务器
客户端 ◄────────SYN+ACK─ 服务器
客户端 ─ACK─────────────► 服务器
4. 发送HTTP请求
GET /index.html HTTP/1.1
Host: www.example.com
5. 服务器处理并返回响应
HTTP/1.1 200 OK
Content-Type: text/html
<html>...</html>
6. 浏览器解析HTML
├─ 构建DOM树
├─ 构建CSSOM树
├─ 合并生成渲染树
├─ 布局（Layout）
└─ 绘制（Paint）
7. 加载资源
├─ CSS文件（阻塞渲染）
├─ JavaScript文件（可能阻塞）
└─ 图片、字体等
8. 页面渲染完成
9. TCP断开（四次挥手）
客户端 ─FIN─────────────► 服务器
客户端 ◄────────────ACK─ 服务器
客户端 ◄────────────FIN─ 服务器
客户端 ─ACK─────────────► 服务器
总结
核心要点
- 协议理解: HTTP/HTTPS、TCP/IP、WebSocket
- API设计: RESTful规范、版本控制、响应格式
- 认证授权: Session、JWT、OAuth2.0
- 安全防护: XSS、CSRF、SQL注入、HTTPS
- 性能优化: CDN、负载均衡、缓存策略
面试建议
- 理解协议原理，不只是会用API
- 能说明各种方案的优缺点和适用场景
- 准备实际项目中的安全问题案例
- 了解性能优化的具体指标和方法
推荐资源:
- MDN Web Docs
- RFC文档（HTTP/1.1: RFC 7230-7235）
- OWASP Top 10（Web安全）
