Instagram.com 首頁優化 - BigPipe

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

image

打開 Chrome ,訪問Instagram瀏覽器

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

ig1

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

ig2

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

ig3

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

ig4

相關文章
相關標籤/搜索