高阶前端面试题（含AI相关）
react
Hooks 为什么必须按顺序调用？
参考答案要点
- 通过链表存储 hook
- 顺序即索引
- 条件调用会导致错位
面试官重点 - 是否提到 Fiber.memoizedState
useState 的更新是如何批处理的？
参考答案要点
- 同一事件循环内批处理
- Concurrent 模式下自动批处理
- 更新队列 + lane 合并
Fiber 为什么是链表结构，而不是树或数组？
参考答案要点
- child / sibling / return 指针
- DFS 迭代而非递归
- 避免调用栈溢出
- 支持时间分片（Time Slicing）
加分 - 提到 workLoop / performUnitOfWork
为什么 setState 是异步的，但有时又是同步的？
参考答案要点 - 是否在 React 管控上下文
- 批处理机制
- flushSync
TS
TypeScript 相比 JavaScript 解决了什么问题？
参考答案要点 - 静态类型检查
- 提前发现错误
- 更好的 IDE 支持
- 可读性 & 可维护性提升
面试官判断 - ❌ 只说“防止 bug”
- ✅ 能说“约束 + 文档 + 重构安全”
type 和 interface 的区别？
参考答案要点 - interface 可声明合并
- type 支持联合、交叉、条件类型
- interface 更适合对外契约
- type 更适合复杂类型运算
什么是泛型？你在项目中如何使用？
参考答案要点 - 类型参数化
- 保持类型信息
- 常见场景：
- 请求函数
- Hooks
- 工具方法
function request(url: string): Promise {}
AI相关
在 AI 应用中，前端和传统业务最大的不同是什么？
参考答案要点
- 不确定性
- 返回结果不可预测
- 延迟更长
- 一次请求 ≠ 一次结果
面试官判断 - ❌ 只说“慢”
- ✅ 能说“不稳定 + 非确定”
为什么 AI 接口不能像普通接口那样直接用？
参考答案要点 - 输出结构不稳定
- 需要容错
- 需要引导用户预期
- 需要兜底 UI
如何避免 AI 任务更新阻塞 UI？
参考答案要点 - startTransition
- Web Worker
- 节流更新
- 分片渲染
编程题
- 把’aabcabbb’ -> ‘a3b4c1’
- 得到一个新list: [‘high’, ‘highmm’]
const source = {
拍摄角度: “高机位 anah”,
镜头: “8mm鱼眼 nsnnsns”
};
const options = [
{
label: “构图”,
children: [
{ label: “无”, value: “” },
{ label: “三分法构图”, value: “rule_of_thirds” },
{ label: “居中构图”, value: “centered” }
]
},
{
label: “拍摄角度”,
children: [
{ label: “无”, value: “” },
{ label: “高机位”, value: “high” },
{ label: “低机位”, value: “low” }
]
},
{
label: “镜头”,
children: [
{ label: “无”, value: “” },
{ label: “8mm鱼眼”, value: “highmm” },
{ label: “400mm超长焦”, value: “mmhang” }
]
}
];
js执行顺序
async function async1() {
console.log(“1”)
await async2()
console.log(“2”)
}
async function async2() {
console.log(“3”)
}
console.log(“4”)
setTimeout(function () {
console.log(“5”)
}, 300)
setTimeout(function () {
console.log(“6”)
}, 0)
async1()
new Promise(function (resolve) {
console.log(“7”)
resolve()
console.log(“8”)
}).then(function () {
console.log(“9”)
});
console.log(“10”)
Webpack 和 Vite
Webpack 为什么慢？瓶颈在哪里？
参考答案要点
- JS 解析 & 转换慢
- 单线程
- 大量 IO
- loader 链路长
Vite 为什么快？
参考答案要点 - 开发环境：
- 基于 ESM
- 不打包
- 按需加载
- 生产环境：
- Rollup 打包
- 预构建依赖（esbuild）
👉 说“不打包”是关键
Vite 的 HMR 为什么比 Webpack 快？
参考答案要点 - 精准模块依赖
- 不需要重新构建 bundle
- 基于 ESM graph
Css
flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0% 的简写
❓ 为什么 flex: 1 会让内容被压缩？
👉 因为： - flex-basis: 0
- 内容宽度不参与初始计算
- 空间不够时还允许 shrink
❓ 如果我想“内容自适应 + 占剩余空间”怎么写？
flex: 1 1 auto;
或者：
flex: auto;