Meta（Facebook）的前端系统设计题：设计一个 Facebook 帖子流

最新推荐文章于 2025-11-28 09:44:01 发布

原创最新推荐文章于 2025-11-28 09:44:01 发布 · 706 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#facebook #前端

虽然 FAANG 这些大厂的面试很难，但是它们给出来的薪资还是相当香的。并且国外很多互联网大厂都是带股票的，通常情况下职级越高，股票在薪资中占的比重就会越大。

最近有在美国读书的同学来问我 Meta（Facebook 的母公司）的前端面试情况，特别是传说中的 系统设计题（System Design）到底应该怎么回答。

国外大厂（FAANG：Facebook、Apple、Amazon、Netflix、Google）和国内大厂在前端面试上，有着非常明显的差别。

国内的面试更多聚焦在代码能力与项目细节上，比如：框架原理、性能优化、跨端、工程化、埋点、打包优化这些。

但是，在欧美那边，以 FAANG 这些公司为首的大厂，面试时会更加看重你能否从产品功能的角度，去设计一整套完整的系统架构。也就是传说中的 系统设计题（System Design）。

System Design 不是让你写具体代码，而是要你设计一个完整可运行的前端系统。

比如，面试官通常会这样出题：“请你设计一个新闻流 / 帖子流 / 聊天系统 / 实时协作文档......”

听起来有点像国内的代码题，但是实际上却完全不同。

这类问题需要你从：

数据结构怎么设计？
怎么分页、缓存、实时更新？
性能、可扩展性、错误恢复怎么保证？

等多个系统设计角度来回答才可以。而不是单纯的写个 demo 就完事的。所以 System Design 一直是很多同学面试国外大厂的 “挂点...”。

不过，虽然 FAANG 这些大厂的面试很难，但是它们给出来的薪资还是相当香的。并且国外很多互联网大厂都是带股票的，通常情况下 职级越高，股票在薪资中占的比重就会越大。

就以 Meta 为例。

在 Meta，前端岗位属于软件工程师体系（Software Engineer），采用的是 E 序列职级，从 E3 → E9 依次递进。

下面是根据 Levels.fyi（美国地区）与训练营海外同学整理的数据：

等级	岗位说明	年薪总包	折合人民币（约）	基本工资	股票/年	奖金
E3	入门级（Junior Engineer）	17.9 万美元	约 130 万人民币	13.3 万美元	3.1 万美元	1.5 万美元
E4	中级工程师（Engineer II）	32.7 万美元	约 240 万人民币	18.2 万美元	11.3 万美元	3.2 万美元
E5	高级工程师（Senior Engineer）	50.3 万美元	约 367 万人民币	22 万美元	25.9 万美元	2.4 万美元
E6	资深工程师（Staff Engineer）	85.6 万美元	约 625 万人民币	26.1 万美元	54.8 万美元	4.7 万美元
E7	高级资深工程师（Senior Staff）	163 万美元	约 1190 万人民币	30.7 万美元	125 万美元	7.2 万美元
E8	首席工程师（Principal Engineer）	308 万美元	约 2240 万人民币	36.9 万美元	263 万美元	8.9 万美元
E9	顶级专家（Distinguished Engineer）	366 万美元	约 2670 万人民币	37.6 万美元	316 万美元	12.1 万美元

根据薪资水平咱们可以看到，哪怕是 E3 → E5（同比阿里 P5~P7 职级） 年包薪资也在 130 万 ~ 370 万人民币之间了。这个薪资放到国内，妥妥的顶级大佬水平了...

所以，面试难点，咱们也就忍了 😂😂

那接下来，我们就来看一看这道在 Meta 几乎每年都必考的题目：请你设计一个 Facebook 的帖子流（News Feed）。

请你设计一个 Facebook 的帖子流（News Feed）

这是一个特别典型的 系统设计题（System Design），真正要答好它，你至少得考虑到以下这些方面：

数据层设计

帖子（Post）结构如何定义？
评论、点赞要不要单独拆表？
如何支持分页、增量更新？

前端渲染性能

当页面有上千条帖子时，怎么避免卡顿？
是否需要虚拟滚动（Virtual List）？
图片、视频如何懒加载？

实时性与交互

新帖来了怎么实时刷新？
点赞、评论如何做到局部更新而不重渲染整个页面？
WebSocket / SSE 怎么选择？

状态管理与扩展性

状态放全局（Store）还是局部（组件）？
如何支持“多端一致”（Web + App）？

用户体验与容错

网络慢怎么办？
出错时如何降级？
有没有骨架屏、预加载机制？

是不是看着有点复杂了，方方面面都得考虑到。

那下面咱们就一起拆解下这个问题哈：

一、数据层设计：Feed 数据结构与分页机制

先从最底层的数据说起。

每条帖子（Post）包含：作者、内容、媒体、点赞、评论、时间戳等信息：

{
  id: 'post_123',
  author: { id: 'u1', name: 'Sunday', avatar: 'a.jpg' },
  content: '今天写了一篇公众号 😄',
  media: ['img1.jpg', 'img2.jpg'],
  likes: 230,
  comments: 58,
  createdAt: 1730098800000
}

分页机制：

采用 Cursor-based Pagination（基于游标的分页），而非传统的 page=1,2,3。
这样能避免用户在动态内容频繁变化时，翻页数据重复或错乱。
例如后端返回：

{
  data: [...posts],
  nextCursor: "1730098800000"
}

评论与点赞延迟加载（Lazy Load）：首屏只加载主要内容，评论区按需请求，提升初始渲染速度。

二、渲染层设计：虚拟滚动 + 懒加载

新闻流页面的最大问题是 内容太多。如果直接一次性渲染上百条帖子，DOM 数量会非常庞大，性能必崩。

解决方案：虚拟列表（Virtual List）

核心逻辑是：

只渲染可视区域的帖子；
滚动时动态替换上、下区域的内容。

const observer = new IntersectionObserver(loadMore)
observer.observe(document.querySelector('#bottom'))

再加上：

图片懒加载 <img loading="lazy">
视频延迟播放（进入视口才加载）
Skeleton（骨架屏）让用户视觉上更流畅

三、通信层设计：实时更新（WebSocket / SSE）

Facebook 的帖子流是实时的。有人点赞、评论、发新帖，用户的页面就要自动更新。

在前端层面，有两种常见做法：

模式	说明	适用场景
WebSocket	双向通信，前后端都能推消息	聊天系统、互动频繁的应用
SSE（Server-Sent Events）	服务端单向推送，轻量且稳定	动态刷新、通知推送等

示例：

const ws = new WebSocket('wss://meta.com/feed')
ws.onmessage = (event) => {
  const newPost = JSON.parse(event.data)
  feedStore.add(newPost)
}

建议答题时提到：“我会用 SSE 或 WebSocket 实现增量推送，同时配合时间戳去重机制，确保状态一致。”

四、状态层设计：全局 Store + 局部更新

系统设计题中，状态管理是高频考点。

如果你直接用 setState(posts) 更新整个列表，那每次点赞、评论都会导致整个页面重渲染，这在 Meta 面试中是大忌。

正确做法是：

const feedStore = createStore({
  posts: [],
  updatePost(id, patch) {
    this.posts = this.posts.map(p => p.id === id ? { ...p, ...patch } : p)
  }
})

同时利用：