一、浏览器基础
1.1 浏览器内核
| 浏览器 | 内核 |
|---|---|
| Chrome | Blink |
| Firefox | Gecko |
| Safari | WebKit |
| Edge | Blink (原 EdgeHTML) |
1.2 浏览器调试工具
| 工具 | 用途 |
|---|---|
| Elements | DOM 元素审查 |
| Console | 控制台日志 |
| Network | 网络请求分析 |
| Performance | 性能分析 |
| Memory | 内存分析 |
| Application | 存储管理 |
| Sources | 源码调试 |
二、HTTP 协议
2.1 Content-Type
| 类型 | 说明 |
|---|---|
application/x-www-form-urlencoded | 表单提交（默认） |
application/json | JSON 数据 |
application/xml | XML 数据 |
multipart/form-data | 文件上传 |
text/plain | 纯文本 |
2.2 常见请求头
| 请求头 | 说明 |
|---|---|
Accept | 浏览器能处理的内容类型 |
Accept-Charset | 浏览器能显示的字符集 |
Accept-Encoding | 浏览器支持的压缩编码 |
Accept-Language | 浏览器语言设置 |
Connection | 连接类型（keep-alive） |
Cookie | 当前域名的 Cookie |
Host | 请求的域名 |
Referer | 来源页面 URL |
User-Agent | 浏览器标识 |
If-None-Match | 缓存版本标识 (ETag) |
If-Modified-Since | 最后修改时间 |
Authorization | 认证信息 (Bearer Token) |
2.3 常见响应头
| 响应头 | 说明 |
|---|---|
Content-Encoding | 编码方式 (gzip) |
Content-Type | 内容类型 |
Content-Length | 内容长度 |
Date | 响应时间 |
Cache-Control | 缓存指令 |
Expires | 过期时间 |
Etag | 资源版本标识 |
Last-Modified | 最后修改时间 |
Set-Cookie | 设置 Cookie |
Location | 重定向地址 |
三、存储方案对比
3.1 Cookie、LocalStorage、SessionStorage
| 特性 | Cookie | LocalStorage | SessionStorage |
|---|---|---|---|
| 容量 | 4KB | 5MB | 5MB |
| 生命周期 | 可设置过期时间 | 永久 | 窗口关闭 |
| 作用域 | 同源 | 同源 | 同源同窗口 |
| 自动携带 | ✅ | ❌ | ❌ |
| 跨域共享 | ❌ (可设置) | ❌ | ❌ |
3.2 Cookie 跨域共享
// 设置 document.domain 实现子域共享
// www.baidu.com 和 image.baidu.com
document.domain = "baidu.com"3.3 IndexedDB
适用场景
存储大量结构化数据，支持索引和事务
四、缓存机制
4.1 缓存流程
1. 强制缓存 (Cache-Control / Expires)
↓ 失效
2. 协商缓存 (ETag / If-None-Match)
↓ 失效
3. 发送请求到服务器
4.2 缓存字段对比
| 字段 | 说明 | 优先级 |
|---|---|---|
Cache-Control | 控制缓存行为 | 高 |
Expires | 过期时间 (绝对时间) | 低 |
ETag | 资源标识符 | 高 |
Last-Modified | 最后修改时间 | 低 |
五、浏览器攻击方式
5.1 XSS（跨站脚本攻击）
原理：注入恶意脚本到网页中执行
防御方案：
// 1. 转义特殊字符
function escapeHTML(str) {
return str.replace(
/[&<>"']/g,
(char) =>
({
"&": "&",
"<": "<",
">": ">",
'"': """,
"'": "'",
})[char],
)
}
// 2. 使用 innerText 而非 innerHTML
// 3. CSP (内容安全策略)
// 4. 框架自带防护 (Vue/React 自动转义)5.2 CSRF（跨站请求伪造）
原理：利用用户已登录状态发起恶意请求
防御方案：
- 使用 CSRF Token
- 验证 Referer / Origin
- SameSite Cookie 属性
- 二次验证
5.3 其他攻击
| 攻击类型 | 说明 | 防御 |
|---|---|---|
| DDoS | 分布式拒绝服务 | 限流、CDN |
| SQL 注入 | 恶意 SQL 注入 | 参数化查询 |
六、从 URL 到页面渲染
6.1 完整流程
1. URL 解析
↓
2. 缓存判断（强制缓存 → 协商缓存）
↓
3. DNS 解析（域名 → IP）
↓
4. TCP 三次握手
↓
5. HTTPS 握手（如果是 HTTPS）
↓
6. 发送 HTTP 请求
↓
7. 服务器处理并返回响应
↓
8. 浏览器渲染页面
↓
9. TCP 四次挥手
6.2 渲染过程
1. 解析 HTML 构建 DOM 树
↓
2. 解析 CSS 构建 CSSOM 树
↓
3. 合并为渲染树 (Render Tree)
↓
4. 布局 (Layout / Reflow)
↓
5. 绘制 (Paint)
↓
6. 合成 (Composite)
七、HTTP 状态码
| 分类 | 说明 | 常见状态码 |
|---|---|---|
| 1xx | 信息 | 101 切换协议 |
| 2xx | 成功 | 200 OK, 201 Created, 204 No Content |
| 3xx | 重定向 | 301 永久重定向，302 临时重定向，304 未修改 |
| 4xx | 客户端错误 | 400 请求错误，401 未授权，403 禁止访问，404 未找到 |
| 5xx | 服务器错误 | 500 服务器错误，501 未实现，502 网关错误，503 服务不可用 |
八、HTTP vs HTTPS
| 特性 | HTTP | HTTPS |
|---|---|---|
| 端口 | 80 | 443 |
| 证书 | 无需 | 需要 SSL 证书 |
| 加密 | 明文传输 | SSL/TLS 加密 |
| 速度 | 快 | 慢（握手开销） |
| 安全性 | 低 | 高 |
九、跨域问题
9.1 同源策略
同源定义
相同协议、相同域名、相同端口
9.2 跨域解决方案
| 方案 | 说明 | 支持情况 |
|---|---|---|
| JSONP | 利用 script 标签 | 仅支持 GET |
| CORS | 跨域资源共享 | 主流方案 |
| postMessage | 窗口间通信 | iframe |
| WebSocket | 全双工通信 | 实时通信 |
| 代理服务器 | Nginx/Node 代理 | 开发环境 |
9.3 CORS 配置
// 服务端设置
res.setHeader("Access-Control-Allow-Origin", "*")
res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE")
res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization")9.4 OPTIONS 预检请求
预检请求
复杂请求前浏览器自动发起的探测请求，用于确认服务器是否允许该跨域请求
十、GET vs POST
| 特性 | GET | POST |
|---|---|---|
| 参数位置 | URL 中 | 请求体中 |
| 安全性 | 低（参数可见） | 相对安全 |
| 长度限制 | 有（~2KB） | 无限制 |
| 幂等性 | 幂等 | 不幂等 |
| 缓存 | 可缓存 | 不缓存 |
| 用途 | 获取数据 | 提交数据 |