Blog.

Instagram.com 首页优化 - BigPipe

LiuuY

看了一篇介绍 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 请求获取数据。

excalidraw-202011822304

打开 Chrome ，访问 Instagram ：

  1. 在初始页面，找到了如下，这个就是最后数据放置的地方 ig1

  2. 服务器渲染数据到一个 Script 标签，并调用初始化函数（类似于 JSONP）。 我认为这一步渲染的数据如果是一个 JSON 结构的对象的话，可以使用 JSON.parse 来优化解析效率，看这里。

window._sharedData = JSON.parse('{"config": "csrf" ... }')

ig2

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

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