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精度问题

    JavaScript数字精度丢失问题总结 现象 原因 计算机的二进制实现和位数限制有些数无法有限表示.就像一些无理数不能有限表示,如 圆周率 3.1415926...,1.3333... 等.JS 遵 ...

  2. makefile 中的符号替换（$@、$^、$<、$?）

    Makefile  $@, $^, $< $@  表示目标文件$^  表示所有的依赖文件$<  表示第一个依赖文件$?  表示比目标还要新的依赖文件列表 如一个目录下有如下文件: $ ls ...

  3. Nginx 随笔

    使用包管理工具安装nginx Linux(基于deb) sudo apt-get install nginx Linux(基于rpm) sudo yum install nginx FreeBSD s ...

  4. VC_可再发行组件包

    1. 中文 : 可再发行组件包 英文 : Redistributable Package 例子 : Download Microsoft Visual C++ 2010 Redistributable ...

  5. 对不队—— Alpha冲刺

    第三天  日期:2018/6/18 一. 今日完成任务:会议内容管理部分 冯晓.马思远:会议网站栏目管理开发,博客撰写 王爽.彭辉:参会人员管理开发 吴琼.郝延婷:审稿专家管理开发 1.1会议管理界面 ...

  6. node - web 服务器 、server 服务器

    node 作为服务端 - 基本使用 1. web 服务器 web.html <!DOCTYPE html> <html> <head> <meta chars ...

  7. 网站链接facebook 拿新的post

    $http({ method: "GET", url: "https://graph.facebook.com/oauth/access_token?client_id= ...

  8. Java的JDK和JRE

    Java的JDK和JRE 1.计算机交互方式 图形化界面(Graphical User Interface GUI) 命令行方式(Command Line Interface CLI) 2.Java语 ...

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

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

  10. 快速搭建一个简易的KMS 服务

    xu言: 之前,闹的沸沸扬扬的KMS激活工具自身都存在问题的事.让我们对以前的什么小马激活.kms激活.各种激活工具都去打了一个深深的“?”,到底哪些能用.哪些不能用.有些还注明的里面必须要关闭杀毒软 ...