前端面试问答记录

面试官：超级工厂平台项目问题

Q1: 模型出码全链路的具体流程和机制

问题： 从用户输入到最终生成可运行的前端应用，中间都经过了哪些关键步骤？模块生成调度机制、上下文管理机制和兜底修复机制是如何协同工作的？

回答： 现在做的是输入figma直接生成可以运行的完整应用，分3部分：视觉、逻辑、出码。通过figma转html，再通过逻辑推理，引入外部知识，对整个应用的模块功能进行描述，最后出码层基于单个模块逻辑能力进行出码。

Q2: 视觉到逻辑转换的细节

问题：

1. 如何将Figma产生的HTML结构转化为"模块功能描述"？LLM如何理解页面功能？
2. 外部知识包含哪些？如何组织和管理？
3. 如何定义"模块"？单个模块的逻辑能力边界？
4. 质量保证机制如何工作？

回答：

• 在设计最前端，会有严格的设计稿规范，要求设计师在figma的图层节点都是比较有语义的
• 视觉模型层结合领域知识库做理解，对html内关键元素进行打标，标注哪些是list item，哪些是不同状态展示
• 逻辑推理主要来自业务架构文档，因为最终需要直接上线的运营活动，需要很准确的业务逻辑
• 我没有负责figma转html这块视觉的工作，主要负责出码相关
• 做了figma插件帮助设计师按规范实现，以及校验规范和搜索文档

Q3: 知识库构建和LLM切分技术

问题： 领域知识库具体包含哪些内容？智能切分chunk是如何提升召回准确率的？

回答：

• 知识库主要包含组件的UI关键元素，以及UI的交互逻辑
• 之前积累了很多业务组件，里面有很多通用的交互逻辑，希望在出逻辑代码时能结合这部分已有交互逻辑进行推理
• 智能切分chunk是因为传统文本字数+重叠字数切分容易截断，在场景中完全不能接受，因为逻辑链是完整的
• 让模型切chunk，通过prompt限制切完整的交互链和按语义切分句子，每个句子都是完整的
• 成本会比较高，但保证了准确性

Q4: 测试用例生成和验证机制

问题： 根据需求模型出测试用例，这个需求模型是什么？测试用例覆盖哪些维度？

回答：

• 根据figma和需求文档，UI正确、交互以及接口都会验证
• 通过QTA平台跑测试用例来打分
• 项目还在开发，但有完整的链路和自动化测试

Q5: 技术实现细节

问题： 知识库索引策略、链路打通挑战、性能成本平衡等。

回答：

• 使用向量数据库，主要提取UI元素的布局特征、交互行为特征
• 新组件流程：切分、生成qa对，更新索引
• 各层有标准化接口定义，出现问题都由我来排查
• 点不动大概率是打标事件不对，数据没了是数据模型问题
• 目前还在实验性，主要看效果，还没有做性能成本优化

---

面试官：页匠智能营销平台问题

Q6: 流式指令渲染引擎架构

问题：

1. 流式渲染引擎的核心数据结构是什么样的？
2. 如何管理消息的状态流转？
3. 自定义组件渲染如何实现？沙箱环境如何做？
4. 性能优化策略？实时协作挑战？

回答：

• 设计了指令的语法，用来在流式数据里给前端展示不同效果，如商品卡、跳转链接等，每个都是一种指令
• 前端通过读取SSE的流式数据做展示，实现增量展示（一个个字打出来的效果）
• 由于指令可能很长，如果一个个字setState会导致遇到指令时等待很久
• 解决方案：在遇到指令开头时快速往后找闭合节点，不对每个字符做setState，遇到指令也能快速渲染对应组件
• 完成渲染主要依赖SSE流式输出的结束
• 自定义组件用的是react-markdown的渲染，注册事件，在解析流式数据的时候转成对应需要的JSX
• 页面优化：减少首屏请求，减少包体积，CDN配置
• 做了灰度处理避免并发过高
• iOS没有做特别处理
• 没有用户发送新消息中断当前渲染的场景

补充回答：

• 指令是类似于html注释，这是一种约束语法，数据是拼接的，因此一定是完整的
• 找闭合节点的过程是通过while循环在流式数据里找闭合，缓存起来在内存里，等待新的数据进入，因为指令一定会闭合
• 一个个setState，props是在指令里实现的，会转成组件的props
• 不允许发新消息

---

面试官：AI应用和八股文

Q7: 流式渲染引擎技术总结

问题总结： 关于页匠智能营销平台流式指令渲染引擎的详细技术实现

技术要点总结：

• 指令语法设计： 类似HTML注释的约束语法，数据拼接保证完整性
• 增量渲染实现： SSE流式数据 + setState，实现打字机效果
• 性能优化策略： 遇到指令开头快速找闭合节点，避免逐字符setState
• 自定义组件渲染： react-markdown + 事件注册，流式数据转JSX
• 系统优化： 减少首屏请求、包体积优化、CDN配置、灰度处理
• 状态管理： 内存缓存流式数据，不允许并发发送消息
• 移动端适配： iOS无特殊处理，主要做通用优化

---

后续待讨论话题

前端八股文准备

React Fiber架构和并发模式

核心要点：

• React 18并发模式：渲染过程可中断、可恢复，提升用户体验
• 自动批处理：所有更新都会批处理，减少不必要渲染
• 调度器：智能任务调度，区分优先级，时间分片防止阻塞
• Transition API：区分紧急和非紧急更新
• Fiber双缓冲：current树和workInProgress树，避免页面闪烁

口语化回答： "React 18就像装了个智能调度器，知道什么时候该做什么事。重要的用户交互立即处理，不太重要的更新就等一等，这样既保证用户体验流畅，又不会让浏览器卡死。"

技术细节：

• 时间分片：每5ms检查一次是否让出主线程
• 优先级车道：SyncLane > InputContinuousLane > DefaultLane > IdleLane
• 两阶段渲染：Render阶段(可中断计算) + Commit阶段(不可中断应用)
• 双缓存机制：内存构建新树，一次性切换

TypeScript高级类型编程

（待准备）

前端性能优化实践经验

（待准备）

大模型在前端领域的应用理解

（待准备）