爲何facebook主頁加載這麼快：BigPipe？

時間 2019-11-09

標籤爲何主頁加載 bigpipe 欄目硅谷简体版

原文原文鏈接

前言

本文是對《BigPipe學習研究》的總結。昨晚刷Quora，看到一個相似的問題，而後今早百度了下，發現了這篇很是細緻的額文章，因此精簡了下，對理解網頁性能優化有很大幫助。html

BigPipe起源

BigPipe來源於facebook公司解決主頁面加載速度慢而提出的一項改進技術。《高性能網站建設指南》指出，從瀏覽器發出請求到頁面顯示網頁的過程當中，只有10%~20%的時間花在服務器產生HTML頁面並傳回瀏覽器這個過程，80%~90%的時間花在瀏覽器解析渲染獲得的HTML、CSS、JavaScript文件。因此，針對前端的性能優化是減小加載時間最有效地方法。
傳統頁面加載模型加載大型網頁速度慢的根本緣由在於，瀏覽器和服務器的工做是有前後順序的。通常，瀏覽器發送http請求到服務器，而後服務器返回響應文件（CSS/HTML/JavaScript），瀏覽器解析並執行響應文件。服務器工做的時候瀏覽器在等待，反之，瀏覽器工做的時候服務器在等待。若是可以打破這一桎梏，就能夠極大改善頁面加載時間。前端

BigPipe原理

根據頁面位置不一樣，將整個頁面分爲不一樣的pagelet，將衆多pagelet的加載過程像流水線同樣分佈在瀏覽器和服務器上，這實現了服務器和瀏覽器的並行化。瀏覽器

facebook分區示意圖
緩存

BigPipe 中，用戶提出頁面訪問請求後，頁面的完整加載流程以下:性能優化

Request parsing：服務器解析和檢查http request服務器
Datafetching：服務器從存儲層獲取數據網絡
Markup generation：服務器生成html 標記工具
Network transport ：網絡傳輸response性能
CSS downloading：瀏覽器下載CSS學習
DOM tree construction and CSS styling:瀏覽器生成DOM 樹，而且使用CSS
JavaScript downloading: 瀏覽器下載頁面引用的JS 文件
JavaScript execution: 瀏覽器執行頁面JS代碼

這個8 個流程幾乎與上文中提到現有的模式沒有區別，但這只是一個pagelet 的完整流程，而多個pagelet 的不一樣操做階段就能夠像流水線同樣進行執行了。流水線方式下降了頁面總體的加載時間，並且，經過讓一部分頁面先顯示，讓用戶感受頁面加載的更快了。

限制

這一技術的限制很明顯，因爲不一樣pagelet是經過JavaScript動態加載的，這會致使爬蟲沒法收錄，影響SEO結果；還有就是當客戶端禁用JavaScript時，這一功能就不能用了。因此要進行瀏覽器嗅探和JavaScript腳本檢測，而後決定使用原有模式或者是動態添加模式。

facebook的其餘性能優化技術

1）資源文件的G-zip壓縮，使CSS和JS文件大小下降70%，這是頁面加載過程當中傳輸的主要文件。2）JavaScript精簡，移除代碼中沒必要要的註釋和字符，精簡工具可使用JSMin，精簡後得腳本會減小20%左右。3）將CSS和JavaScript合併，減小HTTP請求次數，尤爲是對於用戶量巨大的facebook，這會極大地下降服務器壓力。4）使用外部JavaScript和CSS，有利於文件複用和修改。因爲瀏覽器緩存的做用，僅第一次加載會慢一點。5）將樣式表放在頂部，通常放在<head>中，主要做用是避免HTML「裸奔」，惡化用戶體驗。將JavaScript放在底部，放在頂部會使頁面加載慢，並且就用戶而言，他們更想盡早看到頁面，而不是動態功能。Bigpipe實現一個「barrier」的概念，即當全部的pagelet的內容所有加載好了以後，瀏覽器再向服務器發送js 的http 請求。能夠在BigPipe.js 中將全部的pagelet 所需的js文件的路徑保存下來，在判斷全部的內容加載完成後統一貫服務器發送請求。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。