Airbnb 前端面试真题全解析Front End Interview Handbook 企业题库篇JavaScript 编码、UI 组件、系统设计与实战复盘【免费下载链接】front-end-interview-handbookFront End interview preparation materials for busy engineers (updated for 2026)项目地址: https://gitcode.com/GitHub_Trending/fr/front-end-interview-handbook导读Airbnb 的前端面试以实战导向 组件高频复用著称既有 Backbone Model 风格的键值对象编码题也有大量需要在白板或编辑器里现场写出的 UI 组件题还会穿插 LeetCode 风格的算法轮与聊天应用、旅行预订平台等系统设计轮。本文基于 website/contents/companies/airbnb-front-end-interview-questions.md 的完整题库与候选人口述记录逐类拆解每道题的考察点与追问方向并对照本仓库的 React Hooks、前端系统设计等配套资料给出复习主线帮助你建立一份可落地、可自测的 Airbnb 备战清单。题库全景Airbnb 前端面试到底考什么翻开该文档即可发现Airbnb 前端面试与其他 FAANG 类公司相比更务实——官方题库按四类划分环节典型题目本质能力JavaScript 编码手写 Promise实现 Backbone Model 风格的StoreData键值对象异步基础 发布订阅Observer模式UI 编码Autocomplete、Star Rating、Tabs、Image Carousel、洗牌发牌交互细节、动画、可复用组件、可访问性系统设计聊天应用Chat Application设计 Airbnb 旅行预订平台前端架构、数据模型、API 设计、规模与性能算法LeetCode 风格题目CS 基础、数据结构与算法文档原话提醒Airbnb 确实设有评估计算机科学基础的轮次会抛出 LeetCode 风格问题务必做好准备。见原文 Algorithm 一节。因此答案很简单把 Airbnb 当作UI 组件实战 算法基础 前端系统设计三位一体的面试准备缺一不可。JavaScript 编码轮StoreDataBackbone Model 风格键值对象题目与变体文档记录的原始版本是电话面Phone Screen题实现一个StoreData类能添加键值对key/value并能监听某个 key 的值变化。这是一个 Backbone Model 风格的、带监听器的键值对象。文档特别强调近期变体又加了两道硬性要求增加一个全局change监听器只要任何 key 发生变化都触发unset后监听器不能丢软删除 soft-delete当该属性再次被set时unset 之前挂载的全局监听器与属性级监听器都要重新触发。2024 年 7 月 12 日的一位候选人也印证了这一模式原文 quote问的就是 Backbone.js事件名是change:foo、change:bar另有一个任何变更都触发的全局 change 监听最狠的是unset时要保留监听器软删除数据再次set该属性后unset 前的全局监听器和属性监听器都要重新触发。这与本仓库 website/contents/javascript-utility-function.md 中提到的Observer观察者模式高度一致——面试官实际考察的就是你能否用事件回调表实现一个最小可用的发布订阅容器。解题骨架供实战参考以下是满足全部变体要求的一种参考实现思路可直接作为练习基准class StoreData { constructor() { this.data {}; // 属性级监听器{ key: Setfn } this.listeners {}; // 全局监听器任意 key 变更都会触发 this.globalListeners new Set(); } set(key, value) { const changed this.data[key] ! value; this.data[key] value; if (changed) { this.emit(key, value); this.emitGlobal(key, value); } } get(key) { return this.data[key]; } on(key, callback) { // key 为 *change 之类时注册到全局监听器 (this.listeners[key] || new Set()).add(callback); } change(callback) { this.globalListeners.add(callback); } unset(key) { // 软删除只删除数据保留监听器 delete this.data[key]; this.emitGlobal(key, undefined); } emit(key, value) { this.listeners[key]?.forEach((fn) fn(value, this.data[key])); } emitGlobal(key, value) { this.globalListeners.forEach((fn) fn(key, value)); } }需要反复自检的三处关键点也是追问点软删除语义unset绝不能清空listeners[key]否则重新 set 后监听器不触发会直接判负全局监听器当以change:foo这类命名空间区分事件时foo变化既要触发change:foo也要触发全局change值未真正变化的 set一般约定相同值重复set不触发监听面试时主动说明你的取舍。复习支撑该题涉及的事件驱动、变更通知等概念可在仓库 packages/front-end-interview-guidebook/contents/javascript/en-US.mdx 的 JavaScript 问答板块中复习对 Promise/回调与异步模型的理解可参考 website/contents/javascript-questions.md 中关于 Promise 三态与Promise 相对回调的优势两问见该文件Promises and/or their polyfills与Pros and cons of using Promises instead of callbacks段落。UI 编码轮五个高复用组件逐个拆解UI 题是 Airbnb 技术面的主战场且同一个题会被多个候选人重复抽中从后面 insider tips 可以看到 Image Carousel 出现了至少三次。逐题给出备战要点1. Autocomplete输入即联想 键盘导航给定一个输入框和一个返回 JSON 数组的 endpoint实现 onChange 时的自动补全并支持在结果列表中用键盘导航。备战要点请求策略输入防抖debounce、取消过期请求记录 request id 或用AbortController避免快速输入时旧响应覆盖新响应键盘导航ArrowDown/ArrowUp移动高亮项、Enter选中、Escape收起列表、Tab正常退出同时保持光标在当前选中项并处理边界回绕结果面板区分首次 Enter 直接提交表单与在联想项上 Enter 选中两种语义可访问性为结果项设置合适的 ARIA 角色与高亮状态让屏幕阅读器能感知当前候选。2. Star Rating表单内嵌星评组件在表单中嵌入一个星评 widget选择星数并通过普通表单 action 提交正确值且要能让多个星评组件复用。这里考的是受控表单集成的工程纪律每个 widget 需要独立的表单字段名如rating-1、rating-2组件通过name/valueprops 复用而不是写死单个全局变量用隐藏 inputhidden input承载当前星级保证普通form action提交时 value 能被序列化带上hover 预览与点击锁定状态分离hover 只影响视觉、点击才写入选中的星星数键盘可用ArrowLeft/ArrowRight调整星级。3. Tabs 组件实现本身不难难点在交互细节面板切换时内容懒渲染或按需销毁避免大量面板同时挂载键盘与 ARIAroletablist/roletab/roletabpanel支持左右方向键切换、Home/End跳转首尾焦点与选中状态保持一致组件 API 设计支持受控由父组件传activeTab与非受控内部自管两种用法——这也呼应了仓库 website/contents/front-end-system-design.md 中对组件 API/props 设计的强调。4. Image Carousel变时长轮播 倒计时——Airbnb 最高频真题原文档记录构建一个图片轮播每张幻灯片停留时长不同播到最后一张自动停止。追问每张幻灯片上显示倒计时倒数到 0 自动切到下一张并在末尾停下。文档作者明确标注倒计时是难点——要在useEffect里用setInterval。2026 年 1 月 8 日的候选人反馈同样点名每张幻灯片时长不同、末张停止follow-up 是展示倒计时。最难点在于用useEffect内的setInterval把每张的倒计时写对。为什么难对比仓库 packages/react-interview-playbook/contents/react-hooks/en-US.mdx 中useEffect一节的四个陷阱清单这道题几乎全部踩中依赖数组漏写导致闭包过期stale closure在 effect 内更新 state 造成依赖管理不当与无限循环计时器未清理导致内存泄漏见该节memory leaks due to missing cleanup示例setInterval必须在 effect 返回的 cleanup 中clearInterval切到下一张时若不清掉旧 interval会出现多个倒计时同时跑的竞态。参考骨架function Carousel({ slides }) { const [index, setIndex] useState(0); useEffect(() { if (index slides.length - 1) return; // 最后一张停止 const duration slides[index].duration; const timer setInterval(() { setIndex((prev) Math.min(prev 1, slides.length - 1)); }, duration); return () clearInterval(timer); // 清理是关键 }, [index, slides]); return ( div img src{slides[index].src} alt{slides[index].alt} / div下一张倒计时…/div /div ); }建议同时阅读 packages/react-interview-playbook/contents/react-hooks/zh-CN.mdx 的中文对照版本把依赖数组 → 何时重跑 → cleanup的决策链路背熟。5. 洗牌与逐张发牌动画洗牌并发出一组 5 张牌。真正的难点是动画牌要一张一张地翻出。洗牌用Fisher–Yates原地洗牌保证均匀随机逐张发牌即每张牌延迟递增地进入已翻开状态配合 CSS transition/动画翻转、位移形成序列感常见错误直接用setTimeout修改 state 且不清理、或动画触发条件写在渲染内导致重渲染时动画重播。可复用上面useEffect定时器 cleanup 的思路来按索引递增解锁卡牌。系统设计轮从聊天应用到设计 Airbnb文档给出的系统设计题有两道Design a chat application设计聊天应用Design Airbnbtravel booking platform设计旅行预订平台。这类问题在仓库中被归入Applications应用级前端系统设计与 website/contents/front-end-system-design.md 中列举的 Chat application如 Messenger、Travel booking website如 Airbnb示例一一对应。该指南给出一个通用展开框架——RADIO FrameworkRequirements exploration通过澄清性问题界定范围必须哪些功能、要不要离线/多人/通知Architecture / High-level design识别核心组件及其关系Data model定义数据实体、字段与归属组件Identify and discuss issues识别关键难点长连接/消息时序、实时同步、虚拟列表、图片懒加载、搜索/筛选等Optimization讨论性能、可访问性、i18n、安全与可观测性改进。文档还强调系统设计轮的题目通常比构建 UI轮范围更大一小时面试内不要求完整写码重点是能讲清设计权衡、多种可行实现与前后端 API 形态。针对设计 Airbnb这一题尤其要准备房源/用户/预订等数据实体、地图与列表双视图、搜索过滤与分页、预订流程的状态机、图片加载优化以及移动端优先布局等。算法轮别忽视 CS 基础文档仅有一句但分量很重Airbnb 确实有算法轮会问 LeetCode 风格题目必须准备。仓库也提供了配套练习packages/front-end-interview-guidebook/contents/algorithms/en-US.mdx算法分册与 packages/front-end-interview-guidebook/contents/coding/en-US.mdx编码分册可用来覆盖基础数据结构与高频套路。Insider Tips真实候选人口述的高频信号文档收录的 GreatFrontEnd 社区候选人复盘是最有价值的隐性考点2026-01-08Payments 团队screen 轮题目即变时长 Image Carousel 末张停止 倒计时环境是 React 工程面试官真正在看边想边写边说出来沉默思考很吃亏、先口头沟通方案方向错了会得到提示、每个动作都能解释原因、尽量把 follow-up 也写完。2025-10-23又被问 Image Carousel面试官不断加需求直到时间耗尽——说明面试官重视你能否在演进需求下持续重构务必把useEffect的清理与依赖管理练熟。2025-03-21反馈称前端技术面偏向实用而非算法结果 screen 里还是出现了 LC 难题。结论两类都要准备不要赌只考其中一种。2024-07-12考 Backbone Model事件名change:foo/change:bar要求全局 change 监听 unset保留监听器的软删除语义——与 JS 编码轮描述完全一致说明该题是长线高频题。2024-04-19 / 2024-04-16FE 架构轮题目是设计一个聊天应用面试官全程未反驳但结果不通过——提醒你系统设计轮主动表达权衡取舍比等面试官认可更重要另一名候选人表示 Airbnbtag 题几乎全覆盖却漏了 Backbone Model结果恰恰考了它。高频题不要跳题。备战路线图小结综合原文档题库与候选人反馈Airbnb 前端备战可以收敛为四条主线JS 编码练透StoreData/Backbone Model属性监听、全局 change、unset 软删除顺带复习手写 Promise 与 Observer 模式对照 website/contents/javascript-questions.mdUI 组件Autocomplete、Star Rating、Tabs、Image Carousel、洗牌发牌五个组件反复实现重点吃透定时器放useEffect并正确清理这一核心坑点对照 packages/react-interview-playbook/contents/react-hooks/en-US.mdx系统设计以 RADIO 框架website/contents/front-end-system-design.md练习聊天应用与旅行预订平台两类应用级设计算法与表达坚持刷 LeetCode 风格题目同时在练习中有意识地出声思考、先讲方案、步步解释因为从候选人反馈看这三点与代码正确性同等重要。本文所属企业题库目录 website/contents/companies/ 下还有 Google、Meta、Amazon 等公司的对应真题页可作为横向对照了解不同公司的出题风格差异。【免费下载链接】front-end-interview-handbookFront End interview preparation materials for busy engineers (updated for 2026)项目地址: https://gitcode.com/GitHub_Trending/fr/front-end-interview-handbook创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考