七牛云前端面经

七牛云前端面试主要围绕基础知识、项目经验、底层原理、工具对比及算法等方面展开，面试流程分为三面，整体注重技术深度与项目细节。 以下是具体内容梳理：

• 一面：技术基础与核心能力考察

  自我介绍：简要说明个人背景、技术栈及项目经验。

  HTML：考察语义化标签（如<header>、<section>）及响应式开发（媒体查询、rem/vw单位）。

  JavaScript：

  八股文：原型链、闭包、数据类型判断（typeof/instanceof/Object.prototype.toString）、数据类型转换方法。

  手撕代码：

  闭包实现链式加法：通过闭包保存中间状态，返回函数实现连续调用。

  数组拍平：递归或reduce实现，禁用flat(Infinity)。

  React：

  Hooks底层实现：基于函数组件闭包保存状态，通过useState的链表结构管理状态顺序。

  重新渲染逻辑：依赖项变化触发重新执行，组件更新时对比新旧虚拟DOM（Diff算法）。

  组件通信：Context API、Props、状态管理工具（如Mobx）。

  虚拟DOM与Diff：通过树比对优化渲染性能。

  Mobx：

  核心概念：可观察对象（observable）、响应式更新（autorun）。

  重新渲染逻辑：通过action修改状态，runInAction批量处理异步更新。

  打包工具：

  Webpack与Vite对比：Vite基于ES Module原生支持，开发环境启动更快。

  Vite优势：冷启动速度、按需编译、HMR（热更新）效率高。

  反问环节：

  询问公司业务方向（如云存储、CDN）、部门职责（前端团队规模、技术栈）。

  确认可提升的技术方向（如深入React源码、性能优化）。

• 二面：项目深度与底层原理探讨

  实习经历：

  工作内容：OSS上传、MinIO接口开发、AWS S3了解程度。

  系统设计参与：需求分析、架构设计（如分片上传的模块划分）。

  技术选型：为何选择React而非Vue（如生态、灵活性）。

  项目细节拷问：

  文件管理：

  OSS使用原因：对比本地存储的优势（可扩展性、成本）。

  分片上传实现：

  前端分片逻辑：按大小切割文件，生成哈希（如MD5）作为唯一标识。

  后端处理：合并分片、校验完整性。

  哈希算法选择：MD5的优缺点（快速但碰撞风险，现多用SHA系列）。

  FUSE误解：实际使用fuse.js（模糊搜索库）而非用户空间文件系统。

  组件库：Ant Design使用原因（设计规范、组件丰富度），对比其他库（如Element UI）。

  底层原理：

  React类组件与函数组件：

  类组件：基于state和生命周期，适合复杂逻辑。

  函数组件：配合Hooks更简洁，无this指向问题。

  React Fiber：协调引擎重构，支持增量渲染（时间切片）、优先级调度。

  新特性：useDeferredValue（延迟更新非关键状态，优化性能）。

  JS事件循环：宏任务（setTimeout、I/O）、微任务（Promise、MutationObserver）执行顺序。

  工具与样式：

  Tailwind CSS：未使用，但了解其原子化CSS优势。

  Less特性：变量、嵌套、混合（Mixin），对比Sass/SCSS（功能类似，语法差异）。

  算法：因有竞赛记录未手撕，但需准备常见算法（如排序、链表操作）。

  反问环节：

  框架学习建议：面试官建议精进一门（如React），吃透底层后迁移学习其他框架更快。

• 三面：HR综合评估

  通常涉及职业规划、团队协作、文化匹配等软技能考察，具体问题未详细记录，但需准备：

  稳定性评估（如实习时长、换工作动机）。

  学习能力与自我驱动（如技术博客、开源贡献）。

  团队协作案例（如冲突解决、代码评审）。

总结建议：

• 技术深度：重点准备React Hooks、虚拟DOM、事件循环等底层原理，对比Vue/Angular等框架差异。
• 项目优化：梳理项目中的技术难点（如分片上传、性能优化），量化成果（如上传速度提升比例）。
• 八股文：巩固JS基础（原型链、闭包、异步）、CSS预处理器、打包工具配置。
• 软技能：提前准备职业规划、团队协作案例，体现稳定性与学习能力。