Discord 前端面试准备指南聊天应用 Google Sheets 克隆的完整拆解Front End Interview Handbook【免费下载链接】front-end-interview-handbookFront End interview preparation materials for busy engineers (updated for 2026)项目地址: https://gitcode.com/GitHub_Trending/fr/front-end-interview-handbookDiscord 的前端技术面与 onsite 编码轮与其他公司相比相当特别你通常需要在自己的 IDE 里从零搭建一个完整项目而不是在共享在线编辑器里作答。本文以仓库文档 website/contents/companies/discord-front-end-interview-questions.md 为核心骨架结合本仓库中系统设计、React 状态设计等配套资料为你梳理两大最高频考题Discord 风格聊天 Web 应用与 Google Sheets 风格电子表格的考察要点、实现思路与备面策略读完即可照此制定可执行的练习计划。一、Discord 面试轮次的核心特点自带 IDE现场搭项目从文档描述看Discord 的技术面试tech screen和 onsite 编码轮与常见的共享网页编辑器做题模式差异明显不提供共享编辑器面试官会告诉你用自己 IDE 里的任意 UI 框架搭建一个简单的前端项目Discord 不会帮你搭建脚手架。AI 使用政策不统一有候选人反馈自己的轮次明确不允许使用 AI也有候选人反馈其他轮次允许——需要提前向招聘方确认。环境准备要快从零搭建项目、快速跑通 dev server 的能力本身就是考察点你要能快速搭好开发环境。两道最高频题目高度集中tech screen 常考聊天 Web 应用onsite 编码轮常考Google Sheets 风格的电子表格。文档中的社区反馈2026 年 5 月提到我和两个拿到 Discord offer 的人聊过两人都在 tech screen 被要求做聊天应用、在 onsite 编码轮被要求做 Google Sheets。聊天应用的全栈版本是 React Node.js WebSockets但 Discord 也有纯前端变体——务必先确认你面对的是哪一种。这两道题分别对应本仓库面试格式划分中的User interface codingUI 编码与System design系统设计两类在 website/contents/introduction.md 的格式总览与公司格式对照表中有背景介绍下面逐一展开。二、UI 编码考题一搭建 Discord 风格聊天 Web 应用2.1 版本差异全栈版 vs 纯前端版文档明确指出Discord 聊天应用存在两个版本版本技术栈考察重点全栈版full-stackReact Node.js WebSockets实时消息推送、前后端通信协议纯前端版front-end-only前端技术栈无需后端 sockets消息 UI、输入交互、状态管理开考第一件事是澄清你面对的是哪个版本——这直接决定你是否需要写服务端代码。如果拿到的是纯前端变体你仍需要为实时感准备合适的架构方案见下文 WebSocket 讨论只是不必真的实现后端。2.2 聊天应用的功能清单与实现要点Discord 风格聊天应用通常需要覆盖频道/会话列表、消息流、消息输入框、消息发送后回显、历史消息加载。建议按以下顺序实现消息输入与发送管理受控输入框发送后清空输入并把新消息插入状态列表消息列表渲染新消息自动滚动到底部渲染时注意区分自己/他人的消息样式消息来源状态机至少要区分sending / sent / error等发送状态为失败重发预留空间全栈版WebSocket 接入建立连接、监听onmessage、断线重连。关于 WebSocket 需要注意的工程细节连接生命周期页面卸载时关闭连接重连时做指数退避exponential backoff避免雪崩式重连消息顺序网络乱序可能导致消息错位消息结构要带服务端时间戳或递增序号供排序UI 层的乐观更新消息先本地回显收到服务端确认后再校正状态。对于本仓库的 Front End System Design 资料 中所列的优化纵深performance、UX、accessibility 等聊天应用里最值得展示的是乐观 UI、滚动性能虚拟化长列表与实时通信协议选型。三、UI 编码考题二React 组件版 Excel 单元格Discord 面试循环中还出现过设计一个像 Excel 单元格一样的 React 组件这类题目它是大型电子表格题的降级版更适合作为热身。考察点是受控 vs 非受控单元格编辑态的进入与退出如双击进入编辑、回车/失焦确认显示态与编辑态分离单元格在非编辑时展示格式化后的值编辑时展示原始公式字符串对外 APIprops设计单元格应该接收value / onChange / 校验规则之类的参数而不是自己持有全局数据。如果你需要系统设计视角的组件拆分方法可参考 website/contents/front-end-system-design.md 中确定子组件、定义组件对外 API、描述内部状态与子组件间接口的思路。四、UI 编码考题三实现 Google Sheets 风格电子表格重点中的重点4.1 题目结构官方明确的两部分文档把电子表格题拆成两部分且反复强调Part 2 的公式解析逻辑是最难的部分必须专门练习Part 1实现电子表格 UI。渲染一个网格用户能往任意单元格输入内容。Part 2让单元格支持引用其他单元格的公式类似 Google Sheets。公式解析formula-resolution逻辑是全题难点也是决定你能否拿到 offer 的关键。4.2 Part 1网格 UI 的数据建模网格 UI 建议采用单一数据源 单元格 id的状态设计用Map或对象字典存储cellId - 原始内容不要为每个格子单独声明useState坐标转 id(row, col) - A1、B2风格方便公式引用只渲染可视区域附近的单元格虚拟化否则大网格会卡死浏览器键盘导航方向键移动、Enter 下移、Tab 右移、双击或键入进入编辑态能显著提升面试观感。仓库中的 packages/react-interview-playbook/contents/react-state-design/en-US.mdx 对这类场景提供了可直接借鉴的原则状态尽量贴近使用它的组件、相关状态分组存放、避免冗余状态。网格场景的冗余状态典型反例是同时维护单元格原始字符串与单元格计算结果两份数据而不做同步。4.3 Part 2公式解析与依赖图求值公式解析是本仓库文档明确点名的最难环节建议用解析 - 构建依赖图 - 拓扑求值 - 增量重算的思路拆解。第一步公式解析。定义识别公式的约定如以开头。将表达式拆成 token数字、单元格引用A1、运算符 - * /、括号、函数SUM等再用递归下降或**调度场算法shunting-yard**转为抽象语法树AST。第二步建立单元格依赖关系。扫描每个单元格的 AST提取它引用的所有单元格形成有向图A1 引用了 B1则边 B1 - A1。这一步把改一个格子问题转化为哪些格子受影响问题。第三步按依赖顺序求值。对依赖图做拓扑排序可借助 DFS 后序或 Kahn 算法保证被引用单元格先于引用它的单元格计算。核心伪代码如下// 递归求值 备忘录示意面试时可从朴素版逐步优化 function evaluate(cellId, memo new Map()) { if (memo.has(cellId)) return memo.get(cellId); const ast parse(rawContents.get(cellId)); const value evalNode(ast, (ref) evaluate(ref, memo)); // 先求被引用格 memo.set(cellId, value); return value; }第四步处理循环引用与脏标记。这一层决定了你的实现是能跑还是专业循环引用检测拓扑排序结束后若仍存在未处理的节点说明存在A1 - B1 - A1式的环应提示错误而不是死循环增量重算只重算受影响的后继单元格而不是每次击键全表重算缓存与失效某单元格值变化时只把依赖它的格子标记为脏dirty数据与展示分离A1的展示值计算结果与原始文本可能含公式分开存储。这一步是formula-resolution logic is the hardest part — practice it文档原话的落点务必在面试前用一道具体的可引用公式题如A1B1、SUM(A1:A3)乃至带函数/范围的版本练到手熟。五、系统设计考题聊天应用与协同电子表格除了 UI 编码Discord 的系统设计轮同样围绕这两个产品展开设计一个聊天应用Discord / Messenger 风格设计 Google Sheets协同电子表格。两者在前端系统设计题型中都归属于Applications应用级类别。仓库 packages/system-design/contents/types-of-questions/en-US.mdx 的应用类型表给出了非常关键的导向应用重要功能应重点展开的主题消息/聊天Messenger、Slack、Discord实时消息实时通信协议协同应用Google Docs/Sheets/Slides、Notion实时协作实时协作协议、冲突解决、状态同步这份表格告诉我们不要对这两道题套用电商/内容站式的 SEO 优先清单同一文件的 TIP 也强调了让产品品类决定纵深主题。聊天应用的核心纵深是实时通信协议WebSocket vs 短轮询 vs SSE 的取舍与理由协同表格的核心纵深则是状态同步与冲突解决如操作变换 OT、CRDT 等思路层面的讨论。5.1 用 RADIO 框架组织两道题的表述仓库的 website/contents/front-end-system-design.md 以及 website/contents/front-end-system-design-applications.md 都推荐用RADIO 框架在系统设计面试中向面试官给出讨论大纲Requirements exploration需求澄清支持哪些端、浏览器范围、是否需要国际化、是否需要离线Architecture / 高层设计客户端架构MVC/MVVM/单向数据流与关键组件关系Data model数据模型聊天消息/会话/用户、表格的单元格/工作表/工作簿各自的字段与归属Interface definitionAPI前端与后端的 HTTP/网络 API 参数与响应结构Optimizations and deep dive优化纵深根据产品类型选 12 条主线展开。例如设计协同电子表格时数据模型要定义cell { id, sheetId, raw, value }与sheet/user/cursor实体API 层要讨论批量同步、操作粒度把整格覆盖拆成细粒度操作、服务端确认与冲突回滚优化层则聚焦实时协作协议与状态同步。文档还特别指出前端系统设计面试通常不需要设计数据库 schema、讨论 SQL vs NoSQL 或服务器水平扩展见 website/contents/front-end-system-design.md 的 Things you would not have to do 小节时间应花在客户端架构与前后端接口设计上。六、来自真实面试的 Insider Tips 汇总文档收录了 GreatFrontEnd 社区用户分享的 Discord 面试一手经验以下为文档原文信息转述Tip 1——两道题几乎固定拿到 Discord offer 的人tech screen 几乎都是聊天应用、onsite 编码轮几乎都是 Google Sheets。聊天应用全栈版是 React Node.js WebSockets但也存在纯前端变体开考前务必澄清版本。电子表格题中的公式逻辑是最值得下功夫的部分。Tip 2——自备脚手架能力tech screen 时面试官要求用任意 UI 框架在自己 IDE 里搭建一个简单前端项目没有共享编辑器、对方不提供脚手架部分轮次不允许使用 AI也有候选人反馈被允许。要练就快速搭建 dev 环境、快速启动项目的能力。Tip 3——题目贴近真实产品Discord 的 tech screen 常见题本质就是像 Discord 一样构建聊天服务/应用前端候选人会遇到无需后端 socket 的 UI 变体另外设计一个像 Excel 单元格的 React 组件也出现在其面试循环中。七、结合仓库的备面行动清单把上面的信息落成一份可执行的备面清单配合本仓库的配套资源逐项击破确认题目形态开考前用邮件或与 recruiter 沟通确认是 chat app 全栈版还是纯前端版以及是否允许 AI 辅助Tip 2。练习从零搭项目熟悉用自己惯用脚手架如 Vite初始化 React 项目并启动 dev server做到 510 分钟内就绪。练熟聊天应用先做纯前端版消息列表 输入 发送状态机再补 WebSocket 全栈版深度读一遍 packages/react-interview-playbook/contents/react-state-design/en-US.mdx 的状态设计原则避免状态冗余。专攻公式解析把 Part 1 网格 UI 尽快做完把时间预算大头留给 Part 2 的解析 - 依赖图 - 拓扑求值 - 环检测并留出增量重算的优化话术。补系统设计表述用 RADIO 框架分别对 chat application 与 collaborative spreadsheet 打一遍草稿纵深落在实时通信协议与状态同步/冲突解决上参照 packages/system-design/contents/types-of-questions/en-US.mdx 的应用类型表。阅读公司格式对照website/contents/introduction.md 中汇总了各公司常考格式与整体备考建议website/blog/2019-11-03-are-front-end-development-enough-for-a-career.md 等博客也从行业视角解释了为何前端面试重视这类贴近真实产品的实操题。如果时间有限优先级请遵循文档反复强调的那句话聊天应用确认版本后照常准备而电子表格的公式解析逻辑是整场面试最值得押注的拿分点。【免费下载链接】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），仅供参考 Discord 前端面试准备指南：聊天应用 + Google Sheets 克隆的完整拆解（Front End Interview Handbook）
Discord 前端面试准备指南聊天应用 Google Sheets 克隆的完整拆解Front End Interview Handbook【免费下载链接】front-end-interview-handbookFront End interview preparation materials for busy engineers (updated for 2026)项目地址: https://gitcode.com/GitHub_Trending/fr/front-end-interview-handbookDiscord 的前端技术面与 onsite 编码轮与其他公司相比相当特别你通常需要在自己的 IDE 里从零搭建一个完整项目而不是在共享在线编辑器里作答。本文以仓库文档 website/contents/companies/discord-front-end-interview-questions.md 为核心骨架结合本仓库中系统设计、React 状态设计等配套资料为你梳理两大最高频考题Discord 风格聊天 Web 应用与 Google Sheets 风格电子表格的考察要点、实现思路与备面策略读完即可照此制定可执行的练习计划。一、Discord 面试轮次的核心特点自带 IDE现场搭项目从文档描述看Discord 的技术面试tech screen和 onsite 编码轮与常见的共享网页编辑器做题模式差异明显不提供共享编辑器面试官会告诉你用自己 IDE 里的任意 UI 框架搭建一个简单的前端项目Discord 不会帮你搭建脚手架。AI 使用政策不统一有候选人反馈自己的轮次明确不允许使用 AI也有候选人反馈其他轮次允许——需要提前向招聘方确认。环境准备要快从零搭建项目、快速跑通 dev server 的能力本身就是考察点你要能快速搭好开发环境。两道最高频题目高度集中tech screen 常考聊天 Web 应用onsite 编码轮常考Google Sheets 风格的电子表格。文档中的社区反馈2026 年 5 月提到我和两个拿到 Discord offer 的人聊过两人都在 tech screen 被要求做聊天应用、在 onsite 编码轮被要求做 Google Sheets。聊天应用的全栈版本是 React Node.js WebSockets但 Discord 也有纯前端变体——务必先确认你面对的是哪一种。这两道题分别对应本仓库面试格式划分中的User interface codingUI 编码与System design系统设计两类在 website/contents/introduction.md 的格式总览与公司格式对照表中有背景介绍下面逐一展开。二、UI 编码考题一搭建 Discord 风格聊天 Web 应用2.1 版本差异全栈版 vs 纯前端版文档明确指出Discord 聊天应用存在两个版本版本技术栈考察重点全栈版full-stackReact Node.js WebSockets实时消息推送、前后端通信协议纯前端版front-end-only前端技术栈无需后端 sockets消息 UI、输入交互、状态管理开考第一件事是澄清你面对的是哪个版本——这直接决定你是否需要写服务端代码。如果拿到的是纯前端变体你仍需要为实时感准备合适的架构方案见下文 WebSocket 讨论只是不必真的实现后端。2.2 聊天应用的功能清单与实现要点Discord 风格聊天应用通常需要覆盖频道/会话列表、消息流、消息输入框、消息发送后回显、历史消息加载。建议按以下顺序实现消息输入与发送管理受控输入框发送后清空输入并把新消息插入状态列表消息列表渲染新消息自动滚动到底部渲染时注意区分自己/他人的消息样式消息来源状态机至少要区分sending / sent / error等发送状态为失败重发预留空间全栈版WebSocket 接入建立连接、监听onmessage、断线重连。关于 WebSocket 需要注意的工程细节连接生命周期页面卸载时关闭连接重连时做指数退避exponential backoff避免雪崩式重连消息顺序网络乱序可能导致消息错位消息结构要带服务端时间戳或递增序号供排序UI 层的乐观更新消息先本地回显收到服务端确认后再校正状态。对于本仓库的 Front End System Design 资料 中所列的优化纵深performance、UX、accessibility 等聊天应用里最值得展示的是乐观 UI、滚动性能虚拟化长列表与实时通信协议选型。三、UI 编码考题二React 组件版 Excel 单元格Discord 面试循环中还出现过设计一个像 Excel 单元格一样的 React 组件这类题目它是大型电子表格题的降级版更适合作为热身。考察点是受控 vs 非受控单元格编辑态的进入与退出如双击进入编辑、回车/失焦确认显示态与编辑态分离单元格在非编辑时展示格式化后的值编辑时展示原始公式字符串对外 APIprops设计单元格应该接收value / onChange / 校验规则之类的参数而不是自己持有全局数据。如果你需要系统设计视角的组件拆分方法可参考 website/contents/front-end-system-design.md 中确定子组件、定义组件对外 API、描述内部状态与子组件间接口的思路。四、UI 编码考题三实现 Google Sheets 风格电子表格重点中的重点4.1 题目结构官方明确的两部分文档把电子表格题拆成两部分且反复强调Part 2 的公式解析逻辑是最难的部分必须专门练习Part 1实现电子表格 UI。渲染一个网格用户能往任意单元格输入内容。Part 2让单元格支持引用其他单元格的公式类似 Google Sheets。公式解析formula-resolution逻辑是全题难点也是决定你能否拿到 offer 的关键。4.2 Part 1网格 UI 的数据建模网格 UI 建议采用单一数据源 单元格 id的状态设计用Map或对象字典存储cellId - 原始内容不要为每个格子单独声明useState坐标转 id(row, col) - A1、B2风格方便公式引用只渲染可视区域附近的单元格虚拟化否则大网格会卡死浏览器键盘导航方向键移动、Enter 下移、Tab 右移、双击或键入进入编辑态能显著提升面试观感。仓库中的 packages/react-interview-playbook/contents/react-state-design/en-US.mdx 对这类场景提供了可直接借鉴的原则状态尽量贴近使用它的组件、相关状态分组存放、避免冗余状态。网格场景的冗余状态典型反例是同时维护单元格原始字符串与单元格计算结果两份数据而不做同步。4.3 Part 2公式解析与依赖图求值公式解析是本仓库文档明确点名的最难环节建议用解析 - 构建依赖图 - 拓扑求值 - 增量重算的思路拆解。第一步公式解析。定义识别公式的约定如以开头。将表达式拆成 token数字、单元格引用A1、运算符 - * /、括号、函数SUM等再用递归下降或**调度场算法shunting-yard**转为抽象语法树AST。第二步建立单元格依赖关系。扫描每个单元格的 AST提取它引用的所有单元格形成有向图A1 引用了 B1则边 B1 - A1。这一步把改一个格子问题转化为哪些格子受影响问题。第三步按依赖顺序求值。对依赖图做拓扑排序可借助 DFS 后序或 Kahn 算法保证被引用单元格先于引用它的单元格计算。核心伪代码如下// 递归求值 备忘录示意面试时可从朴素版逐步优化 function evaluate(cellId, memo new Map()) { if (memo.has(cellId)) return memo.get(cellId); const ast parse(rawContents.get(cellId)); const value evalNode(ast, (ref) evaluate(ref, memo)); // 先求被引用格 memo.set(cellId, value); return value; }第四步处理循环引用与脏标记。这一层决定了你的实现是能跑还是专业循环引用检测拓扑排序结束后若仍存在未处理的节点说明存在A1 - B1 - A1式的环应提示错误而不是死循环增量重算只重算受影响的后继单元格而不是每次击键全表重算缓存与失效某单元格值变化时只把依赖它的格子标记为脏dirty数据与展示分离A1的展示值计算结果与原始文本可能含公式分开存储。这一步是formula-resolution logic is the hardest part — practice it文档原话的落点务必在面试前用一道具体的可引用公式题如A1B1、SUM(A1:A3)乃至带函数/范围的版本练到手熟。五、系统设计考题聊天应用与协同电子表格除了 UI 编码Discord 的系统设计轮同样围绕这两个产品展开设计一个聊天应用Discord / Messenger 风格设计 Google Sheets协同电子表格。两者在前端系统设计题型中都归属于Applications应用级类别。仓库 packages/system-design/contents/types-of-questions/en-US.mdx 的应用类型表给出了非常关键的导向应用重要功能应重点展开的主题消息/聊天Messenger、Slack、Discord实时消息实时通信协议协同应用Google Docs/Sheets/Slides、Notion实时协作实时协作协议、冲突解决、状态同步这份表格告诉我们不要对这两道题套用电商/内容站式的 SEO 优先清单同一文件的 TIP 也强调了让产品品类决定纵深主题。聊天应用的核心纵深是实时通信协议WebSocket vs 短轮询 vs SSE 的取舍与理由协同表格的核心纵深则是状态同步与冲突解决如操作变换 OT、CRDT 等思路层面的讨论。5.1 用 RADIO 框架组织两道题的表述仓库的 website/contents/front-end-system-design.md 以及 website/contents/front-end-system-design-applications.md 都推荐用RADIO 框架在系统设计面试中向面试官给出讨论大纲Requirements exploration需求澄清支持哪些端、浏览器范围、是否需要国际化、是否需要离线Architecture / 高层设计客户端架构MVC/MVVM/单向数据流与关键组件关系Data model数据模型聊天消息/会话/用户、表格的单元格/工作表/工作簿各自的字段与归属Interface definitionAPI前端与后端的 HTTP/网络 API 参数与响应结构Optimizations and deep dive优化纵深根据产品类型选 12 条主线展开。例如设计协同电子表格时数据模型要定义cell { id, sheetId, raw, value }与sheet/user/cursor实体API 层要讨论批量同步、操作粒度把整格覆盖拆成细粒度操作、服务端确认与冲突回滚优化层则聚焦实时协作协议与状态同步。文档还特别指出前端系统设计面试通常不需要设计数据库 schema、讨论 SQL vs NoSQL 或服务器水平扩展见 website/contents/front-end-system-design.md 的 Things you would not have to do 小节时间应花在客户端架构与前后端接口设计上。六、来自真实面试的 Insider Tips 汇总文档收录了 GreatFrontEnd 社区用户分享的 Discord 面试一手经验以下为文档原文信息转述Tip 1——两道题几乎固定拿到 Discord offer 的人tech screen 几乎都是聊天应用、onsite 编码轮几乎都是 Google Sheets。聊天应用全栈版是 React Node.js WebSockets但也存在纯前端变体开考前务必澄清版本。电子表格题中的公式逻辑是最值得下功夫的部分。Tip 2——自备脚手架能力tech screen 时面试官要求用任意 UI 框架在自己 IDE 里搭建一个简单前端项目没有共享编辑器、对方不提供脚手架部分轮次不允许使用 AI也有候选人反馈被允许。要练就快速搭建 dev 环境、快速启动项目的能力。Tip 3——题目贴近真实产品Discord 的 tech screen 常见题本质就是像 Discord 一样构建聊天服务/应用前端候选人会遇到无需后端 socket 的 UI 变体另外设计一个像 Excel 单元格的 React 组件也出现在其面试循环中。七、结合仓库的备面行动清单把上面的信息落成一份可执行的备面清单配合本仓库的配套资源逐项击破确认题目形态开考前用邮件或与 recruiter 沟通确认是 chat app 全栈版还是纯前端版以及是否允许 AI 辅助Tip 2。练习从零搭项目熟悉用自己惯用脚手架如 Vite初始化 React 项目并启动 dev server做到 510 分钟内就绪。练熟聊天应用先做纯前端版消息列表 输入 发送状态机再补 WebSocket 全栈版深度读一遍 packages/react-interview-playbook/contents/react-state-design/en-US.mdx 的状态设计原则避免状态冗余。专攻公式解析把 Part 1 网格 UI 尽快做完把时间预算大头留给 Part 2 的解析 - 依赖图 - 拓扑求值 - 环检测并留出增量重算的优化话术。补系统设计表述用 RADIO 框架分别对 chat application 与 collaborative spreadsheet 打一遍草稿纵深落在实时通信协议与状态同步/冲突解决上参照 packages/system-design/contents/types-of-questions/en-US.mdx 的应用类型表。阅读公司格式对照website/contents/introduction.md 中汇总了各公司常考格式与整体备考建议website/blog/2019-11-03-are-front-end-development-enough-for-a-career.md 等博客也从行业视角解释了为何前端面试重视这类贴近真实产品的实操题。如果时间有限优先级请遵循文档反复强调的那句话聊天应用确认版本后照常准备而电子表格的公式解析逻辑是整场面试最值得押注的拿分点。【免费下载链接】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），仅供参考