前端面试准备 03：浏览器与网络——渲染流水线、缓存、CORS、Cookie、HTTP/2（高频追问一网打尽）

浏览器与网络题的核心是“链路思维”：从用户输入 → JS 执行 → 网络 → 渲染 → 交互响应。

01 从 URL 到页面：你要能讲一条完整链路#

至少包含：

• DNS/TCP/TLS（可简述）
• HTTP 请求与缓存协商
• HTML 解析构建 DOM，CSS 构建 CSSOM
• 合成 Render Tree，布局（Layout），绘制（Paint），合成（Composite）
• JS 执行可能打断渲染（同步脚本、长任务）

02 回流/重绘/合成：不要背概念，要会用优化手段对应#

• 回流（Layout）：几何信息变化（尺寸/位置）导致
• 重绘（Paint）：像素变化（颜色/阴影）导致
• 合成（Composite）：只改 transform/opacity 通常可走合成层

实战表达（加分）：

• 用 DevTools Performance/Rendering 面板验证
• 用 contain / will-change（谨慎）隔离影响范围

03 缓存：强缓存 + 协商缓存 + CDN#

你要能说清：

• 强缓存：Cache-Control: max-age, s-maxage, immutable
• 协商缓存：ETag/If-None-Match，Last-Modified/If-Modified-Since
• CDN：边缘缓存与回源策略

高频追问：

• 为什么有时刷新还是拿到旧资源？（Service Worker、CDN、代理层）
• hash 文件名和长缓存如何配合发布？

04 CORS：不是“前端报错”，是浏览器安全模型#

必会点：

• 简单请求 vs 预检请求（OPTIONS）
• Access-Control-Allow-Origin、Allow-Credentials
• 带 Cookie 的跨域必须：具体 Origin + credentials: include

05 Cookie 与 SameSite：登录态的坑集中地#

必会点：

• HttpOnly 防止 JS 读取（降低 XSS 盗 Cookie）
• Secure 仅 HTTPS
• SameSite=Lax/Strict/None 对跨站请求的影响

06 HTTP/2/3：面试常问但别展开到失控#

你能讲清即可：

• HTTP/2：多路复用、头部压缩
• HTTP/3：基于 QUIC（UDP），更快的连接建立与迁移

07 自测清单#

• 我能讲清一次首屏加载的关键瓶颈在哪里吗？
• 我能把缓存策略讲成“发布流程的一部分”吗？
• 我能解释 CORS 预检触发条件与解决方案吗？

08 练习题（笔试 + 推导答案）#

题 1（问答）：为什么“强缓存 + hash 文件名”适合前端静态资源发布？#

参考答案（原理）#

• hash 文件名保证“内容变化 → 文件名变化”，从而可长期缓存（max-age=31536000, immutable）
• 发布新版本时不会污染旧版本缓存；旧页面仍能命中旧资源，新页面拉新资源
• 结合 HTML 不长缓存（或协商缓存）保证入口可更新

题 2（输出题）：哪些情况会触发 CORS 预检？#

给出 3 个会触发预检的例子，并解释原因。

参考答案（原理）#

会触发预检（OPTIONS）的常见条件：

• 方法不是 GET/HEAD/POST（如 PUT/DELETE）
• POST 但 Content-Type 不是 application/x-www-form-urlencoded / multipart/form-data / text/plain
• 自定义头（如 Authorization、X-Token）

原因：浏览器要先向服务器确认“是否允许该跨域请求的真实动作”，避免直接发出可能有副作用的跨域请求。

题 3（编码题）：写一个“缓存优先，过期回源”的 fetch 包装（思路题）#

要求：优先读 Cache Storage，没有则网络请求；网络成功后写回缓存。

参考答案（原理 + 示例代码）#

原理：Cache Storage 是 Service Worker 体系的一部分（即便不写 SW 也可用），适合缓存 GET 资源；更新策略要考虑过期与一致性。

export async function fetchCacheFirst(request) {
  const cache = await caches.open('v1');
  const cached = await cache.match(request);
  if (cached) return cached;
  const res = await fetch(request);
  if (res.ok) await cache.put(request, res.clone());
  return res;
}

下一篇进入 React：面试最常被追问的不是“会不会写组件”，而是你是否理解渲染与状态的本质。