Meta（Facebook）的前端系統(tǒng)設(shè)計(jì)題：設(shè)計(jì)一個(gè) Facebook 帖子流

作者：程序員Sunday 2025-10-29 03:22:00

雖然 FAANG 這些大廠的面試很難，但是它們給出來的薪資還是相當(dāng)香的。并且國外很多互聯(lián)網(wǎng)大廠都是帶股票的，通常情況下職級越高，股票在薪資中占的比重就會(huì)越大。

最近有在美國讀書的同學(xué)來問我 Meta（Facebook 的母公司）的前端面試情況，特別是傳說中的 系統(tǒng)設(shè)計(jì)題（System Design）到底應(yīng)該怎么回答。

國外大廠（FAANG：Facebook、Apple、Amazon、Netflix、Google）和國內(nèi)大廠在前端面試上，有著非常明顯的差別。

國內(nèi)的面試更多聚焦在代碼能力與項(xiàng)目細(xì)節(jié)上，比如：框架原理、性能優(yōu)化、跨端、工程化、埋點(diǎn)、打包優(yōu)化這些。

但是，在歐美那邊，以 FAANG 這些公司為首的大廠，面試時(shí)會(huì)更加看重你能否從產(chǎn)品功能的角度，去設(shè)計(jì)一整套完整的系統(tǒng)架構(gòu)。也就是傳說中的 系統(tǒng)設(shè)計(jì)題（System Design）。

System Design 不是讓你寫具體代碼，而是要你設(shè)計(jì)一個(gè)完整可運(yùn)行的前端系統(tǒng)。

比如，面試官通常會(huì)這樣出題：“請你設(shè)計(jì)一個(gè)新聞流 / 帖子流 / 聊天系統(tǒng) / 實(shí)時(shí)協(xié)作文檔......”

聽起來有點(diǎn)像國內(nèi)的代碼題，但是實(shí)際上卻完全不同。

這類問題需要你從：

數(shù)據(jù)結(jié)構(gòu)怎么設(shè)計(jì)？
怎么分頁、緩存、實(shí)時(shí)更新？
性能、可擴(kuò)展性、錯(cuò)誤恢復(fù)怎么保證？

等多個(gè)系統(tǒng)設(shè)計(jì)角度來回答才可以。而不是單純的寫個(gè) demo 就完事的。所以 System Design 一直是很多同學(xué)面試國外大廠的 “掛點(diǎn)...”。

不過，雖然 FAANG 這些大廠的面試很難，但是它們給出來的薪資還是相當(dāng)香的。并且國外很多互聯(lián)網(wǎng)大廠都是帶股票的，通常情況下 職級越高，股票在薪資中占的比重就會(huì)越大。

就以 Meta 為例。

在 Meta，前端崗位屬于軟件工程師體系（Software Engineer），采用的是 E 序列職級，從 E3 → E9 依次遞進(jìn)。

下面是根據(jù) Levels.fyi（美國地區(qū)）與訓(xùn)練營海外同學(xué)整理的數(shù)據(jù)：

等級	崗位說明	年薪總包	折合人民幣（約）	基本工資	股票/年	獎(jiǎng)金
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 萬美元

根據(jù)薪資水平咱們可以看到，哪怕是 E3 → E5（同比阿里 P5~P7 職級） 年包薪資也在 130 萬 ~ 370 萬人民幣之間了。這個(gè)薪資放到國內(nèi)，妥妥的頂級大佬水平了...

所以，面試難點(diǎn)，咱們也就忍了 ????

那接下來，我們就來看一看這道在 Meta 幾乎每年都必考的題目：請你設(shè)計(jì)一個(gè) Facebook 的帖子流（News Feed）。

請你設(shè)計(jì)一個(gè) Facebook 的帖子流（News Feed）

這是一個(gè)特別典型的 系統(tǒng)設(shè)計(jì)題（System Design），真正要答好它，你至少得考慮到以下這些方面：

數(shù)據(jù)層設(shè)計(jì)

帖子（Post）結(jié)構(gòu)如何定義？
評論、點(diǎn)贊要不要單獨(dú)拆表？
如何支持分頁、增量更新？

前端渲染性能

當(dāng)頁面有上千條帖子時(shí)，怎么避免卡頓？
是否需要虛擬滾動(dòng)（Virtual List）？
圖片、視頻如何懶加載？

實(shí)時(shí)性與交互

新帖來了怎么實(shí)時(shí)刷新？
點(diǎn)贊、評論如何做到局部更新而不重渲染整個(gè)頁面？
WebSocket / SSE 怎么選擇？

狀態(tài)管理與擴(kuò)展性

狀態(tài)放全局（Store）還是局部（組件）？
如何支持“多端一致”（Web + App）？

用戶體驗(yàn)與容錯(cuò)

網(wǎng)絡(luò)慢怎么辦？
出錯(cuò)時(shí)如何降級？
有沒有骨架屏、預(yù)加載機(jī)制？

是不是看著有點(diǎn)復(fù)雜了，方方面面都得考慮到。

那下面咱們就一起拆解下這個(gè)問題哈：

一、數(shù)據(jù)層設(shè)計(jì)：Feed 數(shù)據(jù)結(jié)構(gòu)與分頁機(jī)制

先從最底層的數(shù)據(jù)說起。

每條帖子（Post）包含：作者、內(nèi)容、媒體、點(diǎn)贊、評論、時(shí)間戳等信息：

{
  id: 'post_123',
  author: { id: 'u1', name: 'Sunday', avatar: 'a.jpg' },
  content: '今天寫了一篇公眾號(hào) ??',
  media: ['img1.jpg', 'img2.jpg'],
  likes: 230,
  comments: 58,
  createdAt: 1730098800000
}

分頁機(jī)制：

采用 Cursor-based Pagination（基于游標(biāo)的分頁），而非傳統(tǒng)的 page=1,2,3。
這樣能避免用戶在動(dòng)態(tài)內(nèi)容頻繁變化時(shí)，翻頁數(shù)據(jù)重復(fù)或錯(cuò)亂。
例如后端返回：

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

評論與點(diǎn)贊延遲加載（Lazy Load）：首屏只加載主要內(nèi)容，評論區(qū)按需請求，提升初始渲染速度。

二、渲染層設(shè)計(jì)：虛擬滾動(dòng) + 懶加載

新聞流頁面的最大問題是 內(nèi)容太多。如果直接一次性渲染上百條帖子，DOM 數(shù)量會(huì)非常龐大，性能必崩。

解決方案：虛擬列表（Virtual List）

核心邏輯是：

只渲染可視區(qū)域的帖子；
滾動(dòng)時(shí)動(dòng)態(tài)替換上、下區(qū)域的內(nèi)容。

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

再加上：

圖片懶加載 <img loading="lazy">
視頻延遲播放（進(jìn)入視口才加載）
Skeleton（骨架屏）讓用戶視覺上更流暢

三、通信層設(shè)計(jì)：實(shí)時(shí)更新（WebSocket / SSE）

Facebook 的帖子流是實(shí)時(shí)的。有人點(diǎn)贊、評論、發(fā)新帖，用戶的頁面就要自動(dòng)更新。

在前端層面，有兩種常見做法：

模式	說明	適用場景
WebSocket	雙向通信，前后端都能推消息	聊天系統(tǒng)、互動(dòng)頻繁的應(yīng)用
SSE（Server-Sent Events）	服務(wù)端單向推送，輕量且穩(wěn)定	動(dòng)態(tài)刷新、通知推送等

示例：

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

建議答題時(shí)提到：“我會(huì)用 SSE 或 WebSocket 實(shí)現(xiàn)增量推送，同時(shí)配合時(shí)間戳去重機(jī)制，確保狀態(tài)一致。”

四、狀態(tài)層設(shè)計(jì)：全局 Store + 局部更新

系統(tǒng)設(shè)計(jì)題中，狀態(tài)管理是高頻考點(diǎn)。

如果你直接用 setState(posts) 更新整個(gè)列表，那每次點(diǎn)贊、評論都會(huì)導(dǎo)致整個(gè)頁面重渲染，這在 Meta 面試中是大忌。

正確做法是：

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

同時(shí)利用：