bigpipe创新驱动力  node实现 具体实现

过去十年，现代web站点变得更加动态和内容化，交互性也逐步增强，

传统的页面处理的方式却没有保持一样的速度发展，越来越不能满足用户对极致性能的追求。

传统页面的交互模型

先来看一下页面传统的交互模型:

  • 浏览器发送HTTP请求给服务器
  • 服务器解析来自客户端的请求，从存储层（缓存、数据库等）获取到数据，
  • 生成HTML页面，给客户端发送HTTP响应。
  • 客户端解析响应，开始构建DOM tree，然后开始下载CSS和JavaScript。
  • CSS下载完毕，解析CSS并继续生成DOM tree。
  • JavaScript下载完毕，被浏览器解析并执行。

传统的页面交互模型按照一定的顺序来执行的，每一个过程都是不可重叠的，

即每一个过程不能在同一时间被执行。当服务器端获取数据并生成页面的时候，

客户端被闲置，等待服务器端生成数据；当客户端接收到服务前端返回的页面并开始下载资源，

解析页面的时候，服务器又在等待来自客户端的下一次请求。空闲时间造成资源的浪费。

如果客户端能够在服务器生成页面的时候同时能够进行资源的下载和页面的解析，

在页面进行资源下载和解析的过程服务器端也能够继续生成页面，那么整体的性能将会被提升。

（做出来一点 就先用了）

BigPipe 的工作方式

为了能让一个页面能够同时被客户端和服务前端同时处理，

首先我们需要将一个完成的页面划分为若干小块，这些小分块被称为 pagelets。

然后通过bigpipe技术，让页面以pagelet的形式在服务前端生成并 分块 发送给客户端。

BigPipe 让页面的生成步骤拆成成一下几个步骤：

1、服务前端接收来自客户端的HTTP请求
2、从存储层获取数据。
3、生成HTML，响应给客户端。

4、浏览器解析内容,开始下载CSS，浏览器生成DOM Tree,生成CSS Rule Tree,构造 Rendering Tree, 绘制和显示元素。
5、下载和执行JavaScript。

前面三个步骤在服务前端完成，后面三个在浏览器端执行。

每一个pagelet都要执行以上的全部步骤，

但是bigpipe 可以让这些pagelet并行的去完成这一些步骤。

首先客户端给浏览器发送一个HTTP请求给服务器。

服务器首先会生成一段不闭合的HTML片段，包含了<head>和不闭合的<body>标签,

在head里面包含了处理后续接收到的 pagelet 的 BigPipe 库，在这里是bigpipe.js,然后发送给客户端。

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="HandheldFriendly" content="true">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">

  <meta name="apple-mobile-web-app-capable" content="yes">

  <title>BigPipe Test</title>

  <link rel="stylesheet" href="bigpipe.styl">

  <script src="bigpipe.js"></script>

</head>

<body>

这个时候服务器就继续去生成页面的 pagelets。

而客户端已经开始下载CSS和其它资源了。

当服务器端生成好一个pagelet 的时候，会立即 flush 到客户端，pagelet 的格式如下：

<script type="text/javascript">

big_pipe.onPageletArrive({id: “pagelet_composer”, content=<HTML>, css=[..], js=[..], …})

</script>

一个 pagelet 包含了 id 、 HTML片段 、 依赖的CSS 、JavaScript 资源。

在客户端，当接收到一个pagelet(此时服务端还在继续生成其它pagelet) 的时候,

马上回执行 onPageletArrive 的方法，BigPipe库会根据返回的pagelet信息 立即开始下载CSS资源，

下载完之后会在页面显示pagelet片段。由于JavaScript的下载和执行会阻塞页面的渲染，

所以，JavaScript 下载和执行的优先级会被降低，等待所有 pagelet 全部被展示完了，JavaScript资源才会被开始下载和执行。

重复上面的步骤，直到 pagelet 全部处理完毕，这个流程就结束了，

pagelet 处理的过程服务器端和客户端一直保持 同步工作状态。

BigPipe 是FaceBook 在性能优化探索的过程中结合自己的业务场景提出来的一个优化手段，

并在FaceBook中取得了巨大的成就,在2009年的时候，他们使用BigPipe和其它一些优化手段，

成功将网站的响应速度提高了到之前的两倍。

参考资料

===============1

比如首页非常多内容, 如果后台全部一次性返回, 需要较长的时间, 这时候就可以把页面分割了

java可以使用多线程, 把页面的内容分割成几分

php可以利用 扩展中的curl 模块，可以在该模块中curl_multi_fetch() 函数进行批处理请求

前端通过js 把返回的一块一块的 内容通过 对应的id  组装到  对应的页面模块上

也许你会想到 ajax, 但是ajax有以下缺点

1. 必须多一次xmlHttp 请求,  这个请求可能还发生在页面渲染之后,  这段时间浪费了

2. 多一次ajax 请求,   如果这个首页一天有很多人访问

一般来讲，网站越大，脚本和样式表越多，浏览器版本越旧，网络环 境越差，优化的结果越可观。

可以达到个模块同时显示的效果

http://www.qdfuns.com/notes/17631/e3d5c64665fedec2b603c498a0902033.html

BigPipe 大的页面分割成一个一个管道的更多相关文章

  1. 移动端H5页面开发，碰到一个字体变大的BUG

    移动端H5页面开发,碰到一个字体变大的BUG webkit内核下,对不定高宽的元素可能会放大其字体.那么,就可以设置一个max-width:或者使用-webkit-text-size-adjust: ...

  2. VIPS:基于视觉的页面分割算法[微软下一代搜索引擎核心分页算法]

    VIPS:基于视觉的页面分割算法[微软下一代搜索引擎核心分页算法] - tingya的专栏 - 博客频道 - CSDN.NET VIPS:基于视觉的页面分割算法[微软下一代搜索引擎核心分页算法] 分类 ...

  3. 用js把数据从一个页面传到另一个页面

    用js把数据从一个页面传到另一个页面的层里? 如果是传到新页面的话,你网站基于什么语言开发直接用get或者post获取,然后输出到这个层 通过url传参 如果是HTML页面的话JS传到新页面就wind ...

  4. (转)mongoDB 禁用大内存页面 transparent_hugepage=never

    最近在学mongoDB,安装倒没什么困难,有yum仓库.不过接入ctl后的一条warning倒挺让人烦心的. 1 2 2015-03-22T09:27:00.222+0800 I CONTROL  [ ...

  5. Java-使用IO流对大文件进行分割和分割后的合并

    有的时候我们想要操作的文件很大,比如:我们想要上传一个大文件,但是收到上传文件大小的限制,无法上传,这是我们可以将一个大的文件分割成若干个小文件进行操作,然后再把小文件还原成源文件.分割后的每个小文件 ...

  6. 在JSP页面中调用另一个JSP页面中的变量

    在jsp学习中,经常需要在一个jsp页面中调用另一个jsp页面中的变量,下面就这几天的学习,总结一下. jsp页面之间的变量调用有多种方法: 1.通过jsp的内置对象—request对象获取参数: ( ...

  7. asp.net使用post方式action到另一个页面，在另一个页面接受form表单的值！（报错，已解决！）

    原文:asp.net使用post方式action到另一个页面,在另一个页面接受form表单的值!(报错,已解决!) 我想用post的方式把一个页面表单的值,传到另一个页面.当我点击Default.as ...

  8. 网站开发进阶(十一)如何将一个jsp页面嵌套在另一个页面中

    如何将一个jsp页面嵌套在另一个页面中 这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可.这样便于维护,如果有很多网页,当通用 ...

  9. 网站开发进阶(十)如何将一个html页面嵌套在另一个页面中

    如何将一个html页面嵌套在另一个页面中 1.IFrame引入 <IFRAME NAME="content_frame" width=100% height=30 margi ...

随机推荐

  1. JS post 数组道后台

    $("#aSave").click(function () { if ($("#TaskName").val() == "") { aler ...

  2. C++ 重载new和delete

    下边代码对new和delete进行了简单的重载: #include <memory> #include <iostream> #include <cstddef> ...

  3. MySQL会创建临时表的几种情况

    1.UNION查询: 2.用到TEMPTABLE算法或者是UNION查询中的视图: 3.ORDER BY和GROUP BY的子句不一样时: 4.表连接中,ORDER BY的列不是驱动表中的:(指定了联 ...

  4. VC6_导入lib库

    http://www.cnblogs.com/webcyz/p/3525166.html 2. 导入lib库.导入的方法很多方法1) 直接用project>add to project>f ...

  5. 《A_Pancers》团队项目用户验收评审

    团队项目用户验收评审 一.关于源代码管理的10 个问题: 1.你的团队的源代码控制在哪里?用的是什么系统?如何处理文件的锁定问题? 我们的项目都在github上面,用的win10系统,并且我们的文件没 ...

  6. Topless eclipse导入myeclipse的web项目没法识别问题解决

    1.进入项目目录,找到.project文件,打开. 2.找到<natures>...</natures>代码段. 3.在第2步的代码段中加入如下标签内容并保存: <nat ...

  7. FASTQ 数据质量统计工具

    主流工具: FastQC fqcheck readfq 拿到测序数据的第一步就是做质量控制 fqcheck之后得到的结果: 它会统计每条reads,按read 1-100位点计算每个位置的ACGTN含 ...

  8. English trip -- Phonics 6 元音字母 u + Unit 5 B课 review

    Vowel  u [ʌ]  闭音节 bunny cut bug mushroom lunch ar er ur or ir = R (读音类似儿) e.g. dollar  美元 collar  n. ...

  9. 3.3 x86指令简介

    计算机组成 3 指令系统体系结构 3.3 x86指令简介 x86指令种类繁多,数量庞大.在这一节我们将会学习x86指令的分类,并分析其中最为基础的一部分指令. 通常一个指令系统主要包括这几类指令.运算 ...

  10. Skills CodeForces - 614D (贪心)

    链接 大意: $n$门课, 第$i$门分数$a_i$, 可以增加共$m$分, 求$cnt_{mx}*cf+mi*cm$的最大值 $cnt_{mx}$为满分的科目数, $mi$为最低分, $cf$, $ ...