本文基于三年前端开发经验，复盘了字节跳动、淘天集团和美团的前端面试经历，涵盖技术基础、工程化及手写题等内容。
一、字节跳动（抖音电商团队）
面试特点： 极其看重计算机基础、算法能力和源码理解。基本每一轮都会有一到两道 Hard/Medium 级别的算法题或手写题。
一面（基础与深度，约 60 分钟）
一面面试官主要考察基础的扎实程度，问得很细。
- CSS/HTML： BFC 的触发条件和应用场景？如何实现一个高度自适应的瀑布流布局？
- JS 基础： V8 引擎的垃圾回收机制（新生代/老生代）？WeakMap 和 Map 的区别，WeakMap 解决了什么内存泄漏问题？
- 框架底层： React 19 的 Compiler 机制解决了什么问题？对比 Vue 3.5 的响应式优化（基于 Proxy 的深度解析）。
- 网络： HTTP/2 的多路复用原理？HTTP/3 为什么采用 UDP（QUIC 协议）？
- 📝 手写题： 实现一个带并发限制的 Promise.all（见文末附录 1）。
二面（项目与性能，约 70 分钟）
二面压力剧增，面试官会顺着你的项目往深处挖。
- 项目难点： 你在项目中如何处理十万级数据的表格渲染？（答了虚拟列表，紧接着被追问：如果列表项高度是不固定的怎么算位置？）
- 性能优化： 首屏加载优化做了哪些？除了常规的路由懒加载、CDN，有了解过 prefetch/preload 的底层优先级吗？
- 工程化： 你们项目从 Webpack 迁移到 Vite/Rspack 的过程中遇到了什么坑？CommonJS 和 ES Module 在构建时的 Tree-Shaking 差异在哪？
- 📝 算法题： LeetCode 146. LRU 缓存机制（要求 O(1) 时间复杂度，使用 Map 和双向链表实现）。
三面（主管面，约 45 分钟）
主管面主要考察业务思考、抗压能力和对前沿技术的敏感度。
- 你觉得过去三年里，你主导的最成功的一个技术方案是什么？业务收益如何量化？
- 平时怎么学习前端新技术的？
- 前沿探索： 目前 AI 编码助手（如 Cursor、Copilot）很火，你是如何利用 AI 提升日常开发效率的？前端未来会被 AI 取代吗？
二、淘天集团（阿里，大淘宝技术）
面试特点： 偏向前端工程化、复杂架构设计（微前端/Monorepo）以及对业务指标的理解。
一面（技术广度，约 50 分钟）
- 微前端： 了解过 Qiankun 和 Wujie（无界）吗？谈谈基于 Web Components 的样式隔离和基于 Proxy 的 JS 沙箱原理。
- 状态管理： Redux Toolkit 和 Zustand 的核心差异？为什么现在更推荐 Zustand 这种轻量级方案？
- Node.js： SSR（服务端渲染）的原理是什么？Next.js/Nuxt.js 中如何处理客户端和服务端状态注水（Hydration）不一致的报错？
- 📝 手写题： 手写深拷贝（Deep Clone），要求解决循环引用和 Map/Set 类型问题（见文末附录 2）。
二面（架构与基建，约 60 分钟）
- Monorepo 架构： 为什么要用 pnpm workspace 做 Monorepo？pnpm 的幽灵依赖是怎么解决的（软硬链接原理）？
- 前端监控： 如何设计一个前端监控 SDK？错误收集（window.onerror vs unhandledrejection）、白屏检测机制怎么做？
- CI/CD： 讲一下你们公司的前端自动化部署流水线（GitLab CI / GitHub Actions 编写）。
- 📝 手写题： 数组扁平化（Flat）及其逆运算（将一维数组转成树形结构）。
三、美团（到店事业群）
面试特点： 极其注重原生 JS 功底，有很多场景题，喜欢问跨端（小程序/H5）。
一面（JS 核心，约 50 分钟）
- 事件循环（Event Loop）： 宏任务和微任务的执行顺序？Node.js 环境下的 Event Loop 和浏览器有什么区别？
- 闭包： 给了一段经典的闭包输出题（带 setTimeout 和 var/let），让说出输出结果及原理。
- 跨端通信： H5 嵌入在美团 App 内，JSBridge 的底层通信原理是什么？（URL Schema 拦截 / 注入全局对象）。
- 📝 手写题： 防抖（Debounce）和节流（Throttle），要求防抖支持'立即执行一次'的参数。
二面（场景与安全，约 60 分钟）
- 安全防护： 详细讲讲 XSS 和 CSRF 攻击的原理及防御手段。Cookie 的 SameSite 属性有哪几个值，分别代表什么？
- 场景题： 如果用户网络极差，上传大文件（如 1GB 视频）经常中断，前端怎么设计一个'断点续传 + 秒传'的方案？（切片上传 + Web Worker 计算 File MD5）。
- 📝 算法题： 版本号对比（如比较 1.0.1 和 1.0.01.1 的大小）。
四、高频手写题复盘（必背代码区）
面试前，这几段代码请务必在白纸上能默写出来！
1. 带并发限制的异步调度器（字节高频）
题目描述： 实现一个 Scheduler，支持并发执行异步任务，但最大并发数受限。
class Scheduler {
constructor(limit) {
this.limit = limit; // 最大并发数
this.count = 0; // 当前正在运行的任务数
this.queue = []; // 等待队列
}
add(task) {
return new Promise((resolve) => {
task.resolve = resolve;
if (this.count < this.limit) {
this.run(task);
} else {
this.queue.push(task);
}
});
}
run(task) {
this.count++;
task().then((res) => {
task.resolve(res);
this.count--;
// 执行完一个，如果队列有任务，继续执行
if (this.queue.length > 0) {
this.run(this..());
}
});
}
}
scheduler = ();
= () => ( (r, time));
= () => {
scheduler.( (time)).( .(order));
};
(, );
(, );
(, );
(, );
2. 完美的深拷贝（阿里高频）
题目描述： 实现深拷贝，需处理数组、对象、Map、Set 以及循环引用。
function deepClone(obj, hash = new WeakMap()) {
// 处理 null 或非对象
if (obj === null || typeof obj !== 'object') return obj;
// 处理 Date 和 RegExp
if (obj instanceof Date) return new Date(obj);
if (obj instanceof RegExp) return new RegExp(obj);
// 处理循环引用，如果 hash 中有，直接返回
if (hash.has(obj)) return hash.get(obj);
// 处理 Map
if (obj instanceof Map) {
const map = new Map();
hash.set(obj, map);
obj.forEach((val, key) => {
map.set(key, deepClone(val, hash));
});
return map;
}
// 处理 Set
if (obj instanceof Set) {
const set = new Set();
hash.set(obj, set);
obj.forEach( => {
set.((val, hash));
});
set;
}
cloneObj = obj.();
hash.(obj, cloneObj);
.(obj).( {
cloneObj[key] = (obj[key], hash);
});
cloneObj;
}
3. 一维数组转树形结构（美团高频）
题目描述： 将带有 id 和 parentId 的扁平化数组，转换为树形结构。
const list = [
{ id: 1, name: '部门 A', parentId: 0 },
{ id: 2, name: '部门 B', parentId: 0 },
{ id: 3, name: '部门 C', parentId: 1 },
{ id: 4, name: '部门 D', parentId: 1 },
{ id: 5, name: '部门 E', parentId: 2 },
];
function listToTree(data) {
const map = {};
const tree = [];
// 先把数据映射进 map
data.forEach(item => {
map[item.id] = { ...item, children: [] };
});
// 再遍历一遍，寻找父节点
data.forEach(item => {
if (item.parentId === 0) {
// 根节点
tree.push(map[item.id]);
} else {
// 找到父节点，塞进 children
if (map[item.]) {
map[item.]..(map[item.]);
}
}
});
tree;
}
.(.((list), , ));
对于三年经验的前端来说，'差异化竞争'是关键：
- 简历拒绝流水账： 不要只写'使用 Vue 开发了后台系统'。要写出收益：'通过引入 Vite 预构建与动态按需加载，将项目冷启动时间从 30s 缩短至 5s，FCP 提升 40%'。
- 打破舒适区： 2026 年了，别局限在切图和调接口上。花点时间看看 Node.js、学习一下 Rust 构建工具链（Rspack / SWC）、了解 CI/CD，往全栈或工程化前端靠拢。
- 拥抱 AI： 面试中一定要表现出你在积极使用 AI 工具（Cursor、GitHub Copilot）辅助编程，大厂现在极其看重开发者的'AI 智商'（提效能力）。
