Instagram.com 首页优化 - BigPipe

看了一篇介绍 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）。
我认为这一步渲染的数据如果是一个 JSON 结构的对象的话，可以使用 JSON.parse 来优化解析效率，看这里。
window._sharedData = JSON.parse('{"config": "csrf" ... }')

3.初始化函数就是把数据放到 window.__initialData

4.我们搜索 window.__initialData，就能发现实际用到数据的地方

更多看这里