BigPipe是提升大型页面首屏时间的技术方案。

对应大型页面,提升首屏时间传统的方案是将页面分成各个小的子模块,首屏的时候只显示 主页面的框架,再ajax获取这些子模块。

传统方案需要等主页面渲染好了然后发布请求才能渲染子模块,并且ajax较多影响服务器性 能。

所以能不能既可以把页面分成各个子模块分块渲染,提升首屏时间,又能减少ajax请求减少 服务器压力。

BigPipe就是为了做到上述两点。

那它怎么做到这一点的能,关键技术就是服务器的输出缓冲。

1. 输出主页面架构

请求开始时,输出主页面框架和一些样式和脚本,这时这个请求并没有结束,而是清空缓冲。

这个主页面看起来这个样子:各个模块还是一些空的占位符,主样式进行一些必要的渲染, 保证不给用户看到看起来破损的样子,主脚本后面会提到。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/main.js"></script>
  </head>
  <body>
    <div id="page">
      <div id="block-1"></div>
      <div id="block-2"></div>
      <div id="block-3"></div>
      <div id="block-4"></div>
      <div id="block-5"></div>
    </div>
  </body>
  </html>

2. 利用缓冲循环输出模块

接下来,解析各个模块,生成每个模块的html,css,js。每当有模块解析完,就直接输出 缓冲、刷新缓冲。直到该请求的所有模块输出结束。

3. 主页面请求结束,主脚本处理各个模块。

主脚本在页面请求结束进入Dom ready阶段则抓取各个模块,填充到这个模块的占位符中,页 面完整的请求就这样结束了。