現象觀察：View Source 與 DevTools Elements 不一致

打開 Facebook 首頁查看原始碼：HTML 極少，大量 ` 3. 瀏覽器**邊接收邊處理**： - 解析已到達 HTML → 構建部分 DOM - 平行下載 Pagelet 聲明的 CSS/JS (預加載) - 執行 onload 回調 → 將 Pagelet HTML 插入容器 → 初始化 JS 行為 4. 最後一塊 is_last=true 輸出，頁面完成 // 總耗時 ≈ max(後端並行查詢) + 首塊輸出延遲 + 前端增量渲染

BigPipe 核心協議：big_pipe.onPageletArrive()

每個 Pagelet 輸出一段內聯腳本：

<script>
big_pipe.onPageletArrive({
  "id": "pagelet_welcome_box",        // 容器 ID，對應頁面佔位符 <div id="pagelet_welcome_box"></div>
  "phase": 1,                         // 階段，控制優先級/依賴順序
  "is_last": false,                   // 是否最後一塊
  "append": false,                    // true=追加，false=替換容器內容
  "bootloadable": [],                 // 需啟動加載的資源 ID
  "css": ["lDRwi", "eon+N"],          // CSS 資源 ID 列表 (經編碼/映射)
  "js": ["F+B8D", "IdQlc"],           // JS 資源 ID 列表
  "resource_map": [],                 // 資源映射表 (ID → URL, 類型, 永久快取等)
  "requires": [],                     // 依賴的 JS 模組 ID
  "provides": [],                     // 提供的 JS 模組 ID
  "onload": [                         // DOM 就緒後立即執行的腳本陣列
    "window.__UIControllerRegistry['c4c13a3ed2dd1e0e349b72'] = new UIPagelet(...);"
  ],
  "onafterload": [],                  // 頁面 onload 後執行
  "onpagecache": [],                  // 頁面緩存恢復時執行
  "onafterpagecache": [],
  "refresh_pagelets": [],             // 需刷新的其他 Pagelet ID
  "invalidate_cache": [],             // 失效緩存的 Pagelet ID
  "content": {                        // 核心：HTML 字串
    "pagelet_welcome_box": "<div id=\"c4c13a3ed2dd1e0e349b72\"><div class=\"UIImageBlock...\">...</div></div>"
  },
  "page_cache": true                  // 是否啟用頁面緩存 (Quickling)
});
</script>

關鍵技術細節

1. 資源管理：資源映射表 + 靜態資源版本化

• CSS/JS 不直接輸出 URL，而是輸出 **Resource ID** (如 `lDRwi`)。
• `resource_map` 或獨立請求提供 ID → `{name, permanent, src, type}` 映射。
• `permanent: true` 表示長期緩存 (不可變內容哈希命名)，`false` 表示可變。
• 客戶端 **Bootloader** 負責去重、依賴排序、並行下載、執行順序保證。

2. CSS 阻塞策略：早輸出、早下載、晚應用

• Pagelet 聲明所需 CSS ID，Bootloader 立即插入 `` 或 ``。
• 利用瀏覽器預載入掃描器並行下載，**不阻塞後續 HTML 解析**。
• CSS 下載完成後自動應用 (原生行為)，或由 JS 控制應用時機 (避免 FOUC)。

3. JS 執行順序保證：依賴圖拓撲排序

• `requires` / `provides` 定義模組依賴關係。
• Bootloader 建立依賴圖，僅當依賴滿足時執行模組工廠函數。
• `onload` 陣列腳本在容器 DOM 插入**後**、該 Pagelet 所需 JS **下載並執行完畢前** 執行 (初始化實例)。

4. 容器佔位與插入機制

<!-- 初始 HTML 框架中預留容器 -->
<div id="pagelet_welcome_box"><!-- 此處將被 Pagelet HTML 替換 --></div>

// onPageletArrive 內部邏輯簡化
onPageletArrive(pagelet) {
  // 1. 下載並執行 css/js (Bootloader)
  bootloader.loadResources(pagelet.css, pagelet.js, () => {
    // 2. 容器替換/追加
    const container = document.getElementById(pagelet.id);
    if (container) {
      if (pagelet.append) container.innerHTML += pagelet.content[pagelet.id];
      else container.innerHTML = pagelet.content[pagelet.id];
    }
    // 3. 執行 onload 腳本 (初始化 UI 控制器)
    pagelet.onload.forEach(script => eval(script));
  });
}

5. Quickling / 頁面緩存 (Page Cache)

• 用戶點擊鏈接前預取目標頁面 Pagelets (hover/預測)。
• 緩存 Pagelet 內容與資源映射，再次訪問瞬間渲染 (類似 Turbo/PJAX 但粒度更細)。
• `page_cache: true` 標識該 Pagelet 可緩存。

BigPipe 對前端架構的深遠影響

1. Pagelet 元件化：頁面 = 獨立、可組合、可獨立數據獲取/渲染/緩存的 Pagelet 樹。直接啟發了後來的 **React Server Components、Next.js Streaming、Astro Islands、Qwik Resumability**。
2. 資源加載器標準化：Bootloader → RequireJS → Webpack/Parcel/Vite 模塊聯邦、預載入策略。
3. 流式 SSR (Streaming SSR)：Node.js `res.write()` / `pipe()`、React 18 `renderToPipeableStream`、Edge Runtime 串流響應 — 皆是 BigPipe 思想在現代運行時的原生實現。
4. 關鍵指標優化：TTFB (首字節) → FCP (首次內容繪製) → TTI (可交互) 分離優化，BigPipe 直接壓縮 TTFB→FCP 間隔。

現代實踐：如何在今天落地 BigPipe 思想

技術棧	方案	關鍵點
Node.js (Express/Koa)	手寫中間件 `res.flush()` + 模板引擎流式渲染	需後端支援非阻塞並行查詢、流式模板
React 18+	renderToPipeableStream + ``	元件級流式、選擇性水合、優先級調度
Next.js 13+ (App Router)	Server Components + Streaming + `loading.js`	約定式、自動代碼分割、Edge 部署
Astro	Islands + `async` 組件 + 串流	默認靜態、互動島嶼按需水合
Qwik	Resumability + 細粒度懶加載	零水合、HTML 序列化狀態、極速 TTI
PHP (Laravel/Symfony)	Laravel Stream Download / Symfony StreamedResponse	配合 Octane/Swoole 協程並行查詢
Java (Spring Boot)	WebFlux + Thymeleaf/FreeMarker 流式	Reactive Streams 背壓控制
Go	http.ResponseWriter (實現 Flusher) + template.Execute	原生支援 flush、goroutine 並行

避坑指南

• 首屏關鍵內容必須在首塊：否則用戶面對空白頁等待，體驗反而更差。
• CSS 必須隨首塊或關鍵 Pagelet 輸出：避免樣式閃爍 (FOUC) 或佈局位移 (CLS)。
• 資源去重與依賴管理：多 Pagelet 共用 JS/CSS 必須由加載器去重，否則重複下載/執行。
• 錯誤邊界：單個 Pagelet 失敗不應導致整頁崩潰，需降級佔位圖/錯誤提示。
• 緩存策略複雜度：Pagelet 級緩存失效、版本同步、用戶個性化數據隔離需精心設計。
• SEO 與社交分享：爬蟲不執行 JS，需提供完整 SSR 回退或 Prerender 服務。

Facebook BigPipe 不僅是一項優化技術，更是一種**以用戶感知速度為核心、將頁面拆解為獨立可流式傳輸單元**的架構哲學。今日前端框架的流式渲染、島嶼架構、可恢復性，皆可溯源於此。理解其協議細節與工程權衡，是構建高性能現代 Web 應用的必修課。