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

sunnyxd 發布于2019-08-20 12:15 / 2366人閱讀

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

前言

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

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）將樣式表放在頂部，一般放在中，主要作用是避免HTML“裸奔”，惡化用戶體驗。將JavaScript放在底部，放在頂部會使頁面加載慢，而且就用戶而言，他們更想盡早看到頁面，而不是動態功能。Bigpipe實現一個“barrier”的概念，即當所有的pagelet的內容全部加載好了之后，瀏覽器再向服務器發送js 的http 請求。可以在BigPipe.js 中將所有的pagelet 所需的js文件的路徑保存下來，在判斷所有的內容加載完成后統一向服務器發送請求。

GPU云服務器云服務器 facebook是什么網站 python為什么這么火備案為什么要這么久深度學習為什么這么火

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80879.html

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

摘要：起源來源于公司解決主頁面加載速度慢而提出的一項改進技術。流水線方式降低了頁面整體的加載時間，而且，通過讓一部分頁面先顯示，讓用戶感覺頁面加載的更快了。將樣式表放在頂部，一般放在中，主要作用是避免裸奔，惡化用戶體驗。前言本文是對《BigPipe學習研究》的總結。昨晚刷Quora，看到一個類似的問題，然后今早百度了下，發現了這篇非常細致的額文章，所以精簡了下，對理解網頁性能優化有很大幫...

jas0n 2019-08-01 15:57 評論0 收藏0
鏈家網前端總架構師楊永林：我的8年架構師成長之路

摘要：楊永林，人稱教主，八年前端開發經驗，原新浪微博前端技術專家，現任鏈家網前端總架構師。年年底，教主加入鏈家網，負責前端的整體架構工作。楊永林，人稱教主，八年前端開發經驗，原新浪微博前端技術專家，現任鏈家網前端總架構師。長期研究Web訪問性能優化和前端框架搭建。作為初始團隊成員，教主參與了新浪微博所有PC版本的開發，其中4~6版以架構師的身份設計了微博PC版的前端架構。在新浪微博任職期間...

liaosilzu2007 2019-08-23 15:19 評論0 收藏0
使用BigPipe優化頁面的加載速度實踐

摘要：比如首頁是一個靜態頁面，不依賴什么接口列表頁涉及到價格日歷，篩選，一些提示信息模塊等，依賴不同的接口因為使用了，可以實現前后端模板共用。說起網頁速度優化，想必大家都能說上幾句，最知名的莫過于雅虎的23條了。這里有一系列的小建議和優化策略，但是治病也得看癥狀，對癥下藥才是關鍵。比如淘寶賣家中心首頁速度優化的這個場景，就是一個很突出的例子。文章里針對首頁展示優化策略做個一個全面的對比，...

adie 2019-08-20 16:18 評論0 收藏0
談談前端工程化 js加載

摘要：當年的加載在沒有前端工程化之前，基本上是我們是代碼一把梭，把所需要的庫和自己的代碼堆砌在一起，然后自上往下的引用就可以了。而且對于前后端的技術要求較高，所以對于項目未必是最有效的方案。當年的 js 加載在沒有前端工程化之前，基本上是我們是代碼一把梭，把所需要的庫和自己的代碼堆砌在一起，然后自上往下的引用就可以了。那個時代我們沒有公用的cdn，也沒有什么特別好的方法來優化加載j...

paulli3 2019-08-23 17:15 評論0 收藏0
鳥瞰前端 , 再論性能優化

摘要：前端性能優化的涉及點從服務器到協議再到宿主環境本身都要有比較深刻的認識，業界目前主要還是以雅虎總結出來條前端性能優化的黃金軍規為參考。歡迎大家前往騰訊云技術社區，獲取更多騰訊海量技術實踐干貨哦~ 導語 : 從事前端有6年+的時間了，從最開始的美工到重構再到偏向js邏輯開發的前端開發，一直在前端這個行業里面摸索和學習，我現在將自己這些年的一個心得體會來個系統性的梳理寫成一篇關于性能優化...

voidking 2019-08-29 13:47 評論0 收藏0