浏览器与网络（背诵版）

1. 从输入 URL 到页面展示

DNS 解析（浏览器缓存 -> hosts -> 本地 DNS -> 根/顶级/权威）-> TCP 三次握手（HTTPS 再加 TLS 握手）-> 发请求 -> 收响应。
解析 HTML 构建 DOM，遇到 CSS 构建 CSSOM（阻塞渲染），合成渲染树 -> 布局 -> 绘制 -> 合成。
JS 默认阻塞 DOM 解析，除非用 defer / async。
追问：defer 和 async 的区别？-> defer 按顺序在 DOMContentLoaded 前执行；async 下载完立刻执行，顺序不定。

2. HTTP 缓存

强缓存：Cache-Control（max-age / s-maxage / no-cache / no-store / immutable）、Expires。命中直接用本地副本，不发请求。
协商缓存：Last-Modified / If-Modified-Since、ETag / If-None-Match，命中返回 304。
优先级：Cache-Control 高于 Expires；ETag 高于 Last-Modified。
实践：HTML 用 no-cache；静态资源用 hash 文件名 + max-age=31536000 immutable。
追问：no-cache 和 no-store 的区别？-> no-cache 是缓存但要校验；no-store 是彻底不存。

3. HTTP/1.1 -> 2 -> 3

1.1：文本协议、应用层队头阻塞（一个连接同时只处理一个请求）、keep-alive 复用连接。
2：二进制分帧、多路复用、头部压缩 HPACK；但 TCP 层丢包仍会阻塞所有流。
3：基于 QUIC（UDP），流之间独立、0-RTT 建连、连接迁移。
追问：HTTP/2 解决了什么？-> 应用层队头阻塞，不用为了并发开多个连接。

4. HTTPS 握手

TLS 1.2：ClientHello（随机数 + 套件）-> ServerHello + 证书 -> 客户端验证证书链、用公钥加密 pre-master 发过去 -> 双方用三个随机数推导会话密钥。
TLS 1.3：1-RTT，用 ECDHE 密钥交换，证书也加密，支持 0-RTT 恢复。
证书验证：信任链到根 CA、域名匹配、有效期、吊销状态。
追问：为什么用非对称协商、对称传数据？-> 非对称慢，只用来安全地交换密钥。

5. CORS

简单请求（GET/HEAD/POST + 安全头 + 限定的 Content-Type）直接发，由响应头 Access-Control-Allow-Origin 决定放行。
非简单请求先发 OPTIONS 预检，带 Access-Control-Request-Method/Headers，服务端回 Allow-* 和 Max-Age。
带 cookie 需要 Allow-Credentials: true，且 Allow-Origin 不能是星号。
追问：CORS 是服务端拦截还是浏览器拦截？-> 浏览器行为，简单请求其实已经发出去了。

HttpOnly：JS 读不到，防 XSS 偷 cookie。
Secure：只在 HTTPS 下发送。
SameSite：Strict（跨站不带）、Lax（默认，顶层导航的 GET 带）、None（跨站都带，必须配 Secure）。
追问：前后端分离跨域登录怎么做？-> 用 token 放 header（推荐），或用 SameSite=None + Secure。

7. 重排与重绘

重排（reflow）：几何属性变化，代价高且会级联。
重绘（repaint）：只改颜色等，代价较低。
合成：transform / opacity 只走合成层，性能最好。
优化：用 class 批量改样式、用 documentFragment 离线操作、避免强制同步布局（读完 offsetWidth 马上写样式）。
追问：什么会强制重排？-> 读取 offsetTop / getComputedStyle 等布局属性。

8. 性能指标

LCP（最大内容绘制）：优化首屏图（preload、WebP）、服务端响应、去掉渲染阻塞资源。
INP（交互到下次绘制）：减少长任务、拆 JS、避免大同步计算。
CLS（布局偏移）：给图片和广告位设宽高、字体用 font-display。
追问：为什么用 INP 替代 FID？-> FID 只测第一次输入，INP 覆盖整个生命周期的响应性。

9. WebSocket 与 SSE

WebSocket：全双工、需协议升级，适合聊天、协同编辑。
SSE：服务端单向推送、基于普通 HTTP、自带重连、文本格式。
长轮询：兼容性最好但延迟高、连接开销大。
追问：LLM 流式输出为什么用 SSE？-> 单向够用、天然重连、能过大部分网关，实现比 WS 简单。

10. XSS / CSRF / CSP

XSS：注入脚本执行，分反射型、存储型、DOM 型。防御：输出转义、富文本白名单（DOMPurify）、CSP。
CSRF：借用户已登录的 cookie 发请求。防御：SameSite Cookie、CSRF Token、校验 Origin / Referer。
CSP：Content-Security-Policy: default-src 'self' 限制脚本来源，内联用 nonce / hash 放行。
追问：HttpOnly 能防 CSRF 吗？-> 不能，CSRF 不需要读 cookie，浏览器会自动带上。