蘑菇街前端面试全攻略：从技术栈到薪资谈判的系统指南

公司定位

时尚内容电商平台，以“内容+社交”驱动电商转化，前端需支撑高互动性内容展示（如直播、短视频、UGC社区）

技术栈特点

Vue全家桶（Vue2/Vuex/Router）为主，Node.js中台，TypeScript渐进式引入，微前端架构（qiankun）支撑多业务线协同

团队规模

前端团队超80人，分为基础架构组、业务中台组、移动端组、数据可视化组，实行“大中台、小前台”组织模式

技术挑战

双11大促期间亿级PV流量削峰填谷、跨端一致性（Web/iOS/Android/小程序）、内容安全合规渲染、性能指标（FCP/LCP）持续优化

基础架构工程师（高级/专家）

• 负责微前端框架qiankun定制化改造与性能优化
• 设计并实现工程化工具链（CLI/CI/CD/监控）
• 主导TypeScript迁移方案落地与类型系统建设
• 技术预研（如WebAssembly、Rust编译前端）

要求：5年以上经验，熟悉Vite/ESBuild，有大型微前端项目实战，精通浏览器渲染原理与性能调优

业务中台前端工程师（中高级）

• 开发商品详情页、购物车、订单等核心链路模块
• 实现高并发场景下的状态管理与异步数据同步
• 配合后端设计RESTful/GraphQL接口规范
• 推动组件库（Mogu Design）复用率提升

要求：3年以上经验，精通Vue响应式原理，熟悉性能监控（如Web Vitals），具备复杂业务抽象能力

移动端/小程序工程师

• 开发Weex/H5/小程序多端兼容页面
• 优化Hybrid通信性能与错误降级策略
• 实现PWA离线包与资源预加载
• 接入埋点体系与A/B测试框架

要求：熟悉Weex原理，有小程序开发经验，了解iOS/Android原生交互，掌握Hybrid安全机制

核心框架：Vue生态

当前主站Vue 2.6.x + Vuex + Vue Router，2025年Q2启动Vue 3迁移。重点考察：

• 响应式原理：Proxy拦截陷阱（get/set/deleteProperty）
• 组件通信：provide/inject vs $emit vs Pinia Store
• 性能优化：v-memo、keep-alive、异步组件

工程化：构建工具链

自研Mogu CLI基于Webpack5，支持：

• 微应用打包：动态导入+预加载策略
• TypeScript配置：strict模式 + 自动类型推导
• 性能监控：Webpack Bundle Analyzer + Sentry

Node.js中台

使用Koa2 + Egg.js开发BFF层，考察点：

• 中间件设计（认证/限流/日志）
• 数据库操作（Sequelize/Redis）
• 服务降级策略（熔断/降级）

移动端技术

Weex（Apache开源项目）与Hybrid混合开发：

• Weex原理：JSBridge通信、渲染管道
• Hybrid安全：白名单校验、JS沙箱
• 小程序：微信/支付宝/蘑菇街三端适配

1. Vue3的Proxy相比Vue2的Object.defineProperty有哪些优势？

答案要点：

• 支持数组索引监听（Vue2需重写7个数组方法）
• 支持新增/删除属性监听（Vue2需用$set/$delete）
• 性能更优（拦截次数减少，避免递归遍历）

2. 如何实现一个防抖节流函数？请写出代码并说明应用场景。

// 防抖（debounce）
function debounce(fn, delay = 300) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
// 节流（throttle）
function throttle(fn, delay = 300) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

防抖：搜索输入、窗口resize；节流：滚动加载、按钮点击

3. 浏览器渲染流程中，哪些操作会触发重排（Reflow）？如何避免？

答案要点：

• 重排触发：布局改变（宽高/位置）、内容变化（文本/图片）、元素显示状态变化
• 优化策略：使用transform代替top/left；批量DOM操作；避免table布局；使用requestAnimationFrame

4. 微前端架构中，qiankun如何实现应用隔离？

答案要点：

• 样式隔离：使用scoped CSS + CSS Variables
• JS隔离：通过Proxy沙箱隔离全局变量
• 生命周期：通过生命周期钩子管理子应用加载/卸载

技术方案

• 缓存层：Redis集群（热点数据预热+分布式锁）
• CDN层：静态资源（JS/CSS/图片）全量缓存+版本化
• 服务层：Node.js BFF聚合数据，失败时返回兜底数据
• 前端层：SSR首屏渲染 + CSR后续交互

性能优化

• 资源预加载（link rel="preload"）
• 图片懒加载（IntersectionObserver）
• 关键CSS内联（Critical CSS）
• Web Worker处理复杂计算

容灾设计

• 服务降级：Redis不可用时返回静态JSON
• 熔断机制：Hystrix式熔断器
• 灰度发布：按用户ID灰度切流

Q：非科班出身能否通过面试？

A：可以！2024年入职的前端中，32%为非科班背景（自考/培训/转行）。关键点：

• 构建完整知识体系（推荐《JavaScript高级程序设计》+《Vue.js实战》）
• 输出技术作品集（GitHub仓库+技术博客）
• 参加开源项目积累协作经验

Q：应届生如何准备项目经验？

A：推荐3类实战项目：

• 电商前台（含商品列表、详情页、购物车）
• 管理后台（权限系统、数据可视化）
• 开源项目贡献（如Mogu Design组件库）

Q：微信小程序经验是否通用？

A：通用！蘑菇街小程序与微信生态兼容性高，重点考察：

• 跨端适配能力（CSS变量+JS兼容处理）
• 性能优化（分包加载、图片压缩）
• 安全机制（数据加密、接口鉴权）

官方资源

• Mogu Design：https://github.com/mogu-frontend/mogu-design
• Mogu Chart：https://github.com/mogu-frontend/mogu-chart
• 技术博客：https://tech.mogu.com

开源项目

• Vue 3源码解析：https://github.com/vuejs/core
• 微前端实战：https://github.com/umijs/qiankun
• 前端性能清单：https://github.com/thedaviddias/Front-End-Performance-Checklist

书籍推荐

• 《JavaScript高级程序设计》（第4版）
• 《Vue.js3实战》
• 《高性能网站建设指南》
• 《前端架构：从入门到微前端》

如何准备前端面试中的算法题？

建议从《剑指Offer》入手，逐步过渡到LeetCode中等难度题。重点掌握：
• 数组/字符串双指针
• 树的DFS/BFS
• 动态规划状态转移
• 贪心与回溯算法

微前端架构的优缺点是什么？

优势：
• 技术栈解耦
• 团队独立部署
• 业务隔离
劣势：
• 包体积膨胀
• 子应用通信复杂
• 调试困难

前端工程师如何向全栈发展？

路径建议：
1. 掌握Node.js基础（Koa2/Express）
2. 学习数据库（MySQL/MongoDB）
3. 理解微服务架构
4. 实践DevOps（Docker/Jenkins）