Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

使用Bigpipe提升浏览速度

使用BigPipe提升浏览速度

  • Login to see the comments

使用Bigpipe提升浏览速度

  1. 1. 使用BigPipe提升浏览速度 微博平台-CDC-吴侃 wukan@staff.sina.com.cn
  2. 2. 概要• 背景 – 基础概念• BigPipe• 回顾 2
  3. 3. 基本概念 – 流水线技术 CPU的流水线技术 (Pipeline) 3
  4. 4. 基础概念 – 低标量CPU的处理过程• 低标量CPU的处理过程 4
  5. 5. 基础概念 - CPU 的指令流水线技术• 基本的流水线结构 5
  6. 6. 基础概念 - Chunk Chunk 6
  7. 7. 基础概念 - Chunk 和 Flush• 在HTTP1.1中,使用trunked编码 的浏览器丌需要等到内容全部下 载完成,只要接收到一个chunked 块就可解析页面• Transfer-Encoding: chunked 7
  8. 8. 基础概念 - Chunk 和 Flush使用chunk的例子:http://www.cnblogs.com/BearsTaR/archive/2010/05/19/flush_chunk_encoding.htmlflush让页面分块,逐步呈现 8
  9. 9. 1. BigPipe简介2. BigPipe实践3. BigPipe实践结果 9
  10. 10. 为什么使用BigPipe• 在FaceBook的使用中,将用户感受到的延迟 时间降低一半。TTI(Time-to-Interact) 10
  11. 11. 定义BigPipe• BigPipe是一个重新设计的劢态网页服务体系。• 将页面分解成一个个Pagelet,然后通过Web服 务器和浏览器之间建立管道,进行分段输出 (就像流水线)。• BigPipe丌需要改变现有的网络浏览器或服务器。 11
  12. 12. 基础概念 - Chunk 和 Flush BigPipe使服务器端并发处理 12
  13. 13. BigPipe带来什么• PHP 无需等到页面所有 Pagelet 的API都读取 执行完,才输出到浏览器,服务器端不浏 览器端并行处理,加快了页面显示。• Pagelet的输出顺序可以由PHP控制,及早输 出用户关心的模块。 13
  14. 14. BigPipe带来什么 服务器 网络 浏览器 PageLet1 传输 PageLet2 传输 浏览器 PageLet3 传输 14
  15. 15. • BigPipe页面输出信息• BigPipe的三种模式 15
  16. 16. 切分页面 16
  17. 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. 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. 19
  20. 20. BigPipe体系的三种模式• 支持BigPipe• 丌支持BigPipe• 劢态刷新PageLet 20
  21. 21. 支持BigPipe(默认模式)• 根据PageLet的重要性产生和flush输出• 过程:首先输出页面框架。然后由 JavaScript填写和渲染页面内容 21
  22. 22. 不支持BigPipe• 页面丌支持JavaScript• 或者丌在BigPipe体系下的页面• 过程:页面由PHP直接产生及输出 22
  23. 23. 动态更新PageLet• 劢态切换页面,框架丌变,只更新PageLet• 过程:PHP直接输出PageLet信息,JavaScript 直接更新的现有框架上 23
  24. 24. (感谢李明同学手绘) 24
  25. 25. 更多细节:https://svn1.intra.sina.com.cn/weibo/ria/t4/docs/技术文档/BigPipe 25
  26. 26. • 普通方式 26
  27. 27. • BigPipe方式 27
  28. 28. 使用的效果• 下图是FaceBook传统模式和BigPipe性能数据 比较图,该图显示BigPipe使用户在大多数 浏览器中感受到的延迟减少了一半。 28
  29. 29. 遇到的问题• 劢态刷新页面,如何产生地址栏变化,浏 览器的历叱记录 29
  30. 30. 使用的范围• BigPipe丌具备普适性• 适用于:1. 第一个请求时间较长2. 页面上的劢态内容可以划分在多个区块内 显示,且各个区块之间的关系丌大 30
  31. 31. 将来未来• 超标量• HTML5 Web Socket 31
  32. 32. 32
  33. 33. 总结回顾• BigPipe概念产生的背景• BigPipe技术的定义• BigPipe的实践过程• BigPipe的实践结果• BigPipe实践中遇到的问题以及适用范围• 将来的发展 33

×