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. 【Python】【正则】

    1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法,但功能十 ...

  2. Java中的RTTI

    RTTI可以帮助我们在运行时识别对象和类的信息. 一般传统的RTTI有三种实现方式: 1. 向上转型或向下转型(upcasting and downcasting),在java中,向下转型(父类转成子 ...

  3. python 阶乘

    product= i= : product=i*product print('i=%d' %i,end='') print('\tproduct=%d' %product) i+= print('\n ...

  4. c++ 二分法查找（binary_search）

    #include <iostream> // cout #include <algorithm> // binary_search, sort #include <vec ...

  5. FastJson之JsonObject, JsonString, JavaBean,List快速转换

    // 将json字符串转换为json对象 JSONObject jsonObject = JSON.parseObject(jsonStr); // {"retState":&qu ...

  6. 原生 js 时钟实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. SpringBoot中的数据库连接池

    内置的连接池 目前Spring Boot中默认支持的连接池有dbcp,dbcp2, tomcat, hikari三种连接池. 数据库连接可以使用DataSource池进行自动配置. 由于Tomcat数 ...

  8. 查询ORACLE存储关联表

    SELECT DISTINCT * FROM user_sourceWHERE TYPE = 'PROCEDURE'AND upper(text) LIKE '%PS_KL_ABS_002_DATA% ...

  9. android--------微信 Tinker 热修复 （三）

    前面简单介绍了一下Tinker热修复的使用,包含debug和release,今天就来分享一下微信针对Tinker热修复提供的一个平台,TinkerPatch补丁管理后台. 1:什么是TinkerPat ...

  10. Type cvc-complex-type.2.4.a: Invalid content was found starting with element 'build'.错误的解决方法

    项目突然间爆出了这样的问题: Description Resource Path Location Typecvc-complex-type.2.4.a: Invalid content was fo ...