面试表达：把前端基础讲成一条链路

读完这一节，你能做到

1. 用一条主线把 JS、浏览器、网络、CSS 串成完整叙述。
2. 把事件循环、闭包、缓存、重排、跨域五个高频题讲到点上。
3. 用项目案例说明自己的判断与代价。
4. 应对"为什么不用 XX/如果重来"这类追问。

一、一条主线

输入 URL
→ 解析与缓存 → DNS → TCP/TLS → HTTP
→ HTML 解析 → DOM/CSSOM → 布局 → 绘制 → 合成
→ JS 执行（事件循环）→ 交互 → 下一次更新

沿着这条线，每一段都能挂知识点：

阶段	可展开的知识
URL 与缓存	强缓存、协商缓存、CDN
连接	DNS、TCP、TLS、HTTP 版本
解析	DOM/CSSOM、阻塞资源、defer/async
渲染	重排、重绘、合成、关键渲染路径
执行	事件循环、闭包、原型、异步
交互	长任务、INP、性能优化

面试时先给主线，再按追问深入，比零散背题更有结构。

二、五个高频题

1. 事件循环

"同步代码执行完清空微任务，再取一个宏任务；Promise 是微任务，setTimeout 是宏任务。渲染发生在微任务清空之后、下一个宏任务之前。"

2. 闭包

"函数与定义时的词法环境的组合。它让内部函数能访问外部变量，也让变量不被回收；常见风险是循环变量共享与长期持有大对象。"

3. 缓存

"强缓存不发请求，协商缓存发请求但可能只回 304。静态资源用内容哈希 + 长强缓存，HTML 用协商缓存，敏感数据 no-store。"

4. 重排与重绘

"改几何属性触发布局，改颜色触发绘制，改 transform/opacity 只触发合成。读写交替会造成强制同步布局，要读写分离。"

5. 跨域

"同源策略限制的是读取，不是请求。CORS 由服务端返回允许头，非简单请求先发 OPTIONS 预检；带凭证不能用通配符。"

三、项目案例模板

背景：业务、规模、你的角色
问题：具体指标（首屏 5.2s、滚动 20fps）
动作：为什么选这个方案，排除了哪些
结果：指标变化 + 代价
反思：如果重做会怎么改

示例：某后台首屏 5.2 秒，按"网络 → 资源 → 接口"拆解，分别做服务端缓存、路由分包、接口并行，降到 1.9 秒；代价是首屏多了加载态，服务端要维护缓存失效。

不要只说"做了性能优化"，要说清楚测量了什么、改了什么、指标从多少到多少。

四、追问应对

追问	回答骨架
为什么用 HTTP/2 还要合并请求？	多路复用降低阻塞，但每请求仍有头部与调度成本
闭包一定泄漏吗？	不一定，取决于是否长期持有大对象
为什么 CSS 放 head？	尽早构建 CSSOM，避免白屏与无样式闪烁
这个优化真的有效吗？	基线、单变量、前后对比
看过源码吗？	讲一个具体机制（如 V8 的隐藏类），不要泛泛而谈

五、常见坑

1. 只背结论，讲不出因果链。
2. 把"事件循环"说成"定时器排队"。
3. 案例只有动作，没有指标与代价。
4. 遇到不会的硬编，不如说"这块我没深挖，我的理解是……"。
5. 把浏览器行为当成规范保证（如 setTimeout 0 一定 0ms）。

六、动手任务：自写 → AI 写 → 对比 → 取舍

四步不跳：① 自己写（限时，关掉补全）→ ② 让 AI 写同一题 → ③ 逐条比对 → ④ 说出保留谁的写法。 完整动作与记录模板见《AI 协作与代码评审》。

① 自己写

选一个你做过的页面，用主线讲一遍从输入 URL 到首屏的完整过程，要求：

• 至少覆盖网络、渲染、JS 三段。
• 至少指出一个真实瓶颈与优化结果。
• 结尾给出"如果重做会怎么改"。

② 让 AI 写同一题

把同一道题交给 AI：用一条主线讲清从输入 URL 到页面可交互，要求机制、取舍、验证。

③ 对比要盯的点

• 它是不是把链路讲成名词罗列，而没有成本与取舍？
• 环节之间的因果关系它讲清了吗？（例如为什么首屏优化常从关键请求入手）
• 追问“哪一步在你的项目上最慢”，它答得出吗？

④ 一句话取舍

它哪一句是正确的空话，一追问就塌？

七、自测

1. 一条主线包含哪几个阶段？
2. 事件循环里微任务与宏任务的顺序？
3. 强缓存与协商缓存分别省掉什么？
4. 哪些操作只触发合成？
5. 跨域限制的是请求还是读取？

参考答案要点：URL→连接→解析→渲染→执行→交互；微任务先清空；请求 vs 响应体；transform/opacity；读取。

附录：高频追问

问：为什么说 JS 是单线程的？ 主线程只有一个调用栈，但浏览器还有其他线程（渲染、网络、Worker），异步靠事件循环协作。

问：宏任务一定比微任务慢吗？ 不是"慢"，是调度顺序不同；微任务在当前宏任务末尾清空，宏任务要等下一轮。

问：为什么静态资源要加 hash？ 内容变则文件名变，可以放心长缓存，发布即失效。

问：preload 会阻塞渲染吗？ 不会阻塞解析，但会抢带宽，优先级过高可能拖慢其他关键资源。

问：重排一定比重绘慢吗？ 通常是的，因为要重新计算几何；但具体成本取决于 DOM 规模。

问：CORS 请求到达服务端了吗？ 通常到达了，浏览器只是拦截了响应；所以不能用 CORS 做服务端鉴权。

问：如何证明一次优化有效？ 固定环境、记录基线、只改一个变量、对比同一指标。

问：面试官问“你最强的一项”怎么答？ 选一个你真的踩过坑的方向，讲清问题、方案、代价与复盘，不要泛泛而谈。

三个不要

不要背术语、不要把所有成绩归因于自己、不要讲没有数据的“大幅提升”。讲清判断与代价，比数字更重要。

准备清单

• 一条主线能讲 3 分钟
• 五个高频题各能讲 2 分钟
• 一个性能案例（指标 + 代价）
• 一个失败案例（假设 + 复盘）
• 两个反问问题

反问与收尾

面试最后五分钟比前五十分钟更容易留下印象：问两个与团队目标相关的问题，再用一句话总结自己“能解决什么问题”。不要问薪资、加班、能不能远程这类应该和 HR 谈的内容。

收尾时可以说：“我今天的回答如果有不清楚的地方，可以随时追问我补充。”给对方留出继续深挖的空间。先给结论。结构先于细节。

配套题目

★ 越多越该先背；点题目可看完整答案与深入版。

• ★★★★★ 讲一下事件循环，宏任务和微任务的执行顺序是怎样的？
• ★★★★☆ 重排和重绘有什么区别？哪些操作会触发它们？
• ★★★★☆ 强缓存和协商缓存有什么区别？分别由哪些响应头控制？
• ★★★★☆ 前端错误监控怎么定位到源码？Source Map 应该怎么管理？
• ★★★☆☆ 前端常见设计模式有哪些？什么时候不该用设计模式？