PHP 實作 BigPipe 分塊輸出：優化首屏載入體驗

核心原理

利用 ob_flush() + flush() 強制將輸出緩衝區內容提前送達瀏覽器，無需等待整頁渲染完成。將頁面拆分為多個獨立區塊，優先輸出 <head>（CSS/JS）、再依序輸出內容區塊，使用者能最快看到畫面框架。

完整範例代碼

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Big Pipe Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>body{margin:0;background:#CCC} p{text-align:center;margin:10px} img{width:450px}</style>
</head>
<?php cache_flush(); ?>
<body>
    <p><img src="https://image.tianjimedia.com/uploadImages/2013/240/5CPOE4UZ2T40.jpg"></p>
    <?php cache_flush(); ?>
    <p><img src="https://image.tianjimedia.com/uploadImages/2013/240/6893CY9XEQD1.jpg"></p>
    <?php cache_flush(); ?>
    <p><img src="https://image.tianjimedia.com/uploadImages/2013/240/83H52SG02V32.jpg"></p>
</body>
</html>
<?php
function cache_flush($sec = 1) {
    ob_flush();
    flush();
    usleep($sec * 1000000); // 模擬後端處理延遲
}
?>

關鍵注意事項

1. 區塊粒度：非越多越好，依業務邏輯切分（如：導航欄、側邊欄、主內容、廣告位）。
2. 同步載入：CSS/JS 放在 <head> 並優先 flush，避免頁面閃爍。
3. 雙重 flush：ob_flush() 清 PHP 輸出緩衝，flush() 推送至 Web Server/瀏覽器，兩者缺一不可。
4. Web Server 配置：Nginx/Apache 需關閉 gzip 或設定 proxy_buffering off，否則可能緩衝導致無效果。
5. 輸出大小：瀏覽器通常需接收 256+ 位元組才開始渲染，必要時輸出隱藏空白字元觸發。

適用場景與限制

• ✅ 內容豐富、後端查詢耗時的頁面（新聞列表、商品詳情、儀表板）。
• ✅ 需優化「首屏時間」與「可交互時間」指標。
• ❌ 靜態頁面或全頁快取場景無顯著效益。
• ❌ HTTP/2 多工傳輸下效果遞減，Server Push 為更優解。

進階演進

• 非同步 BigPipe：頁面骨架先輸出，內容區塊以 AJAX/JSONP 並行載入並客戶端渲染（Facebook 原生模式）。
• 資源提示：搭配 <link rel="preload">、prefetch 預載關鍵資源。
• 框架整合：Laravel flush()、Yii renderPartial、ThinkPHP display 等均支援分塊輸出模式。

結語

BigPipe 以極低成本（幾行代碼）顯著提升用戶感知效能。掌握 ob_flush/flush 機制與 Web Server 緩衝行為，即可在傳統 PHP 架構下實現現代化的流式渲染體驗。