基础原理
浏览器
从 URL 到渲染的全链路。核心能力：渲染管线、V8 引擎、垃圾回收、跨域方案、Web 安全。
浏览器题的核心是"全链路思维"——从输入 URL 到页面可交互，每一层发生了什么。能把这条链路讲完整，就覆盖了 80% 的浏览器面试题。
从 URL 到页面渲染
DNS 解析
浏览器缓存 → 系统缓存 → 路由器缓存 → ISP DNS → 递归查询
TCP 连接
三次握手建立连接；HTTPS 还需 TLS 握手
HTTP 请求
发送请求报文，服务端返回响应
响应处理
根据 Content-Type 决定处理方式（HTML / CSS / JS / 图片等）
构建 DOM 树
HTML 解析 → 词法分析 → 构建节点树
构建 CSSOM
CSS 解析 → 构建样式规则树
构建渲染树
DOM + CSSOM → Render Tree（不含不可见元素）
布局（Layout）
计算每个节点的几何信息（位置、大小）
绘制（Paint）
将布局结果转换为像素
合成（Composite）
GPU 合成各层，显示到屏幕
渲染管线
HTML ──→ DOM Tree ──┐
├→ Render Tree → Layout → Paint → Composite
CSS ──→ CSSOM ──────┘关键路径优化
- 减少关键资源数：
async/defer加载 JS - 减少关键路径长度：内联关键 CSS
- 减少关键字节数：压缩、Tree Shaking
阻塞行为
| 资源 | 阻塞解析 | 阻塞渲染 | 说明 |
|---|---|---|---|
| CSS | 不阻塞 | 阻塞 | 构建 CSSOM 后才能渲染 |
| JS | 阻塞 | 阻塞 | 默认阻塞 DOM 构建 |
async | 不阻塞 | 可能 | 下载完立即执行，顺序不可控 |
defer | 不阻塞 | 不阻塞 | DOM 解析后按序执行 |
V8 引擎
执行流程
源代码 → 解析(Parser) → AST → 解释执行(Ignition) → 字节码
↓ 热点代码
TurboFan 编译优化 → 机器码
↑ 优化假设失败
Deoptimization 回退字节码垃圾回收
| 区域 | 算法 | 对象类型 | 说明 |
|---|---|---|---|
| 新生代 | Scavenge | 朝生夕灭 | From → To 半区翻转 |
| 老生代 | Mark-Sweep/Compact | 长存活 | 标记清除 + 整理碎片 |
增量标记与并发回收
- 增量标记：把长 GC 拆成短步，插入主线程间隙
- 并发回收：GC 在辅助线程执行，不阻塞主线程
- 并行回收：多个辅助线程同时 GC
跨域解决方案
同源策略：协议 + 域名 + 端口 三者一致
| 方案 | 原理 | 特点 |
|---|---|---|
| CORS | 服务端设置响应头 | 最主流，需后端配合 |
| Nginx 代理 | 同源服务端转发 | 无需改后端，运维配置 |
| JSONP | <script> 不受同源限制 | 只支持 GET，已过时 |
| WebSocket | 协议本身不受同源限制 | 适合实时通信 |
| postMessage | 跨窗口通信 API | 适合 iframe / window |
CORS 关键头部
| 头部 | 作用 |
|---|---|
Access-Control-Allow-Origin | 允许的源 |
Access-Control-Allow-Methods | 允许的方法 |
Access-Control-Allow-Headers | 允许的请求头 |
Access-Control-Allow-Credentials | 是否允许 Cookie |
Access-Control-Max-Age | 预检缓存时间 |
Web 安全
XSS（跨站脚本）
| 类型 | 攻击方式 | 防御 |
|---|---|---|
| 存储型 | 恶意脚本存入数据库 | 输入过滤 + 输出转义 |
| 反射型 | URL 参数中注入脚本 | URL 编码 + CSP |
| DOM 型 | 前端 JS 直接操作不可信数据 | 避免innerHTML / 使用安全API |
核心防御：输入验证 + 输出转义 + CSP（Content-Security-Policy）
CSRF（跨站请求伪造）
| 防御方式 | 原理 |
|---|---|
| CSRF Token | 服务端签发令牌，请求时携带验证 |
| SameSite Cookie | Strict / Lax 限制跨站携带 |
| Referer 校验 | 验证请求来源 |
其他安全话题
- 点击劫持：
X-Frame-Options: DENY/ CSPframe-ancestors - 中间人攻击：HTTPS + HSTS
- SQL 注入：参数化查询，不用字符串拼接
本地存储
| 存储方式 | 容量 | 生命周期 | 与服务端通信 |
|---|---|---|---|
| Cookie | 4KB | 可设过期时间 | 每次请求自动携带 |
| localStorage | 5MB+ | 永久 | 不携带 |
| sessionStorage | 5MB+ | 标签页关闭 | 不携带 |
| IndexedDB | 无上限 | 永久 | 不携带 |
Service Worker
- 独立线程，可拦截请求、管理缓存
- 生命周期：
install→activated→fetch - 核心应用：PWA 离线缓存、推送通知、后台同步