BigPipe—Facebook

1、背景
Facebook针对本公司的SNS特点定制的性能优化解决方案,并不是所有的公司、业务都适用,或者带来那么显著的效果。分析一个完整页面的请求,以知乎首页为例,其加载页面的部分截图如下:

浏览器从发起请求到渲染页面经历了以下过程:
浏览器向服务器发起请求—>服务器接收请求,组装数据—>服务器把组装好的数据一次性返回数据给用户—>浏览器接收返回的数据,渲染页面。
在此过程中,浏览器发起请求后到接收到请求的阶段内,浏览器一直处于等待无响应状态。还以知乎首页为例,可以看到页面的等待时间(699.495ms)远远大于其请求、下载资源以及渲染时间总时间(约9ms)。如果页面较大,用户的等待时间过长,这将是一个非常不好的体验。BigPipe在此背景下应运而生了。
2、BigPipe实现原理
Facebook的BigPipe是一种多线程的BigPipe,原理如下:
bigpipe将一个页面分为多个的 PageLet,每个的 PageLet 实际上就是一个 HTML 片段,每个 PageLet 的页面内容由单独的线程生成与处理。由于使用了多线程,PageLet 内容的返回顺序无法确定,因此如果将内容直接写回 HTML 文档内,它的位置是无法确定的,因此需要借助 JavaScript 将内容插入到正确的位置,因为脚本代码的位置无关紧要。
服务器接受到网页请求时,就开始按照文档流顺序处理 PageLet。每处理到一个 PageLet,服务器端程序会将其交给线程池里的线程处理,线程池处理完请求后,就将内容包含在 JavaScript 代码里,写回客户端。客户端执行这段代码将内容插入到正确的位置(这和单线程是一样的),由于借助 JavaScript 执行内容的插入,因此只要网页结构先加载,那么线程池处理的内容在任何时候返回,都可以执行正确的插入,无需关心 JavaScript 代码的位置。
而由于业务需要,还有一种单线程的BigPipe,原理如下:
网页的布局仍然是不重要的在上方,重要的在下方,但是对要显示的内容进行重新排序,重要的放在文档流上方,不重要的放在后方。当重要内容加载完之后,再使用 JavaScript 将内容移到原有的位置。因此,单线程需要两个标签,一个名为 bigPipeTo,是一个占位标签,在原有的位置。一个是 bigPipeFrom,它包含了需要显示的内容。
3、BigPipe单线程与多线程的优缺点
单线程:
优点:对流模型不多加干预,单线程对服务器的压力较小,用户体验较好
缺点:某个 PageLet 阻塞,会导致后面的 PageLet 阻塞
特点:PageLet 显示的顺序就是 pageFrom 标签排列的顺率 .
多线程:
优点:用户体验最好,多线程未阻塞时加载快速,保持程序员的正常编码习惯,不会因为一个 PageLet 的缓慢引起其他 PageLet 的失败。
缺点:线程池大小的选取是关键,太大导致服务器压力过大,资源占用太多,太小则导致网页处理的阻塞。
特点 :PageLet 内容出现的顺序不一定。

此条目发表在浏览器分类目录,贴了标签。将固定链接加入收藏夹。

1 则回应给 BigPipe—Facebook

  1. 前端爱好者说:

    头一次听说 好厉害的技术

前端爱好者进行回复 取消回复

邮箱地址不会被公开。 必填项已用*标注