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，就能发现实际用到数据的地方