為什么facebook主頁加載這么快：BigPipe？

jas0n 發(fā)布于2019-08-01 15:57 / 434人閱讀

摘要：起源來源于公司解決主頁面加載速度慢而提出的一項改進技術(shù)。流水線方式降低了頁面整體的加載時間，而且，通過讓一部分頁面先顯示，讓用戶感覺頁面加載的更快了。將樣式表放在頂部，一般放在中，主要作用是避免裸奔，惡化用戶體驗。

前言

本文是對《BigPipe學習研究》的總結(jié)。昨晚刷Quora，看到一個類似的問題，然后今早百度了下，發(fā)現(xiàn)了這篇非常細致的額文章，所以精簡了下，對理解網(wǎng)頁性能優(yōu)化有很大幫助。

BigPipe起源

BigPipe來源于facebook公司解決主頁面加載速度慢而提出的一項改進技術(shù)。《高性能網(wǎng)站建設(shè)指南》指出，從瀏覽器發(fā)出請求到頁面顯示網(wǎng)頁的過程中，只有10%~20%的時間花在服務(wù)器產(chǎn)生HTML頁面并傳回瀏覽器這個過程，80%~90%的時間花在瀏覽器解析渲染得到的HTML、CSS、JavaScript文件。所以，針對前端的性能優(yōu)化是減少加載時間最有效地方法。
傳統(tǒng)頁面加載模型加載大型網(wǎng)頁速度慢的根本原因在于，瀏覽器和服務(wù)器的工作是有先后順序的。一般，瀏覽器發(fā)送http請求到服務(wù)器，然后服務(wù)器返回響應(yīng)文件（CSS/HTML/JavaScript），瀏覽器解析并執(zhí)行響應(yīng)文件。服務(wù)器工作的時候瀏覽器在等待，反之，瀏覽器工作的時候服務(wù)器在等待。如果能夠打破這一桎梏，就可以極大改善頁面加載時間。

BigPipe原理

根據(jù)頁面位置不同，將整個頁面分為不同的pagelet，將眾多pagelet的加載過程像流水線一樣分布在瀏覽器和服務(wù)器上，這實現(xiàn)了服務(wù)器和瀏覽器的并行化。

facebook分區(qū)示意圖

BigPipe 中，用戶提出頁面訪問請求后，頁面的完整加載流程如下:

Request parsing：服務(wù)器解析和檢查http request

Datafetching：服務(wù)器從存儲層獲取數(shù)據(jù)

Markup generation：服務(wù)器生成html 標記

Network transport ：網(wǎng)絡(luò)傳輸response

CSS downloading：瀏覽器下載CSS

DOM tree construction and CSS styling:瀏覽器生成DOM 樹，并且使用CSS

JavaScript downloading: 瀏覽器下載頁面引用的JS 文件

JavaScript execution: 瀏覽器執(zhí)行頁面JS代碼

這個8 個流程幾乎與上文中提到現(xiàn)有的模式?jīng)]有區(qū)別，但這只是一個pagelet 的完整流程，而多個pagelet 的不同操作階段就可以像流水線一樣進行執(zhí)行了。流水線方式降低了頁面整體的加載時間，而且，通過讓一部分頁面先顯示，讓用戶感覺頁面加載的更快了。

限制

這一技術(shù)的限制很明顯，由于不同pagelet是通過JavaScript動態(tài)加載的，這會導致爬蟲無法收錄，影響SEO結(jié)果；還有就是當客戶端禁用JavaScript時，這一功能就不能用了。所以要進行瀏覽器嗅探和JavaScript腳本檢測，然后決定使用原有模式或者是動態(tài)添加模式。

facebook的其他性能優(yōu)化技術(shù)

1）資源文件的G-zip壓縮，使CSS和JS文件大小降低70%，這是頁面加載過程中傳輸?shù)闹饕募?br>2）JavaScript精簡，移除代碼中不必要的注釋和字符，精簡工具可以使用JSMin，精簡后得腳本會減少20%左右。
3）將CSS和JavaScript合并，減少HTTP請求次數(shù)，尤其是對于用戶量巨大的facebook，這會極大地降低服務(wù)器壓力。
4）使用外部JavaScript和CSS，有利于文件復(fù)用和修改。由于瀏覽器緩存的作用，僅第一次加載會慢一點。
5）將樣式表放在頂部，一般放在中，主要作用是避免HTML“裸奔”，惡化用戶體驗。將JavaScript放在底部，放在頂部會使頁面加載慢，而且就用戶而言，他們更想盡早看到頁面，而不是動態(tài)功能。Bigpipe實現(xiàn)一個“barrier”的概念，即當所有的pagelet的內(nèi)容全部加載好了之后，瀏覽器再向服務(wù)器發(fā)送js 的http 請求。可以在BigPipe.js 中將所有的pagelet 所需的js文件的路徑保存下來，在判斷所有的內(nèi)容加載完成后統(tǒng)一向服務(wù)器發(fā)送請求。