https://github.com/LiuuY/Blog...git
看了一篇介紹 Instagram 網站優化的文章,Making Instagram.com faster,裏面介紹了他們優化頁面首次渲染的技術,其中有一種簡化的 Facebook BigPipe 技術。我就去 Instagram一探究竟。github
繼續閱讀前,你首先須要知道 BigPipe,簡單來講就是:利用 HTTP 1.1 的Chunked transfer encoding,瀏覽器邊下載首頁 HTML 的各個 「chunks」,邊解析 HTML,最開始的 「chunks」包含 script 標籤下載頁面所需的 JavaScript 文件,然後面的 「chunks」中的 script 標籤就包含了初始 API 請求的數據結果。這樣就節省了 JavaScript 文件中再次須要發送 API 請求獲取數據。web
打開 Chrome ,訪問Instagram:瀏覽器
1.在初始頁面,找到了以下,這個就是最後數據放置的地方服務器
2.服務器渲染數據到一個 Script 標籤,並調用初始化函數(相似於 JSONP)函數
3.初始化函數就是把數據放到 window.__initialData
優化
4.咱們搜索 window.__initialData
,就能發現實際用到數據的地方網站