BigPipe 大的页面分割成一个一个管道

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和其它一些优化手段，

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

参考资料

BigPipe: Pipelining web pages for high performance
BigPipe学习研究
Facebook让网站速度提升一倍的BigPipe技术分析
浏览器渲染原理

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

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

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

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

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

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

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

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

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

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

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

转载于:https://www.cnblogs.com/dhsz/p/6374024.html

BigPipe 大的页面分割成一个一个管道相关推荐

python 把中文句子分割成一个一个的字（英文适用）
cn = [one for one in '习惯性综合征'] print(cn)en = [char for char in 'I am very handsome'] print(en)
【电脑常用办公软件】万彩办公大师教程丨PDF页面分割帮助文档
关于万彩办公大师-页面分割页面分割是一个简单.快速的桌面实用程序, 它允许将较大的pdf 文档页面分割成多个较小的页面.它提供可视分割标记编辑器 (垂直或水平分割线), 以方便分割PDF页面. 典型 ...
详细说明通过kettke对csv文件转换的操作步骤_如何将多页面pdf分割成一页一页的PDF文件...
经常会有小伙伴问我,如何将多页面的PDF文件拆分成一个个的PDF文件?例如有5个页面的PDF文件,一次性拆分导出生成5个单页面的PDF文件? PDF文件是我们日常工作学习中经常要用到的,有时候PDF文 ...
如何将多页面pdf分割成一页一页的PDF文件
经常会有小伙伴问我,如何将多页面的PDF文件拆分成一个个的PDF文件?例如有5个页面的PDF文件,一次性拆分导出生成5个单页面的PDF文件? PDF文件是我们日常工作学习中经常要用到的,有时候PDF文 ...
VB 实现大文件的分割与恢复,引用 ADODB.Stream 提供一个过程代码
'VB 实现大文件的分割与恢复,引用 ADODB.Stream 提供一个过程: '要引用 Microsoft ActiveX Data Objects 2.5 Libary '或 Microsoft ...
PDF分割成一页一页的怎么做？分享两种分割页面小妙招
如何将PDF文件分割成一页一页的呢?大家在使用PDF文件的过程中,肯定会遇到需要编辑文件的时候,有时是文件的内容出现了错误,有时是需要合并或者分割页面,就比如我们遇到需要将PDF文件分割成一页一页的时 ...
从微博的改版谈网页重构——bigpipe中的页面构建优化
题记:搞互联网的同学也许都知道一个数字--4秒,有研究表明,如果一个网站没有在4秒之内加载完成,用户就会感到焦躁不愉快,并离开这个网站(数据来自性能测试网站http://gtmetrix.com/). ...
前端大屏页面布局经验
前端大屏页面布局经验额··· 其实谈不上经验,只能说是开发过程中值得记录一下的东西,不一定是对的. 分辨率首先一点,大屏对分辨率和显示器是有要求的,因为他不像一般的页面,出个纵向的滚动条啥的无所谓 ...
VIPS:基于视觉的页面分割算法[微软下一代搜索引擎核心分页算法]
VIPS:基于视觉的页面分割算法[微软下一代搜索引擎核心分页算法] VIPS:基于视觉的页面分割算法[微软下一代搜索引擎核心分页算法] - tingya的专栏 - 博客频道 - CSDN.NET VI ...

BigPipe 大的页面分割成一个一个管道

参考资料

BigPipe 大的页面分割成一个一个管道相关推荐

最新文章

热门文章