前端面试复盘学习笔记（2026）

来源说明：本文是我基于 Paul（保罗）的文章《失业后的一次前端面试经历》（paugram.com，2026-06-09）整理的个人学习笔记。面试经历、题目均来自原文，版权归原作者所有；我在此基础上补充了自己对每个考点的整理与正解，仅用于学习复习。建议对照原文阅读。

把别人的面试复盘当镜子，是最省力的查漏补缺。这篇按主题把原文里出现的考点重新梳理了一遍，每条都补上「正解」，方便我自己回头快速过一遍。

一、网络协议

HTTP 1.1 / 2 / 3 的区别

HTTP/1.1：默认长连接（Keep-Alive），但同一连接上请求是串行的，存在队头阻塞（HOL blocking）。浏览器靠开多个 TCP 连接来变相并发。
HTTP/2：引入多路复用，一个 TCP 连接上可以并发多个流（stream），头部压缩（HPACK），支持服务端推送。解决了 HTTP 层的队头阻塞，但 TCP 层的队头阻塞仍在。
HTTP/3：底层从 TCP 换成 QUIC（基于 UDP），彻底解决 TCP 层队头阻塞，连接建立更快（0-RTT/1-RTT），连接迁移（换网络不断连）。

复习点：1.1 → 2 的核心是并发（多路复用），2 → 3 的核心是传输层换成 QUIC/UDP。

二、浏览器

主流浏览器内核

浏览器	内核
Chrome / Edge / Opera	Blink（早期 WebKit 分支）
Safari	WebKit
Firefox	Gecko
IE（已淘汰）	Trident

原文里容易漏掉 Firefox 的 Gecko 和 IE 的 Trident，记牢。

三、CSS 与布局

Grid vs Flex

Flex：一维布局，沿主轴/交叉轴排列，适合「一行/一列」的灵活排布。
Grid：二维布局，行列同时控制，适合「宫格 / 整体页面结构」。

block / inline-block / inline

block：独占一行，可设宽高、上下 margin。
inline：不换行，宽高由内容撑开，上下 margin/宽高无效。
inline-block：不换行，但可设宽高与完整 margin。

align-items vs justify-content（Flex）

justify-content：主轴（main axis）方向的对齐。
align-items：交叉轴（cross axis）方向的对齐。

space-between / space-around / space-evenly

space-between：两端贴边，中间间隔相等（两端无间隙）。
space-around：每个元素两侧间隔相等，所以端点间隙是元素间间隙的一半。
space-evenly：所有间隙（含两端）完全相等。

Tailwind 容器查询

用 @container 让样式基于父容器尺寸而非视口响应，写法如 @md:flex-row，需在容器上加 @container。适合组件级响应式。

四、React

生命周期 → Hooks

现代函数组件用 useEffect 覆盖挂载/更新/卸载：

挂载：useEffect(fn, [])
更新：useEffect(fn, [deps])
卸载：useEffect(() => { return cleanup }, []) 的返回函数。

useCallback vs useMemo

useCallback(fn, deps)：缓存函数引用，避免子组件不必要的重渲染。
useMemo(fn, deps)：缓存计算结果，避免昂贵计算重复执行。
本质：useCallback(fn, deps) 等价于 useMemo(() => fn, deps)，都靠 deps 决定是否复用。

组件从挂载到卸载

触发渲染 → 生成/对比虚拟 DOM（Reconciliation / Fiber）→ commit 到真实 DOM → 执行 useEffect → 状态/props 变化触发重渲染 → 卸载时执行 effect 的清理函数。

五、TypeScript

`as const`

把字面量断言为只读的精确类型，阻止类型拓宽（widening）。
例：const arr = [1, 2] as const 的类型是 readonly [1, 2] 而非 number[]。
常用于把对象/数组变成字面量联合类型的来源。

interface vs type

interface：优先用于对象结构定义，支持声明合并（declaration merging）、extends。
type：更通用，能表达联合类型、交叉类型、元组、映射类型等 interface 做不到的。
经验法则：对象形状用 interface，复杂类型运算用 type。

六、架构概念（易混淆）

SPA / MPA 与 CSR / SSR / SSG 是两个维度

SPA / MPA：应用是单页还是多页（路由由前端接管还是服务端返回不同页面）。
CSR / SSR / SSG：HTML 在哪里、何时生成——客户端渲染 / 服务端实时渲染 / 构建时静态生成。
二者正交：SPA 也可以 SSR（如 Next.js），MPA 也可以纯静态。别把它们混为一谈。

RESTful：POST / PUT / PATCH

POST：创建资源（非幂等）。
PUT：全量替换资源（幂等）。
PATCH：部分更新资源。

七、工程化与工具

Electron：主进程/渲染进程隔离，用 contextBridge 在 preload 里安全暴露 API 给渲染进程；悬浮窗通过 BrowserWindow 的 frame:false / transparent / alwaysOnTop 实现。
Jenkins：WebHook 触发构建，SCM（Source Code Management）配置源码拉取，Pipeline 描述构建流程。
Nginx / Caddy：都能做反向代理；Caddy 默认自动申请并续期 HTTPS 证书，Nginx 需配合 certbot 等手动处理。

八、软技能与产品理解

原文技术之外的考察也值得记：

无 PM 的协作：直接对接技术负责人；区分业务需求（需确认）与交互实现（可自主设计）。
无测试团队：开发要自测、自验收，靠 Sentry（错误监控）+ Clarity（用户行为回放）兜底线上质量。
判断真伪需求：能识别「功能需求」与「伪需求」，理解项目的核心目标而非机械实现。
逻辑思维题（如推理凶手）：考的是拆解与分析，别慌，把条件列清楚。

复盘小结

这份清单里我自己也踩得到的点：HTTP/2 与 /3 的分界、space-around 的端点间隙、SPA≠CSR。面试失败不丢人，原作者把过程写下来本身就是很好的复盘习惯——这也是我把它抄成笔记的原因。

再次致谢原文作者 Paul：失业后的一次前端面试经历。如作者不希望被转述整理，请告知我删除本篇。