浏览器

1. URL 解析：解析协议、域名、端口、路径
2. DNS 解析：域名 → IP 地址（递归查询，有缓存）
3. TCP 连接：三次握手建立连接
4. TLS 握手：HTTPS 时进行证书验证和密钥协商
5. 发送 HTTP 请求：构造请求报文，携带 headers 和 cookie
6. 服务器处理：返回响应
7. 浏览器接收响应：根据 Content-Type 处理
8. 构建 DOM 树：解析 HTML
9. 构建 CSSOM：解析 CSS
10. 合成渲染树：DOM + CSSOM
11. 布局（Layout）：计算元素位置和大小
12. 绘制（Paint）：绘制像素
13. 合成（Composite）：GPU 合成图层

同源策略：协议 + 域名 + 端口 三者相同才同源。不同源的请求默认被浏览器拦截。

跨域解决方案：
1. CORS：服务端设置 Access-Control-Allow-Origin 等响应头（最标准）
2. 代理：前端请求同源代理服务器，由代理转发（开发时常用）
3. JSONP：利用 <script> 标签不受同源限制（仅支持 GET，已过时）
4. postMessage：跨窗口通信
5. Nginx 反向代理：服务端配置

注意：跨域限制是浏览器行为，服务端不限制。

V8 引擎的 GC 策略：

1. 分代回收：
• 新生代（Young Generation）：存活时间短的对象，使用 Scavenge 算法（半空间复制）
• 老生代（Old Generation）：存活时间长的对象，使用 Mark-Sweep + Mark-Compact

2. 标记-清除（Mark-Sweep）：
从根对象出发，标记所有可达对象，清除未标记的。

3. 标记-整理（Mark-Compact）：
标记后将存活对象移到一端，解决内存碎片问题。

4. 增量标记：
将 GC 拆分成多个小步骤，避免长时间停顿（STW）。

内存泄漏常见场景：未清除的定时器、闭包引用、全局变量、DOM 引用未释放。

强缓存（不发请求）：
• Cache-Control: max-age=3600（优先级高）
• Expires: Date（HTTP/1.0，已过时）

协商缓存（发请求，304 响应）：
• Last-Modified / If-Modified-Since（基于修改时间）
• ETag / If-None-Match（基于内容哈希，优先级高）

缓存位置（优先级从高到低）：
1. Service Worker Cache
2. Memory Cache（关闭 Tab 即失效）
3. Disk Cache
4. Push Cache（HTTP/2）

实践：HTML 不缓存或短缓存，JS/CSS/图片用内容 hash 命名 + 长缓存。

	cookie	localStorage	sessionStorage
容量	4KB	5MB	5MB
生命周期	可设过期时间	永久	关闭 Tab 失效
HTTP 请求	自动携带	不携带	不携带
作用域	同源+路径	同源	同源+同 Tab
API	字符串操作	getItem/setItem	getItem/setItem

使用场景：
• cookie：登录凭证、用户偏好
• localStorage：持久化数据、主题设置
• sessionStorage：临时数据、表单草稿

回流（Reflow）：元素的大小、位置发生变化时，重新计算布局。代价高。
重绘（Repaint）：外观变化（颜色、阴影等）不影响布局时，重新绘制。代价较低。

触发回流的操作：
• 添加/删除 DOM 元素
• 修改元素尺寸（width/height/padding/margin）
• 读取 offsetWidth/scrollTop 等布局属性（强制同步布局）

优化策略：
1. 批量修改 DOM（DocumentFragment / 虚拟 DOM）
2. 避免逐条修改样式，使用 class 切换
3. 复杂动画使用 transform（GPU 加速，不触发回流）
4. 避免频繁读取布局属性

XSS（Cross-Site Scripting，跨站脚本攻击）：攻击者向页面注入恶意脚本。

类型：
1. 存储型：恶意代码存入数据库，其他用户访问时执行
2. 反射型：恶意代码在 URL 中，服务端拼接返回
3. DOM 型：前端 JS 直接操作 DOM 时注入

防御措施：
1. 输入过滤/转义（< 替换 <）
2. 输出编码（不信任任何用户输入）
3. CSP（Content-Security-Policy）限制脚本来源
4. HttpOnly Cookie 防止 JS 读取
5. 使用 textContent 代替 innerHTML