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. 项目梳理7——Nuget包管理

    1.添加Nuget源 nuget包管理.生成自己的nuget包.向 NuGet 添加更多程序包源 nuget的所有使用介绍 打包示例 .nuspec文件声明的是对应NuGet包的以下内容: 包更新命令 ...

  2. 【Python】【元编程】【三】【元类】

    '''# str. type 和 LineItem 是object 的子类 str. object 和 LineItem 是 type 的实例,因为它们都是类object 类和 type 类之间的关系 ...

  3. java基础深入解析基本类型

    一.基本类型的简介 基本类型的两条准则: Java中,如果对整数不指定类型,默认时int类型,对小数不指定类型,默认是double类型. 基本类型由小到大,可以自动转换,但是由大到小,则需要强制类型转 ...

  4. 批量删除Redis数据库中的Key

    批量删除KeyRedis 中有删除单个 Key 的指令 DEL,但好像没有批量删除 Key 的指令,不过我们可以借助 Linux 的 xargs 指令来完成这个动作 redis-cli keys &q ...

  5. MyEclipse快捷键大全【转】

    -------------------------------------MyEclipse 快捷键1(CTRL)-------------------------------------Ctrl+1 ...

  6. hdu 5724-Chess(状态压缩+sg函数)

    hdu 5724-Chess 代码: #include<bits/stdc++.h> using namespace std; ; <<N]; bool S[N]; void ...

  7. Unity游戏中关于伤害范围的计算

    1.纯数学计算 范围计算 + 方向计算: 先将不在伤害范围的敌人排除掉,再计算处于伤害范围并且角度正确的敌人. 以上的计算是以人物的中心来计算的, 所以这中方式就有些局限性了,比如:一个四足怪物,只有 ...

  8. 雷林鹏分享：C# 泛型（Generic）

    C# 泛型(Generic) 泛型(Generic) 允许您延迟编写类或方法中的编程元素的数据类型的规范,直到实际在程序中使用它的时候.换句话说,泛型允许您编写一个可以与任何数据类型一起工作的类或方法 ...

  9. (GoRails) 用app/decorators来取代app/helpers; delegate()方法

    视频:https://gorails.com/episodes/decorators-from-scratch?autoplay=1 装饰设置风格:把Model层变的干净,但不使用app/helper ...

  10. CentOS服务器安装FFmpeg指南

    CentOS服务器安装FFmpeg指南 服务器系统环境为:CentOS 6.5(final): 在服务器成功安装FFmpeg颇废了一番功夫,总结一下成功安装的过程,希望对大家有用 ^_^ : Ps:使 ...