Instagram.com 首頁優化 - BigPipe

https://github.com/LiuuY/Blog...

看了一篇介紹 Instagram 網站優化的文章，Making Instagram.com faster，裏面介紹了他們優化頁面首次渲染的技術，其中有一種簡化的 Facebook BigPipe 技術。我就去 Instagram一探究竟。

繼續閱讀前，你首先須要知道 BigPipe，簡單來講就是：利用 HTTP 1.1 的Chunked transfer encoding，瀏覽器邊下載首頁 HTML 的各個 「chunks」，邊解析 HTML，最開始的 「chunks」包含 script 標籤下載頁面所需的 JavaScript 文件，然後面的 「chunks」中的 script 標籤就包含了初始 API 請求的數據結果。這樣就節省了 JavaScript 文件中再次須要發送 API 請求獲取數據。

打開 Chrome ，訪問Instagram：

1.在初始頁面，找到了以下，這個就是最後數據放置的地方

2.服務器渲染數據到一個 Script 標籤，並調用初始化函數（相似於 JSONP）

3.初始化函數就是把數據放到 window.__initialData

4.咱們搜索 window.__initialData，就能發現實際用到數據的地方