Facebook的網站前端是如何設計的？

我在想如何設計Facebook前端，特別是它是固定的右側邊欄？我想在我的web應用中實現類似的側邊欄來顯示用戶的任務。但我首先想更好地理解Facebook的邊欄工作方式。Facebook的網站前端是如何設計的？

我想要理解的第一件事是他們如何處理右側邊欄總是在那裏！當你在facebook裏面打開新鏈接時，它不會重新加載。我瞭解可視化CSS部分，沒有問題：position:fixed; right:0; top:0; height:100%;。但是我真的好奇他們是怎麼做到的：當你點擊Facebook內部的一個加載新頁面的鏈接（例如點擊一個朋友的名字）時，整個新頁面內容都會被加載，但似乎並沒有再次加載側邊欄。它一直坐在那裏。

當你點擊鏈接時，他們不會做任何AJAX的東西，所以整個頁面的內容不會通過AJAX加載？它只是非常快，或者他們使用某種（對我來說不明）的設計模式？

來源

2013-09-16 Primoz Rome

我認爲[這篇文章在BigPipe上]（https://www.facebook.com/note.php?note_id=389414033919）回答了這個問題（至少在高層次上）。 –

哇很有趣的閱讀。所以這個BigPipe實際上是這樣做的：1.當服務器接收到一個頁面請求時，它發送一個簡單的HTML模板來描述頁面塊和一個JS庫的響應。2.啓動JS來掃描模板並啓動多個AJAX請求來獲取HTML，CSS和JS用於不同的頁面塊，3.瀏覽器然後呈現來自每個頁面塊請求的響應......這或多或少是？ –

這聽起來正確;理論上，簡單的HTML模板將非常快速地呈現，並且未改變的塊可以使用瀏覽器已經可用的數據（例如本地存儲）。但可能還有更多（這是一個很好的問題）。 –

既然沒有人想回答這個問題，我想我可以提供答案，幫助我最準確地回答我的問題。

答案是在這Facebook's dev blog post，其中描述BigPipe設計模式由Facebook率先推出。 BigPipe將頁面分成不同的塊，稱爲'pagelets'並異步加載它們（並行）。

我發現了BigPipe的open source PHP implementation和live example here，但是它已經更新了很長時間，看起來並沒有積極的發展。

來源

2013-09-18 13:57:09

Facebook的網站前端是如何設計的？

回答

相關問題