![输出信息
<body>
<link rel="base.css" type="text/css" charset="utf-8" />
基础css和JavaScript
<script type="text/javascript" charset="utf-8" src="base.js"></script>
<div id='frame'><!--框架开始-->
<div id="top">...</div><!--顶部导航-->
<div id="menu">...</div><!--左侧-->
<div id="content"><!--此处为下面的PageLet占位-->
<div id="pagelet_1"></div>
框架DIV
<div id="pagelet_2"></div>
</div>
<div id="right">...</div>
<div id="bottom">...</div><!--底部-->
</div><!--框架结束-->
</body>
<script type="text/javascript" charset="utf-8">
pl.v(html_ pagelet_1, "pagelet_1",[pagelet_1.css'], ["pagelet_1.js "]); PageLet信息
</script>
……. //以下省略PageLet2、3等等
17](https://image.slidesharecdn.com/bigpipe-110406131914-phpapp01/85/Bigpipe-17-320.jpg)
![Php生成拼合好的页
PageLet1信息 面html代码
• Html：html_ pagelet_1, 页面框架中的空
DIV之ID
• Box："pagelet_1",
• Css：['http://v4.com/pagelet_1.css'], CSS文件路径
• Js: ["http://js.wcdn.cn/pagelet_1.js "]); JS路径
18](https://image.slidesharecdn.com/bigpipe-110406131914-phpapp01/85/Bigpipe-18-320.jpg)
使用Bigpipe提升浏览速度
- 1. 使用BigPipe提升浏览速度 微博平台-CDC-吴侃 wukan@staff.sina.com.cn
- 2. 概要 • 背景 – 基础概念 • BigPipe • 回顾 2
- 3. 基本概念 – 流水线技术 CPU的流水线技术 （Pipeline） 3
- 4. 基础概念 – 低标量CPU的处理过程 • 低标量CPU的处理过程 4
- 5. 基础概念 - CPU 的指令流水线技术 • 基本的流水线结构 5
- 6. 基础概念 - Chunk Chunk 6
- 7. 基础概念 - Chunk 和 Flush • 在HTTP1.1中，使用trunked编码 的浏览器丌需要等到内容全部下 载完成,只要接收到一个chunked 块就可解析页面 • Transfer-Encoding: chunked 7
- 8. 基础概念 - Chunk 和 Flush 使用chunk的例子： http://www.cnblogs.com/BearsTaR/archive/20 10/05/19/flush_chunk_encoding.html flush让页面分块,逐步呈现 8
- 9. 1. BigPipe简介 2. BigPipe实践 3. BigPipe实践结果 9
- 10. 为什么使用BigPipe • 在FaceBook的使用中，将用户感受到的延迟 时间降低一半。TTI(Time-to-Interact) 10
- 11. 定义BigPipe • BigPipe是一个重新设计的劢态网页服务体系。 • 将页面分解成一个个Pagelet，然后通过Web服 务器和浏览器之间建立管道，进行分段输出 （就像流水线）。 • BigPipe丌需要改变现有的网络浏览器或服务器。 11
- 12. 基础概念 - Chunk 和 Flush BigPipe使服务器端并发处理 12
- 13. BigPipe带来什么 • PHP 无需等到页面所有 Pagelet 的API都读取 执行完，才输出到浏览器，服务器端不浏 览器端并行处理，加快了页面显示。 • Pagelet的输出顺序可以由PHP控制，及早输 出用户关心的模块。 13
- 14. BigPipe带来什么 服务器 网络 浏览器 PageLet1 传输 PageLet2 传输 浏览器 PageLet3 传输 14
- 16. 切分页面 16
- 17. 输出信息 <body> <link rel="base.css" type="text/css" charset="utf-8" /> 基础css和JavaScript <script type="text/javascript" charset="utf-8" src="base.js"></script> <div id='frame'><!--框架开始--> <div id="top">...</div><!--顶部导航--> <div id="menu">...</div><!--左侧--> <div id="content"><!--此处为下面的PageLet占位--> <div id="pagelet_1"></div> 框架DIV <div id="pagelet_2"></div> </div> <div id="right">...</div> <div id="bottom">...</div><!--底部--> </div><!--框架结束--> </body> <script type="text/javascript" charset="utf-8"> pl.v(html_ pagelet_1, "pagelet_1",[pagelet_1.css'], ["pagelet_1.js "]); PageLet信息 </script> ……. //以下省略PageLet2、3等等 17
- 18. Php生成拼合好的页 PageLet1信息 面html代码 • Html：html_ pagelet_1, 页面框架中的空 DIV之ID • Box："pagelet_1", • Css：['http://v4.com/pagelet_1.css'], CSS文件路径 • Js: ["http://js.wcdn.cn/pagelet_1.js "]); JS路径 18
- 19. 19
- 20. BigPipe体系的三种模式 • 支持BigPipe • 丌支持BigPipe • 劢态刷新PageLet 20
- 21. 支持BigPipe（默认模式） • 根据PageLet的重要性产生和flush输出 • 过程：首先输出页面框架。然后由 JavaScript填写和渲染页面内容 21
- 22. 不支持BigPipe • 页面丌支持JavaScript • 或者丌在BigPipe体系下的页面 • 过程：页面由PHP直接产生及输出 22
- 23. 动态更新PageLet • 劢态切换页面，框架丌变，只更新PageLet • 过程：PHP直接输出PageLet信息，JavaScript 直接更新的现有框架上 23
- 24. （感谢李明同学手绘） 24
- 26. • 普通方式 26
- 27. • BigPipe方式 27
- 28. 使用的效果 • 下图是FaceBook传统模式和BigPipe性能数据 比较图，该图显示BigPipe使用户在大多数 浏览器中感受到的延迟减少了一半。 28
- 29. 遇到的问题 • 劢态刷新页面，如何产生地址栏变化，浏 览器的历叱记录 29
- 30. 使用的范围 • BigPipe丌具备普适性 • 适用于： 1. 第一个请求时间较长 2. 页面上的劢态内容可以划分在多个区块内 显示，且各个区块之间的关系丌大 30
- 31. 将来 未来 • 超标量 • HTML5 Web Socket 31
- 32. 32
- 33. 总结回顾 • BigPipe概念产生的背景 • BigPipe技术的定义 • BigPipe的实践过程 • BigPipe的实践结果 • BigPipe实践中遇到的问题以及适用范围 • 将来的发展 33