新版新浪微博的個人首頁左側的「首頁」、「提到我的」、「評論」、「私信」、「收藏」等導航是如何做到局部刷新的？

01-25

點擊左側上述的鏈接後，給人的感覺好像是左側的導航沒有變；
只有右邊的那個模塊有相應的變化（應該不是視覺誤差吧）。
看了一下源碼，好像不是Ajax技術，也沒有用iframe；
那這個導航是如何實現局部刷新的呢？

本來沒什麼可說的，若干年前的東西了。

但是看了 @高原這位前微博前端工程師的「調侃」（姑且認為是調侃好了），只好說幾句。

至於是否裝B而叫「BP載入」，那就不得而知了，起嗎當時實現那會兒 Facebook 也是這麼裝的。

不扯別的，說正經的，解釋下這個裝B的「BP載入」 iframe，為啥要用這玩意。

首先，的確是動態創建 iframe 載入的其他模塊，如圖：

但是，要知道，BP 的前提是需要這個支持

Transfer-Encoding:chunked

之後，需要採用 Pagelet 方式載入模塊，這部分是JS 負責，也就是說要有個可被執行的函數來載入模塊所需資源（HTML、CSS、JS）。

同時，一個頁面的模塊是一個請求吐出來的，並且是亂序的（也就是後端並髮型吐出，哪個模塊準備好了，哪個就被 print 到這個請求的輸出流內）。這點是於 AJAX 方式完全不同，AJAX 受限於瀏覽器端請求並發限制，可能是2-6個，無法更多。且每個請求附帶HTTP頭、附帶服務端響應時間等等。

好了，條件限制：

1、用HTTP方式請求資源

2、請求要支持 chunked

3、response 後的數據每次吐出的數據塊兒（其實也就是PL模塊）需要可以立即被 JS 處理渲染。

AJAX 方式會遇到一些問題：

1、每次 chunked 狀態獲取才能知道是否一個模塊被output

2、吐出的模塊 JS 需要創建 script 標記再執行

3、每次需要diff 下後被 output 出的內容

4、跨域問題

解釋下：

1、AJAX 對 chunked 的支持是否全平台通用（這裡指支持到IE6）

2、代碼創建 script 的效率（這我認為問題不大）

3、每次 chunked 後獲取 responseText 時候是全量，需要記錄上次內容 diff 出當前chunked 後的內容才能創建 script 執行（這我認為比較煩，但問題也不大，大不了substr什麼得唄）

4、都懂的，不說了。

個人感覺稍煩，AJAX 對 chunked 的支持和跨域。

那好，剩下的比較省事兒且全平台通用的方案就是創建個 iframe

它本身就是個頁面，只要瀏覽器支持 chunked 就可以，每次被新 output 的數據也不用消耗 JS 執行資源去 diff。iframe 內的每次 chunked 的 script 去構建前端模塊，渲染到父級頁面，就這麼簡單，沒啥會出亂子的事兒。

好了，你說 iframe 也有跨域問題。沒錯，這個解決方法可比 AJAX 跨域來的要多很多吧，而且不用勞煩後端做本域的透明代理。

完事兒。

文不對題，求摺疊。

最終還是脫離不了AJAX的，但包含的卻遠遠不止Ajax本身：

1. 頁面按照Pagelet劃分；

2. Pagelet可以是樹形的包含關係, 根Pagelet就是我們看到的頁面；

3. 每個Pagelet可以隨頁面一起渲染，也可以通過獨立的請求渲染；

4. 子Pagelet渲染後不生成html而是生成js/css/html三元組；

5. 頁面中部分鏈接點擊後，請求的是Pagelet，Pagelet以script的形式傳回，執行後再渲染自身.script中指明了Pagelet的父節點id，極有可能是是innerHTML替換的地方。

這套機制的好處除了局部刷新外，同級Pagelet之間是沒有依賴的，因此頁面的首次載入還可以實現加速和容錯。

實現這套機制並不困難，難的是做到對業務開發透明，後端需要做很多的設計和準備。

參考： http://www.facebook.com/note.php?note_id=389414033919

有一個
iframe 的好不，秘密就在那個
iframe 的內容里，一看就明白了..... 這種數據的交互模式我們還取了一個裝B的名稱叫做「BP載入」 .....吼吼........

FaceBook BigPipe技術，非高級瀏覽器使用iframe來模擬一些瀏覽器默認動作

喝喝，竟然是 iframe。。也是嚇尿

說到局部刷新可以參考下 twitter 或者 github 的實現，html5 window.history.pushState/replaceState