前端面试潜在问题

以下是基于简历内容梳理的潜在前端面试题目及详细回答，覆盖技术原理、项目实践、工程化等核心维度，结合简历中的具体经历展开说明：

一、基础与进阶原理类

1. 请解释React Fiber架构的设计目的和工作原理，你在项目中如何利用这一特性优化体验？

回答要点：
React Fiber是React 16引入的重构架构，核心目的是解决传统Stack Reconciliation（递归更新）导致的“主线程阻塞”问题——当组件树庞大时，递归更新会占用主线程导致UI卡顿（无法响应输入、动画掉帧）。

其工作原理可概括为：

• 任务拆分：将渲染任务拆分为“小单元”（Fiber节点，对应组件），每个单元执行后检查是否有更高优先级任务（如用户输入、动画），若有则暂停当前任务让出主线程，待空闲后恢复（类似“时间切片”）。
• 双向链表结构：Fiber节点通过return（父）、child（子）、sibling（兄弟）指针形成链表，支持任务中断后从任意节点恢复，而非重新遍历整棵树。
• 优先级调度：结合Scheduler包实现任务优先级排序（如Immediate> UserBlocking> Normal> Low> Idle），优先处理用户交互等关键任务。

在项目中，我在开发“智能博客AI辅助创作平台”的编辑器组件时（基于React），因涉及实时渲染AI生成的Markdown内容（含动态思维导图），利用Fiber的任务调度特性：通过useDeferredValue将非紧急的渲染任务（如思维导图节点动画）标记为低优先级，确保用户输入（打字、上传图片）时主线程不阻塞，交互响应速度提升约30%。

2. 对比Vue的响应式原理（Vue2与Vue3）及Diff算法的优化点，你在项目中如何应用这些特性？

回答要点：

• 响应式原理差异：

  • Vue2基于Object.defineProperty劫持对象属性的getter/setter，但存在无法监听数组索引/长度变化、新增属性需$set等局限。
  • Vue3改用Proxy代理整个对象，支持监听数组变化、新增/删除属性，且能拦截in、delete等操作；同时通过Reflect统一操作原生对象，避免触发原型链污染。

• Diff算法优化：

  • Vue2的Diff采用“双端比较”（头尾指针向中间收缩），但对跨层级移动节点效率低（需卸载重建）。
  • Vue3的Diff引入“最长递增子序列”（LIS）算法：在列表diff时，先通过key匹配找到可复用节点，再基于LIS确定最少移动次数，减少DOM操作（尤其长列表场景，性能提升约50%）。

在“城市灾害应急管理集成系统”的流程设计器（Vue+BPMN.js）中，因需频繁拖拽节点更新列表（模型编排顺序），我采用Vue3的响应式和Diff优化：

• 用reactive代理整个流程节点数组，实时响应拖拽后的顺序变化，无需手动触发更新；
• 通过key绑定节点唯一ID，结合LIS算法减少节点移动时的DOM重绘，流程编排操作的流畅度（帧率）从45fps提升至60fps。

3. 解释JavaScript中的异步编程模式（回调、Promise、async/await）及优缺点，你在项目中如何处理复杂异步场景？

回答要点：

• 回调函数：基础异步模式，通过函数嵌套实现，但多层嵌套会导致“回调地狱”（可读性差、错误处理繁琐）。
• Promise：用then/catch链式调用解决回调地狱，支持all/race等并发控制，但仍需通过链式调用处理顺序依赖，且无法中途取消。
• async/await：基于Promise的语法糖，将异步代码同步化写法，支持try/catch统一错误处理，可读性更强，但需配合await关键字，可能因滥用导致性能问题（如串行执行可并行的任务）。

在“得物广告投放低代码编辑器”中，处理“实时预览”的多步异步场景（配置变更→接口请求→状态同步→预览更新）时：

• 用async/await简化逻辑：先通过await调用接口获取配置变更后的渲染数据，再用await触发Valtio状态同步（确保Iframe与主应用状态一致）；
• 对并行任务（如背景图预加载+组件元数据请求）用Promise.all并发处理，将预览初始化时间从800ms缩短至400ms；
• 用AbortController取消过期请求（如用户快速修改配置时，终止前一次未完成的渲染请求），避免资源浪费。

二、性能优化类

4. 如何优化前端关键性能指标（TTFB、FCP、LCP、INP）？结合你的项目经验举例说明。

回答要点：
关键指标优化需结合“网络传输-渲染机制-交互响应”全链路设计：

• TTFB（首字节时间）：优化服务器响应速度，如在得物C端落地页用Next.js的SSG（静态生成）预渲染静态内容，将TTFB从300ms降至80ms；同时通过CDN分发静态资源，减少地域延迟。
• FCP（首次内容绘制）：优先加载关键CSS（内联到HTML），用rel="preload"预加载核心字体/JS；在个人网站中，将WebGL粒子背景的初始化逻辑延迟到FCP后（requestIdleCallback），确保首屏内容先展示。
• LCP（最大内容绘制）：优化大图片加载（WebP格式+响应式图片srcset），在灾害系统中，遥感影像采用“渐进式加载”（先低分辨率缩略图，再高清图），LCP从2.5s优化至1.2s。
• INP（交互下一步绘制）：减少长任务阻塞主线程，将复杂计算（如大文件哈希生成）放入WebWorker；在低代码编辑器中，用throttle限制配置面板的频繁更新，INP从200ms降至50ms以内。

核心思路：基于浏览器渲染机制（解析→布局→绘制→合成），通过“减少资源体积（压缩/Tree Shaking）、优化加载顺序（优先级）、避免阻塞（异步/Worker）”提升指标。

5. 大文件上传（如遥感影像、三维Mesh模型）的技术方案是什么？如何实现断点续传和秒传？

回答要点：
在“城市灾害应急管理系统”中，针对100MB+的遥感影像和三维模型，方案如下：

• 断点续传与秒传：

  1. 前端通过spark-md5计算文件哈希（大文件用WebWorker分片计算，避免阻塞），作为唯一标识；
  2. 上传前先请求后端校验哈希：若已存在（秒传），直接返回文件ID；若部分存在（断点续传），返回已上传分片列表，仅传剩余部分。

• 加速上传：

  1. 分片处理：将文件按5MB分片（Blob.slice），用Promise.all并发上传（限制6个并发，避免请求过多）；
  2. 多线程：通过WebWorker处理分片哈希计算和上传逻辑，主线程仅负责进度展示，避免页面卡顿；
  3. 后端合并：所有分片上传完成后，后端调用合并接口，将分片按顺序拼接为完整文件。

效果：1GB文件的上传时间从原600s（单文件上传）缩短至80s，且支持刷新页面后继续上传。

三、工程化与框架类

6. 你在项目中使用Monorepo（pnpm + Turborepo）的实践是什么？相比多仓库有哪些优势？

回答要点：
在得物实习的“低代码落地页编辑器”中，因涉及B端编辑器（React）、C端渲染引擎（Next.js）、公共组件库三个模块，采用Monorepo架构：

• 具体配置：

  • 用pnpm workspaces管理子包（packages/editor、packages/renderer、packages/components），通过pnpm link实现本地依赖共享；
  • 用Turborepo配置任务管道：定义build、test、lint任务，设置依赖关系（如renderer依赖components的build），实现增量构建（仅重新构建变更的包）和并行执行。

• 优势：

  1. 代码复用：公共组件/工具函数无需发布npm包，直接跨包引用，修改后所有依赖模块实时生效；
  2. 版本统一：避免多仓库中依赖版本不一致导致的“幽灵依赖”问题；
  3. 效率提升：Turborepo的缓存机制（远程缓存+本地缓存）将构建时间从15分钟缩短至3分钟；