前端与 AI 前端面试题库

覆盖 JavaScript、TypeScript、React、Vue、浏览器、性能、安全、SSE 与 AI Streaming UI 的全量可折叠面试题库。

#synthesis #growing #frontend #interview

[!info] related notes

面试准备 MOC · 前端面试 MOC · 题源与置信度

前端与 AI 前端面试题库

使用规则

先折叠题卡闭卷口述，再展开答案；
题源 只描述问题如何进入题库，答案依据 单独描述技术正确性；
NC-H 代表近期公开面经主题交叉出现，不代表公司官方题库；
AI-D 明确表示 AI 衍生的高价值追问；
完整知识只维护在相关长期笔记，本页保存面试表达；
项目题必须在面试前回动态 evidence index 核验，不临场编数字。

JavaScript 核心

[!question]- P0 FE-001 var / let / const 区别？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查语言机制是否能解释真实运行行为，而不是只背结论。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答

var 是函数作用域，可重复声明，声明提升后初始化为 undefined。

let/const 是块级作用域，有 TDZ；进入作用域后绑定已存在，但声明执行前不可访问。

const 约束绑定不能重新赋值，不代表对象内容不可变。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-002 什么是闭包？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查语言机制是否能解释真实运行行为，而不是只背结论。 相关知识：JavaScript 闭包

30 秒回答 函数和它创建时的词法环境组合起来，使函数离开原作用域后仍能访问外部变量。常见用途：封装私有状态、回调、memoization；常见风险：意外持有大对象导致内存无法释放、循环变量捕获错误。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-003 作用域链是什么？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查语言机制是否能解释真实运行行为，而不是只背结论。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答 标识符解析从当前 lexical environment 向外层查找，直到 global。查找关系由函数定义位置决定，而不是调用位置决定。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-004 this 怎么确定？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查语言机制是否能解释真实运行行为，而不是只背结论。 相关知识：call、apply 和 bind

30 秒回答 普通函数按调用方式：

展开要点 / 原始迁移内容

new 绑定新对象。

call/apply/bind 显式绑定。

obj.fn() 隐式绑定 obj。

否则 strict mode 为 undefined，非严格浏览器脚本可能是 global。

箭头函数没有自己的 this，从词法外层捕获。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-005 == 和 === 区别？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查语言机制是否能解释真实运行行为，而不是只背结论。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答 === 不做类型强制转换；== 按抽象相等算法做 coercion，存在 '' == 0、null == undefined 等特殊行为。业务代码通常优先 ===，除非明确理解 coercion 规则。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-006 浅拷贝和深拷贝？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查语言机制是否能解释真实运行行为，而不是只背结论。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答 浅拷贝只复制第一层引用；嵌套对象仍共享。深拷贝递归复制整个对象图，但要处理 Date/Map/Set、循环引用、prototype、function 等。现代浏览器可用 structuredClone 处理很多结构化数据，但函数/DOM 节点等并非通用支持。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-007 原型链是什么？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查语言机制是否能解释真实运行行为，而不是只背结论。 相关知识：ECMAScript 原型

30 秒回答 JS 对象内部有 [[Prototype]] 指向另一个对象。访问属性时如果自身没有，就沿 prototype chain 查找。构造函数的 prototype 通常作为通过 new 创建实例的 prototype。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-008 new 做了什么？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查语言机制是否能解释真实运行行为，而不是只背结论。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答 大致：

展开要点 / 原始迁移内容

创建新对象。

新对象 prototype 指向构造函数 prototype。

以新对象为 this 调用构造函数。

如果构造函数显式返回对象，则返回该对象；否则返回新对象。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-009 防抖和节流区别？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查语言机制是否能解释真实运行行为，而不是只背结论。 相关知识：防抖和节流

30 秒回答

debounce：连续触发后等安静一段时间再执行；搜索输入、resize 后计算。

throttle：固定时间窗口最多执行一次；scroll/mousemove 高频更新。实现时保留 this、args，并考虑 leading/trailing、cancel。

继续追问

先说不变量和数据结构，再写代码。

时间/空间复杂度与最坏情况是什么？

至少列出空输入、重复值和极端规模测试。

[!question]- P0 FE-010 手写 debounce 核心？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查语言机制是否能解释真实运行行为，而不是只背结论。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答
function debounce<T extends (...args: any[]) => void>(fn: T, wait: number) {
  let timer: ReturnType<typeof setTimeout> | undefined
  return function (this: unknown, ...args: Parameters<T>) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), wait)
  }
}
展开要点 / 原始迁移内容 面试时说明这里只是基础版，没有 leading/cancel/flush。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

Event Loop / Promise

[!question]- P0 FE-011 浏览器 Event Loop 怎么理解？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-FRONTEND-2026-SUMMARY） 答案依据：DOC（DOC-WHATWG-EVENT-LOOP / DOC-NODE-EVENT-LOOP）+ KB 考察意图：检查是否掌握 task、microtask checkpoint、宿主差异与阻塞边界。 相关知识：浏览器 JS Event Loop · 浏览器与 Node.js Event Loop

30 秒回答 浏览器 Event Loop 主要协调 task、microtask checkpoint 和页面渲染。Event Loop 选择一个 task 后，其中的 JavaScript 在调用栈上 run-to-completion；栈清空后执行 microtask checkpoint，把当前排队的 Promise reaction、queueMicrotask 等持续清空，然后浏览器可能获得一次 rendering opportunity，再选择下一个 task。同步/异步与 task/microtask 是两个分类维度，所以不能只用“同步、微任务、宏任务”作为最终模型。

展开要点 / 原始迁移内容 JS 执行栈为空后，event loop 从 task queue 取一个 task 执行；一个 task 完成后会清空当前 microtask queue，再进入渲染机会和下一轮 task。Promise reaction、queueMicrotask 属于 microtask；setTimeout callback 属于 task。

继续追问

为什么不能只背“同步→微任务→宏任务”？

递归 microtask 会怎样影响渲染？

Node.js 出现 setImmediate / nextTick 时模型怎么变？

[!question]- P0 FE-012 为什么 Promise.then 比 setTimeout 先？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-FRONTEND-2026-SUMMARY） 答案依据：DOC（DOC-WHATWG-EVENT-LOOP / DOC-NODE-EVENT-LOOP）+ KB 考察意图：检查是否掌握 task、microtask checkpoint、宿主差异与阻塞边界。 相关知识：Promise · async / await

30 秒回答 Promise.then 并不是“天生比 timer 优先”。当前 script 本身是一个 task；它结束后浏览器先执行 microtask checkpoint，所以已经排队的 Promise reaction 会在进入后续 timer task 前运行。setTimeout(fn, 0) 只表示达到最小延迟后可被调度，不等于立即执行。

展开要点 / 原始迁移内容 当前同步 task 结束后，浏览器先 drain microtask queue，再开始下一个 task。then reaction 在 microtask，timer callback 在未来 task。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-013 async/await 本质？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查是否掌握 task、microtask checkpoint、宿主差异与阻塞边界。 相关知识：Promise · async / await

30 秒回答 async 函数总返回 Promise；await 会把后续逻辑拆成 Promise continuation，当前调用栈先返回，Promise settle 后把 continuation 放入 microtask。它是 Promise 的语法层抽象，不是阻塞线程。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-014 Promise.all / allSettled / race / any？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-FRONTEND-2026-SUMMARY） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查是否掌握 task、microtask checkpoint、宿主差异与阻塞边界。 相关知识：Promise · async / await

30 秒回答

all：全部 fulfilled 才 fulfilled，一个 reject 就立即 reject。

allSettled：等待全部 settle，返回每项状态。

race：第一个 settle 决定结果。

any：第一个 fulfilled 决定；全部 reject 时 AggregateError。

继续追问

先说不变量和数据结构，再写代码。

时间/空间复杂度与最坏情况是什么？

至少列出空输入、重复值和极端规模测试。

[!question]- P1 FE-015 Promise.race([]) 怎么样？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-FRONTEND-2026-SUMMARY） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查是否掌握 task、microtask checkpoint、宿主差异与阻塞边界。 相关知识：Promise · async / await

30 秒回答 没有任何输入能 settle 它，因此返回的 Promise 会一直 pending。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P1 FE-016 Microtask 太多会怎样？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查是否掌握 task、microtask checkpoint、宿主差异与阻塞边界。 相关知识：浏览器 JS Event Loop · 浏览器与 Node.js Event Loop

30 秒回答 如果 microtask 不断递归产生新 microtask，event loop 长时间无法进入下一 task/渲染，造成 UI starvation。异步不等于“不会阻塞”。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

TypeScript

[!question]- P0 FE-017 type 和 interface 区别？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查编译期类型与运行时不可信数据边界。 相关知识：TypeScript 高级类型 · 运行时输出校验

30 秒回答 两者都能描述对象形状。Interface 支持 declaration merging，适合公开可扩展对象契约；type 可以表达 union、intersection、conditional、mapped 等任意类型组合。现代 TS 中很多场景都能互换，选一致风格即可，不应背成绝对“interface 更快/更好”。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-018 any 和 unknown？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查编译期类型与运行时不可信数据边界。 相关知识：TypeScript 高级类型 · 运行时输出校验

30 秒回答 any 基本退出类型检查；unknown 可以接收任何值，但使用前必须 narrowing。对外部 JSON/error 等未知数据更推荐 unknown + validation。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-019 never 和 void？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查编译期类型与运行时不可信数据边界。 相关知识：TypeScript 高级类型 · 运行时输出校验

30 秒回答

void：调用者不应依赖返回值，函数通常可以正常结束。

never：这个路径不可能产生值，例如始终 throw/无限循环；也常用于 exhaustive check。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-020 泛型解决什么？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查编译期类型与运行时不可信数据边界。 相关知识：TypeScript 高级类型 · 运行时输出校验

30 秒回答 在保持输入输出类型关系的同时复用逻辑。例如 function identity<T>(x:T):T。真正价值是表达“类型之间的关系”，而不是把所有函数都加 <T>。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P1 FE-021 keyof / mapped type / conditional type？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查编译期类型与运行时不可信数据边界。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答

keyof T 得到键 union。

mapped type 遍历键构造新类型，如 Partial<T>。

conditional type T extends U ? X : Y 根据类型关系选择。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P1 FE-022 TS 类型为什么不能验证 API 返回？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查编译期类型与运行时不可信数据边界。 相关知识：TypeScript 高级类型 · 运行时输出校验 · RESTful API

30 秒回答 TS 只在编译期存在。fetch().json() as User 只是告诉编译器相信你，不会检查运行时 JSON。边界上需要 Zod/Valibot/自定义 parser 等 runtime validation。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

React

[!question]- P0 FE-023 React 组件更新的大致阶段？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-FRONTEND-2026-SUMMARY） 答案依据：DOC（React 官方文档）+ KB 考察意图：检查 React 的 render/commit、状态所有权、Effect 和性能心智模型。 相关知识：Agent · Agent Runtime · Agentic Workflow Patterns · React

30 秒回答 Render 阶段计算下一棵 React tree，可以被中断/重做；Commit 阶段把最终变化应用到 DOM，并执行相关 layout effects 等。Render 应保持纯，不能在那里做不可逆副作用。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-024 Virtual DOM 的价值？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查 React 的 render/commit、状态所有权、Effect 和性能心智模型。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答 核心不是“比原生 DOM 快”，而是提供声明式 UI 和跨 render 的差异计算模型，让 React 决定最小必要 DOM mutation，并支撑组件化、并发调度等。特定手写 DOM 操作当然可能更快。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-025 key 有什么作用？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查 React 的 render/commit、状态所有权、Effect 和性能心智模型。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答 key 帮助 React 在同级 children 之间识别“哪个元素还是同一个实体”，从而正确复用 state/DOM。列表发生插入、排序时使用 index 会让实体身份错位，可能造成输入值/组件 state 跟错行。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-026 useState 更新是同步还是异步？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查 React 的 render/commit、状态所有权、Effect 和性能心智模型。 相关知识：React · React useEffect

30 秒回答 不宜简单回答“异步”。调用 setter 会安排更新，React 可能 batch；当前 render 中的 state 是 snapshot，不会立即变量自增。需要基于旧值连续更新时使用 functional updater，例如 setCount(c => c + 1)。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-027 useEffect 是做什么的？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：DOC（React 官方文档）+ KB 考察意图：检查 React 的 render/commit、状态所有权、Effect 和性能心智模型。 相关知识：React · React useEffect

30 秒回答 useEffect 的核心用途是让 React 组件与外部系统同步，例如订阅、网络连接、浏览器 API 或第三方 widget。纯派生数据通常应该在 render 中计算，而不是 effect + state 复制。依赖数组由 effect 使用的 reactive values 决定；需要时提供 cleanup 来撤销订阅、连接或忽略/取消过期请求。

展开要点 / 原始迁移内容 React 官方定义重点是“让组件与外部系统同步”，例如订阅、网络连接、非 React widget。纯派生数据不应该用 effect + state 复制。Effect 依赖应包含使用到的 reactive values，cleanup 负责撤销连接/订阅。

继续追问

这真的是 external-system synchronization 吗？

依赖为什么不能靠删项解决？

Strict Mode 重挂载暴露了什么问题？

[!question]- P0 FE-028 useEffect 常见无限循环原因？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：DOC（React 官方文档）+ KB 考察意图：检查 React 的 render/commit、状态所有权、Effect 和性能心智模型。 相关知识：React · React useEffect

30 秒回答

Effect set state，导致 render。

dependency 每次 render 都是新 object/function。

state 本可由 props/其他 state 派生却重复维护。解决不是乱删依赖，而是重新审视是否真的需要 effect、稳定引用或移出不必要对象。

继续追问

这真的是 external-system synchronization 吗？

依赖为什么不能靠删项解决？

Strict Mode 重挂载暴露了什么问题？

[!question]- P0 FE-029 为什么开发模式下 Effect 可能跑两次？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：DOC（React 官方文档）+ KB 考察意图：检查 React 的 render/commit、状态所有权、Effect 和性能心智模型。 相关知识：React useEffect · React

30 秒回答 React Strict Mode 在开发环境会额外执行 setup→cleanup→setup，帮助发现 cleanup 不完整等问题。生产并不是简单“所有 effect 都执行两次”。正确 effect 应能安全地 setup/cleanup。

继续追问

为什么开发重挂载不是“生产一定执行两次”？

cleanup 不完整会暴露哪些问题？

如何写一个可重复 setup/cleanup 的 Effect？

[!question]- P0 FE-030 useMemo / useCallback 什么时候用？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查 React 的 render/commit、状态所有权、Effect 和性能心智模型。 相关知识：React · React useEffect

30 秒回答 作为性能优化，不是语义保证。只有昂贵计算、referential identity 影响 memoized child/dependency 或 profiler 证明有收益时使用。滥用本身增加复杂度和比较成本。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-031 Context、Zustand、Redux 怎么选？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查 React 的 render/commit、状态所有权、Effect 和性能心智模型。 相关知识：React Context 与状态管理 · Server State vs Client State

30 秒回答 Context 适合低频、树范围的依赖注入/主题等；Zustand 适合轻量 client state，selector 订阅方便；Redux Toolkit 更适合需要显式 action/reducer、成熟工具链和大型共享状态。Server State 更应考虑 TanStack Query，而不是三者之一硬管。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-032 TanStack Query 与 Zustand 如何分工？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-FRONTEND-2026-SUMMARY） 答案依据：DOC（TanStack Query 官方文档）+ KB 考察意图：检查 React 的 render/commit、状态所有权、Effect 和性能心智模型。 相关知识：React · React useEffect · TanStack Query MOC · Server State vs Client State

30 秒回答 Query 管服务器拥有的数据：fetch、cache、stale、refetch、mutation、invalidation；Zustand 管客户端拥有的 UI/交互状态。把 Query data 再复制到 Zustand 容易产生双真值。

继续追问

谁拥有这份状态的真值？

并发 mutation 如何防旧响应覆盖新状态？

失效范围过大或过小会怎样？

[!question]- P0 FE-033 query invalidation 是什么？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：DOC（TanStack Query 官方文档）+ KB 考察意图：检查 React 的 render/commit、状态所有权、Effect 和性能心智模型。 相关知识：TanStack Query MOC · Server State vs Client State

30 秒回答 当 mutation 使某个缓存资源可能过期，标记匹配 query 为 stale，并根据活跃 observer 等条件重新获取。它比手工维护一个规范化全局缓存更简单，但 query key 设计必须稳定。

继续追问

谁拥有这份状态的真值？

并发 mutation 如何防旧响应覆盖新状态？

失效范围过大或过小会怎样？

[!question]- P0 FE-034 optimistic update 怎么做？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查 React 的 render/commit、状态所有权、Effect 和性能心智模型。 相关知识：TanStack Query MOC · Server State vs Client State

30 秒回答 mutation 发出前先更新 UI/cache，让用户立即看到结果；需要保存旧 snapshot，失败 rollback，最终再与服务端真值收敛。并发 mutation 要防旧响应覆盖新状态。

继续追问

谁拥有这份状态的真值？

并发 mutation 如何防旧响应覆盖新状态？

失效范围过大或过小会怎样？

[!question]- P1 FE-035 useTransition 解决什么？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：DOC（React 官方文档）+ KB 考察意图：检查 React 的 render/commit、状态所有权、Effect 和性能心智模型。 相关知识：React · React useEffect

30 秒回答 把某些 state update 标记为非紧急 Transition，使 React 能优先响应输入等 urgent update，必要时中断并重做后台 render，并提供 isPending。它不是 Web Worker，也不会让 CPU 计算自动并行。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P1 FE-036 Suspense 是什么？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：DOC（React 官方文档）+ KB 考察意图：检查 React 的 render/commit、状态所有权、Effect 和性能心智模型。 相关知识：React · React useEffect

30 秒回答 Suspense boundary 在子树等待支持 Suspense 的资源时显示 fallback，并能配合框架/数据源、lazy loading、streaming 协调 reveal。不能把任意 useEffect(fetch) 自动变成 Suspense。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P1 FE-037 自定义 Hook 和普通函数区别？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查 React 的 render/commit、状态所有权、Effect 和性能心智模型。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答 自定义 Hook 可以调用其他 Hooks，参与 React state/effect 生命周期；普通工具函数是纯 JS 逻辑。不要仅为了“复用”就写 Hook——只有需要 React lifecycle/reactive state 时才应该是 Hook。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

Vue3

[!question]- P0 FE-038 Vue3 响应式原理？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-FRONTEND-2026-SUMMARY） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查响应式依赖追踪、组件通信与状态派生边界。 相关知识：Vue MOC · Vue3 Proxy 响应式

30 秒回答 reactive 使用 Proxy 拦截 property read/write；读取时 track 当前 active effect，写入时 trigger 依赖该属性的 effect。组件 render、computed/watch 等都构建在这个依赖追踪模型上。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-039 ref 与 reactive？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-FRONTEND-2026-SUMMARY） 答案依据：DOC（React 官方文档）+ KB 考察意图：检查响应式依赖追踪、组件通信与状态派生边界。 相关知识：Agent · Agent Runtime · Agentic Workflow Patterns · React

30 秒回答 ref 可以包装 primitive/object，通过 .value 访问；reactive 直接返回对象 Proxy。组合式 API 中 ref 更适合独立值和解构保持响应性；reactive 适合对象聚合状态。模板会对 ref 做一定自动解包。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-040 computed / watch / watchEffect？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：DOC（React 官方文档）+ KB 考察意图：检查响应式依赖追踪、组件通信与状态派生边界。 相关知识：Vue MOC · Vue3 Proxy 响应式 · RESTful API

30 秒回答

computed：缓存派生值，getter 依赖变化才重算。

watch：显式指定 source，拿新旧值，适合副作用。

watchEffect：自动追踪同步执行期间读取的依赖，适合简单副作用。

继续追问

这真的是 external-system synchronization 吗？

依赖为什么不能靠删项解决？

Strict Mode 重挂载暴露了什么问题？

[!question]- P0 FE-041 Vue 组件是怎么更新 DOM 的？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查响应式依赖追踪、组件通信与状态派生边界。 相关知识：Vue MOC · Vue3 Proxy 响应式

30 秒回答 响应式依赖变化后调度组件 render effect；生成新的 vnode tree，与旧 vnode patch/diff，最终执行必要 DOM mutation。Scheduler 会 batch 同一 tick 的多次变化。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-042 v-model 怎么实现？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查响应式依赖追踪、组件通信与状态派生边界。 相关知识：Vue MOC · Vue3 Proxy 响应式

30 秒回答 组件层本质上是一个 prop + update event 的双向语法糖，例如 modelValue 与 update:modelValue。原生表单根据 input/select/checkbox 等映射到 value/checked 和对应事件。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P1 FE-043 Vue3 比 Vue2 响应式有哪些重要变化？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-FRONTEND-2026-SUMMARY） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查响应式依赖追踪、组件通信与状态派生边界。 相关知识：Vue MOC · Vue3 Proxy 响应式

30 秒回答 Proxy 可以拦截属性新增/删除、数组索引等，而 Vue2 Object.defineProperty 需要对已有属性逐个 getter/setter 并对部分变化做额外 API。Vue3 同时整体转向 Composition API 和更细的 runtime/compiler 优化。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

浏览器渲染与性能

[!question]- P0 FE-044 从输入 URL 到页面展示发生什么？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查从网络、解析、渲染到缓存/安全的完整页面链路。 相关知识：输入 URL 到页面展示 · 浏览器渲染过程

30 秒回答 回答主线：

展开要点 / 原始迁移内容

URL 解析 / cache / service worker（如有）。

DNS。

TCP/QUIC，TLS（HTTPS）。

HTTP request/response。

HTML parse → DOM；CSS parse → CSSOM。

render tree / style / layout。

paint / composite。

JS 下载/执行可能影响解析和渲染。

面试官会从任一层下钻。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-045 reflow / repaint / composite？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查从网络、解析、渲染到缓存/安全的完整页面链路。 相关知识：Vue MOC · Vue3 Proxy 响应式 · 输入 URL 到页面展示 · 浏览器渲染过程

30 秒回答

Layout/reflow：几何尺寸/位置重新计算，通常更贵。

Paint：绘制像素内容。

Composite：将已有 layer 合成。 transform/opacity 常能在合成层完成，但“强行 promote layer”也会增加显存，不是越多越好。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-046 Core Web Vitals 当前核心？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查从网络、解析、渲染到缓存/安全的完整页面链路。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答

LCP：主要内容加载体验。

INP：交互响应性。

CLS：视觉稳定性。优化要用真实测量/RUM 或 Lighthouse/Performance 工具，不只列技巧。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-047 前端性能优化怎么量化？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查从网络、解析、渲染到缓存/安全的完整页面链路。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答 先定义指标和场景，例如 LCP/INP、首屏 API latency、列表 render time、bundle size、内存；建立 baseline，再做单项优化和对比。没有前后数据时，面试里不要说“优化了 50%”。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P1 FE-048 长列表怎么优化？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查从网络、解析、渲染到缓存/安全的完整页面链路。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答

virtualization/windowing。

stable key。

memoize item（有证据时）。

pagination/infinite query。

展开要点 / 原始迁移内容

图片 lazy load。

避免父级高频 state 让整个 list 重 render。

聊天虚拟列表比商品列表更难，因为消息高度动态、流式增长、需要保持 scroll anchor。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

HTTP 缓存与存储

[!question]- P0 FE-049 强缓存与协商缓存？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查接口语义、错误模型、幂等与网络边界。 相关知识：浏览器缓存

30 秒回答 强缓存命中时浏览器无需向 origin 验证，主要由 Cache-Control: max-age 等控制；协商缓存会发送 If-None-Match/If-Modified-Since，服务端可返回 304。带 hash 的静态资产适合长 max-age, immutable，HTML 通常需要更谨慎。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-050 ETag 与 Last-Modified？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查接口语义、错误模型、幂等与网络边界。 相关知识：浏览器缓存

30 秒回答 Last-Modified 基于修改时间，精度和语义有限；ETag 是资源版本标识，更精确但服务端需要生成/比较。请求可用 If-None-Match 进行验证。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-051 Cookie / localStorage / sessionStorage / IndexedDB？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-FRONTEND-2026-SUMMARY） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查接口语义、错误模型、幂等与网络边界。 相关知识：RAG · RAG Grounding / Faithfulness · 浏览器客户端存储

30 秒回答

Cookie：随匹配请求自动发送，可 HttpOnly/Secure/SameSite，容量小。

localStorage：同步字符串 KV，长期保留，不自动发服务端。

sessionStorage：按 tab session。

IndexedDB：异步结构化本地数据库，适合较大离线数据。

展开要点 / 原始迁移内容

敏感 token 的存储要结合 XSS/CSRF threat model，不存在一招通吃。

继续追问

你会先看哪一层指标定位退化？

证据不足时系统如何 no-result？

索引更新时如何防版本混读？

Web 安全

[!question]- P0 FE-052 XSS 是什么？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查是否能先给结论，再解释机制、边界、失败路径和验证方式。 相关知识：XSS

30 秒回答 攻击者让不可信脚本在受害者 origin 下执行。React 默认会 escape 普通文本插值，但 dangerouslySetInnerHTML、第三方 HTML parser、URL 等仍需 sanitization/validation。防护包括输出编码、CSP、避免直接插 HTML、依赖治理等。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-053 CSRF 是什么？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查是否能先给结论，再解释机制、边界、失败路径和验证方式。 相关知识：CSRF

30 秒回答 浏览器对目标站点请求可能自动携带 Cookie，攻击网站诱导用户发起状态修改请求。SameSite cookie、CSRF token、Origin/Referer 验证等可防护。Bearer token 放 Authorization header 通常不会被第三方页面自动附带，但会增加 XSS 窃取风险，需要整体权衡。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-054 CORS 是什么？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查是否能先给结论，再解释机制、边界、失败路径和验证方式。 相关知识：跨域与 CORS

30 秒回答 浏览器同源策略下，跨 origin JS 读取响应需要服务器通过 CORS headers 授权。CORS 是浏览器安全机制，不是服务器间网络 ACL。简单请求和需要 preflight 的请求处理不同。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-055 为什么设置 Access-Control-Allow-Origin 不是“解决服务器跨域”？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查是否能先给结论，再解释机制、边界、失败路径和验证方式。 相关知识：跨域与 CORS · Go MOC · Go Context

30 秒回答 真正发出 HTTP 请求往往没问题，是浏览器决定脚本能否读取响应。服务器返回 CORS header 告诉浏览器哪些 origin 被允许。因此 curl/server-to-server 通常不受浏览器 CORS 限制。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

SSE / WebSocket / Streaming

[!question]- P0 FE-056 SSE 和 WebSocket 怎么选？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-FRONTEND-2026-SUMMARY） 答案依据：DOC（DOC-MDN-SSE）+ KB 考察意图：检查网络 chunk、协议 event 与 UI state machine 能否正确分层。 相关知识：前端流式响应模式 · 前端 SSE 消费设计 · AI 对话与流式界面

30 秒回答 SSE 基于 HTTP，天然 server→client 文本事件、自动重连语义简单，适合通知/AI streaming；WebSocket 是全双工长连接，适合高频双向实时协作、游戏等。AI Chat 用户请求仍可 POST，结果 SSE streaming，并不一定需要 WebSocket。

继续追问

一次 reader.read 为什么不等于一个 event？

断线后如何恢复且不重复渲染？

Run 的 durable state 与连接状态如何分开？

[!question]- P0 FE-057 SSE 的事件格式？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-FRONTEND-2026-SUMMARY） 答案依据：DOC（DOC-MDN-SSE）+ KB 考察意图：检查网络 chunk、协议 event 与 UI state machine 能否正确分层。 相关知识：前端流式响应模式 · 前端 SSE 消费设计 · AI 对话与流式界面

30 秒回答 文本流按空行分隔 event，可包含 event:、data:、id:、retry: 等字段。多个 data: 行会组合。客户端必须按 framing 解析，不能把 TCP/read chunk 当 event。

继续追问

一次 reader.read 为什么不等于一个 event？

断线后如何恢复且不重复渲染？

Run 的 durable state 与连接状态如何分开？

[!question]- P0 FE-058 fetch streaming 和 EventSource 的区别？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-FRONTEND-2026-SUMMARY） 答案依据：DOC（DOC-MDN-SSE）+ KB 考察意图：检查网络 chunk、协议 event 与 UI state machine 能否正确分层。 相关知识：前端流式响应模式 · 前端 SSE 消费设计 · AI 对话与流式界面 · Node.js MOC

30 秒回答 EventSource API 专门做 GET SSE，浏览器帮你解析/重连；fetch 可用 POST、自定义 headers/body，但需要自己读取 ReadableStream、解析 UTF-8/SSE、处理取消/重连。

继续追问

一次 reader.read 为什么不等于一个 event？

断线后如何恢复且不重复渲染？

Run 的 durable state 与连接状态如何分开？

CSS / Layout 高频

[!question]- P0 FE-059 Flex 与 Grid 区别？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查是否能先给结论，再解释机制、边界、失败路径和验证方式。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答 Flex 主要是一维布局（主轴/交叉轴），适合行或列内分配；Grid 是二维行列网格，适合明确区域布局。不是互斥，常组合使用。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-060 BFC 是什么，常见作用？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查是否能先给结论，再解释机制、边界、失败路径和验证方式。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答 Block Formatting Context 是独立块格式化上下文。常见现象包括内部 float 参与高度计算、与外部 float 布局隔离、不同 BFC 的垂直 margin 不会发生同样的折叠。现代布局常用 flex/grid 解决许多历史 BFC 场景。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-061 如何水平垂直居中？题源：CANON（FE-INTERVIEW-HANDBOOK） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查是否能先给结论，再解释机制、边界、失败路径和验证方式。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答 最常用：

展开要点 / 原始迁移内容
.parent {
  display: grid;
  place-items: center;
}
或 flex：
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}
面试重点是根据布局约束选择，不是背十种方法。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

2026 AI 前端新增追问

[!question]- P0 FE-062 AI 流式 UI 为什么不是“把字符串不断 concat”就结束？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-FRONTEND-2026-SUMMARY） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查是否能先给结论，再解释机制、边界、失败路径和验证方式。 相关知识：前端流式响应模式 · 前端 SSE 消费设计 · AI 对话与流式界面

30 秒回答 AI 产品有 text、tool、citation、status、interrupt、error 等不同类型事件；还涉及消息 identity、恢复、取消、用户滚动、markdown 增量解析。应该用显式 event model/state reducer，而不是把全部状态塞进一个 content 字符串。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-063 模型返回 ECharts 配置，前端直接执行安全吗？题源：AI-D + NC-1（AI 前端项目追问补全） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查是否能先给结论，再解释机制、边界、失败路径和验证方式。 相关知识：前端面试 MOC · 前端基础 MOC

30 秒回答 不能完全相信。应限制 schema/允许的 chart type/字段，过滤 function/script 等可执行内容，限制数据规模，渲染失败有 fallback。最好让模型输出受限 declarative spec，而不是任意 JS。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P0 FE-064 AI Streaming 自动滚动与用户上翻冲突怎么处理？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-FRONTEND-2026-SUMMARY） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查是否能先给结论，再解释机制、边界、失败路径和验证方式。 相关知识：前端流式响应模式 · 前端 SSE 消费设计 · AI 对话与流式界面 · Node.js MOC

30 秒回答 维护“用户是否接近底部/是否主动脱离 follow mode”的状态。只有在底部阈值内才自动 follow；用户上滑后暂停自动滚动并显示“回到底部”提示。新增 token 不应强制抢回 scroll。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

[!question]- P1 FE-065 流式 Markdown 怎么优化？题源：AI-D + NC-1（AI 前端项目追问补全） 答案依据：KB + 必要的官方文档 / 可复现实验 考察意图：检查是否能先给结论，再解释机制、边界、失败路径和验证方式。 相关知识：前端流式响应模式 · 前端 SSE 消费设计 · AI 对话与流式界面

30 秒回答

buffer 小批量更新，而非每字符 render。

分离正在增长的最后 block 与已稳定历史。

expensive syntax highlighting 延迟到 code block 稳定或节流。

memoize 历史 message。

展开要点 / 原始迁移内容

对超长会话做 virtualization 时处理动态高度和 anchor。

继续追问

为什么这样判断？

失败或边界场景怎么办？

如何通过测试、指标或实验验证？

从 2026 AI 前端观察层补充的高价值题

[!question]- P0 FE-S01 POST SSE 的端到端链路应该怎么设计？题源：NC-H（NC-BYTE-FRONTEND-01 / NC-AI-FRONTEND-PROJECT） 答案依据：DOC（SSE / Fetch Streams）+ KB 考察意图：检查请求、字节流、SSE framing、事件模型与 UI reducer 是否分层。 相关知识：前端 SSE 消费设计 · 前端流式响应模式

30 秒回答 客户端用 POST 发送 prompt/context，服务端以 text/event-stream 或明确的流式协议返回；前端通过 fetch 读取 ReadableStream，用 TextDecoder 增量解码，把不完整文本保留在 buffer 中，按协议空行切出完整 event，再做 schema validation、去重和 reducer transition。连接结束后还要以 done/error/cancel event 或 durable run query 确认终态。

展开要点 请求 abort、代理缓冲、UTF-8 半字符、半包/多包、last event id、重连和重复事件都要纳入设计。

继续追问

为什么不能直接 JSON.parse(chunk)？

代理层需要关闭哪些 buffering？

连接断开后如何查询 Run 真值？ [!question]- P0 FE-S02 SSE 与普通 HTTP Response 的区别是什么？题源：NC-H（近期 AI 前端面经） 答案依据：DOC（MDN SSE）+ KB 考察意图：检查是否理解同一 HTTP 连接上的增量事件协议，而不是把 SSE 当 WebSocket。 相关知识：前端流式响应模式

30 秒回答 SSE 仍然是 HTTP response，但 body 不是一次性完整文档，而是 text/event-stream 文本流，按 event/data/id/retry 字段和空行持续产生事件。普通 JSON 通常等 body 完整后解析；SSE 客户端必须增量 framing，并处理连接生命周期。它天然 server→client，不提供 WebSocket 那样的全双工消息通道。

展开要点 使用 fetch-based POST streaming 时浏览器不会替你做 EventSource 的自动解析和重连，这些能力要由客户端实现。

继续追问

HTTP chunked transfer 与 SSE event 有什么区别？

什么时候不需要 SSE，普通 JSON 就够？

HTTP/2 下多个 SSE stream 怎么共存？ [!question]- P0 FE-S03 为什么一次 reader.read() 不能当成一条业务事件？题源：NC-H（NC-AI-FRONTEND-PROJECT） 答案依据：DOC + EXPERIMENT 考察意图：检查网络字节边界与应用协议边界是否被区分。 相关知识：前端 SSE 消费设计 · TCP

30 秒回答 ReadableStream 返回的是当前可用字节 chunk，边界由网络、浏览器和缓冲决定；一个业务 event 可能被拆成多次 read，多条 event 也可能在一次 read 中到达，UTF-8 字符本身还可能跨 chunk。因此要用流式 TextDecoder + buffer，根据协议 delimiter 切完整 frame，再解析 data/schema。

展开要点 这与 TCP 是字节流、没有业务消息边界是同一类问题。测试要主动把同一事件按任意位置切分。

继续追问

UTF-8 半字符怎样处理？

如何测试多个 event 粘在同一个 chunk？

JSON 内换行与 SSE 空行怎样区分？ [!question]- P0 FE-S04 Server State、Active Run、URL State 和局部 UI State 怎么分层？题源：NC-H（近期 AI 前端项目追问）+ RESUME-H 答案依据：KB + PROJECT-E2/E3 考察意图：检查状态所有权、生命周期和可恢复性。 相关知识：Server State vs Client State · Agent Runtime

30 秒回答 服务器拥有的 Goal/Task/Message 等数据放 Query cache；运行中的 Agent Run 以服务端 durable state 为真值，前端维护其局部投影和流式 buffer；可分享、可返回的 conversation/workspace/filter 放 URL；输入框、弹窗和临时 hover 等放局部 state。不要为了“统一”把四类状态复制进一个全局 store。

展开要点 切换会话时以 conversation/run id 隔离 reducer；重连后从服务端 snapshot + event cursor 收敛，而不是继续相信旧页面内存。

继续追问

为什么 active conversation 适合 URL？

流式 token 属于 server state 还是 UI projection？

浏览器刷新后哪些状态应该恢复？ [!question]- P0 FE-S05 流式状态机应该怎么测试？题源：NC-H（近期 AI 前端面经）+ AI-D 答案依据：EXPERIMENT + KB 考察意图：检查是否能验证 parser、reducer、竞态和恢复，而不是只做组件快照。 相关知识：前端测试 · 前端 SSE 消费设计

30 秒回答 分三层测：parser property/case tests 覆盖任意 chunk 切分、UTF-8、半包/粘包；reducer unit tests 覆盖 token/tool/citation/interrupt/error/done 的合法 transition、重复 event 和乱序；integration tests 用受控 stream 验证取消、切换会话、断线恢复与 UI。E2E 只保留少量真实链路。

展开要点 把同一事件随机拆分成不同 chunk 是高价值测试；同时断言旧 run 的迟到事件不能污染当前 run。

继续追问

如何测试 backpressure 和批量渲染？

重复 done event 应怎样处理？

断线时 tool started 但没有 result 怎么展示？ [!question]- P1 FE-S06 AI 生成 ECharts Spec 失败时，前端怎样安全降级？题源：NC-1（近期 AI 前端项目题） 答案依据：KB + runtime schema validation 考察意图：检查 declarative spec 的验证、资源限制和 fallback。 相关知识：输出校验

30 秒回答 让模型输出受限的 declarative schema，而不是任意 JavaScript；只允许有限 chart type、series/axis 字段和数据规模，拒绝 function、formatter code、外链脚本等可执行内容。Parse 或 render 失败时展示可读表格/原始数据与重试入口，并记录 model/config/validation error。

展开要点 业务数据也要做权限和敏感字段过滤；图表成功渲染不代表数据语义正确。

继续追问

怎样限制超大数据导致浏览器卡死？

模型给出不支持的图表类型怎么办？

如何验证图表和原数据一致？ [!question]- P1 FE-S07 AI 生成 UI 如何防 XSS 和任意代码执行？题源：NC-H（AI 前端安全追问） 答案依据：KB + threat model 考察意图：检查生成式 UI 是否保持数据与代码隔离。 相关知识：XSS · 输出校验

30 秒回答 优先让模型输出受限组件树/JSON DSL，只映射到 allowlist 组件和 props；文本默认 escape，富文本用成熟 sanitizer，URL 做 scheme/host 校验，禁止 eval、动态 import 和任意 event handler。渲染环境限制网络、文件和密钥权限，并为昂贵组件设置深度、节点数和数据量上限。

展开要点 即使 schema 合法，也要做业务授权，例如不能通过“按钮组件”绕过当前用户对删除操作的权限。

继续追问

Markdown 中哪些节点最危险？

iframe sandbox 能解决全部问题吗？

组件 DSL 如何版本化？ [!question]- P1 FE-S08 如何把组件库知识固化给 Coding Agent？题源：NC-H（2026 AI 前端题目汇总） 答案依据：KB + repository evidence 考察意图：检查 AI Coding 的上下文资产是否可发现、可验证、可演进。 相关知识：前端团队的 AI 工程资产 · AI 辅助开发工作流

30 秒回答 把稳定规则放进 repo：组件 catalog、Storybook/examples、design token、可访问性规范、推荐 composition、禁止用法、迁移指南和自动测试；再用 AGENTS/skill 指向这些权威资产，而不是在 prompt 里粘一份易过期清单。Agent 通过 targeted search 找相似组件，生成后由 typecheck、visual/component tests 和 lint gate 验证。

展开要点 组件 API 变化时更新单一事实来源和 contract test，避免规则文件与真实组件漂移。

继续追问

Storybook 和 Skill 分别承担什么？

如何阻止 Agent 重复造已有组件？

设计 token 如何被自动检查？ [!question]- P2 FE-S09 llms.txt 能解决什么，不能解决什么？题源：NC-1（近期前端 AI 工程题） 答案依据：DOC/COMMUNITY + 实际站点验证 考察意图：检查是否能把发现入口与真正的 Agent context/harness 区分。 相关知识：前端团队的 AI 工程资产

30 秒回答 llms.txt 可以作为网站面向 LLM/Agent 的轻量内容导航约定，帮助发现高价值文档入口；它不能强制所有模型读取，也不能替代 API schema、版本化文档、权限、安全、检索和测试。对仓库内 Coding Agent，更可靠的仍是可搜索源码、AGENTS/Skill、typed contracts 和可执行反馈。

展开要点 使用前应验证目标 Agent 是否支持这一约定，避免把社区实践描述成强制 Web 标准。

继续追问

它与 robots.txt 有什么本质区别？

为什么导航文件不能保证回答正确？

仓库内文档发现更适合什么机制？ [!question]- P0 FE-S10 前端团队如何给 AI Coding 建反馈回路？题源：NC-H（2026 AI 前端题目汇总） 答案依据：KB + CI evidence 考察意图：检查生成速度提高后如何自动治理质量。 相关知识：AI Code Review · Testing MOC

30 秒回答 把需求和验收写成可执行边界：formatter/lint/typecheck/unit/component/contract/E2E、可访问性和 visual diff；Coding Agent 每次小改后运行最窄反馈，提交前跑 affected CI，高风险权限/数据/基础设施变更人工审查。失败日志结构化回灌，重复错误沉淀成测试、lint rule、contract 或 Skill，而不是只提醒模型“下次小心”。

展开要点 指标应关注一次通过率、回归逃逸率、修复轮数和 review burden，而不是 AI 生成行数。

继续追问

哪些测试应该在 Agent 循环内运行？

视觉回归如何降低噪声？

AI 修改测试本身时怎样审查？

覆盖说明

本页由 21-frontend-js-ts-react-vue.md 中的 65 道编号题全量迁移，并从近期观察层去重补充 10 道独立高价值题，共 75 道；每题包含题源、答案依据、考察意图、知识链接和追问。近期题目趋势另由题源注册表管理，避免再次维护一套重复答案。