<ul>微博新版中的 </ul><ul>BigPipe 技术后端实现分享 </ul><ul>史罗丹  @Rodin 高级开发工程师 @ 新浪微博 [email_address] </ul>
<ul>日程 </ul><ul><li>概念
实现
实战问题
展望 </li></ul>
<ul>概念 </ul><ul>BigPipe 是 </ul><ul><li>重新设计的 Web 服务处理过程
利用流水线思想降低网页的用户感知延迟
AJAX 模块化方式的性能加强版 </li></ul>
<ul>概念 </ul>
<ul>概念 </ul>
<ul>概念 </ul>
<ul>概念 </ul><ul><li>传统页面处理过程 </li></ul>
<ul>概念 </ul><ul><li>AJAX 模块化处理过程 </li></ul>
<ul>概念 </ul><ul><li>BigPipe处理过程 </li></ul>
<ul>概念 </ul><ul><li>输出示例  -  普通模式
<html>
<div id=&quot;pl_left&quot;>左侧内容</div>
<div id=&quot;pl_main&quot;>主要内容</div>
</html> </li></ul>
<ul>概念 </ul><ul><li>输出示例  - BigPipe 模式
<html>
<script src=&quot;BigPipe.js&quot;></script>
<div id=&quot;pl_left&quot;></div>
<div id=&quot;pl_main&quot;></div>
<script>bp.pagelet({'id': 'pl_left' , 'html' : ' 左侧内容 '})</script>
<script>bp.pagelet({'id': 'pl_main' , 'html' : ' 主要内容 '})</script>
</html> </li></ul>
<ul>概念 </ul>传统模式 (BP 关闭 ) 流水线模式 (BP 开启 ) 248ms => 70 ms
概念 <ul><li>好处 </li></ul><ul><li>用户更快看到部分内容
减少HTTP请求
Pagelet处理可并发 </li></ul><ul><li>坏处 </li></ul><ul><li>强制页面模块化
数据请求层封装
部分运算移动到浏览器端
浏览器兼容性 </li></ul>
<ul>概念 </ul><ul>伴生技术 </ul><ul><li>Quickling </li></ul><ul><ul><li>将所有点击加载异步化 </li></ul></ul><ul><li>PageCache </li></ul><u...
<ul>广告 </ul><ul><li>#Velocity China 2011#
《使用 BigPipe 提升浏览速度—流水线技术在新浪微博的实践》
吴侃 @v4ria
前端技术经理 </li></ul>
Upcoming SlideShare
Loading in …5
×

新浪微博的BigPipe后端实现技术分享——11月26日淘宝aDev技术沙龙

5,982 views

Published on

在11月26日淘宝aDev技术沙龙做的新浪微博新版中的BigPipe服务器端实现技术的分享。

Published in: Technology
0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,982
On SlideShare
0
From Embeds
0
Number of Embeds
615
Actions
Shares
0
Downloads
180
Comments
0
Likes
25
Embeds 0
No embeds

No notes for slide

新浪微博的BigPipe后端实现技术分享——11月26日淘宝aDev技术沙龙

  1. 1. <ul>微博新版中的 </ul><ul>BigPipe 技术后端实现分享 </ul><ul>史罗丹 @Rodin 高级开发工程师 @ 新浪微博 [email_address] </ul>
  2. 2. <ul>日程 </ul><ul><li>概念
  3. 3. 实现
  4. 4. 实战问题
  5. 5. 展望 </li></ul>
  6. 6. <ul>概念 </ul><ul>BigPipe 是 </ul><ul><li>重新设计的 Web 服务处理过程
  7. 7. 利用流水线思想降低网页的用户感知延迟
  8. 8. AJAX 模块化方式的性能加强版 </li></ul>
  9. 9. <ul>概念 </ul>
  10. 10. <ul>概念 </ul>
  11. 11. <ul>概念 </ul>
  12. 12. <ul>概念 </ul><ul><li>传统页面处理过程 </li></ul>
  13. 13. <ul>概念 </ul><ul><li>AJAX 模块化处理过程 </li></ul>
  14. 14. <ul>概念 </ul><ul><li>BigPipe处理过程 </li></ul>
  15. 15. <ul>概念 </ul><ul><li>输出示例 - 普通模式
  16. 16. <html>
  17. 17. <div id=&quot;pl_left&quot;>左侧内容</div>
  18. 18. <div id=&quot;pl_main&quot;>主要内容</div>
  19. 19. </html> </li></ul>
  20. 20. <ul>概念 </ul><ul><li>输出示例 - BigPipe 模式
  21. 21. <html>
  22. 22. <script src=&quot;BigPipe.js&quot;></script>
  23. 23. <div id=&quot;pl_left&quot;></div>
  24. 24. <div id=&quot;pl_main&quot;></div>
  25. 25. <script>bp.pagelet({'id': 'pl_left' , 'html' : ' 左侧内容 '})</script>
  26. 26. <script>bp.pagelet({'id': 'pl_main' , 'html' : ' 主要内容 '})</script>
  27. 27. </html> </li></ul>
  28. 28. <ul>概念 </ul>传统模式 (BP 关闭 ) 流水线模式 (BP 开启 ) 248ms => 70 ms
  29. 29. 概念 <ul><li>好处 </li></ul><ul><li>用户更快看到部分内容
  30. 30. 减少HTTP请求
  31. 31. Pagelet处理可并发 </li></ul><ul><li>坏处 </li></ul><ul><li>强制页面模块化
  32. 32. 数据请求层封装
  33. 33. 部分运算移动到浏览器端
  34. 34. 浏览器兼容性 </li></ul>
  35. 35. <ul>概念 </ul><ul>伴生技术 </ul><ul><li>Quickling </li></ul><ul><ul><li>将所有点击加载异步化 </li></ul></ul><ul><li>PageCache </li></ul><ul><ul><li>浏览器端缓存内容 </li></ul></ul>
  36. 36. <ul>广告 </ul><ul><li>#Velocity China 2011#
  37. 37. 《使用 BigPipe 提升浏览速度—流水线技术在新浪微博的实践》
  38. 38. 吴侃 @v4ria
  39. 39. 前端技术经理 </li></ul>
  40. 40. <ul>日程 </ul><ul><li>概念
  41. 41. 实现
  42. 42. 实战问题
  43. 43. 展望 </li></ul>
  44. 44. <ul>实现 </ul><ul>服务器端任务 </ul><ul><ul><li>组织 Pagelets
  45. 45. 管理 Pagelet 依赖
  46. 46. 获取数据
  47. 47. 判断输出模式
  48. 48. 生成 HTTP 响应 </li></ul></ul><ul>前端任务 </ul><ul><ul><li>JS/CSS 拆分
  49. 49. JS/CSS 加载卸载
  50. 50. Dom 处理
  51. 51. Quickling
  52. 52. 历史管理 </li></ul></ul>
  53. 53. <ul>实现 </ul><ul><li>树形组织 Pagelets
  54. 54. Pagelet 储存自身依赖
  55. 55. Pagelet 提供数据获取方法
  56. 56. Pagelet 结构与处理逻辑分离 </li></ul>
  57. 57. <ul>实现 </ul><ul>树形组织 Pagelets (Composite) </ul>
  58. 58. <ul>实现 </ul>
  59. 59. <ul>实现 </ul><ul>Pagelet 类 </ul><ul><ul><li>依赖的 css
  60. 60. 依赖的 js 脚本
  61. 61. 所需 html 模板
  62. 62. 数据准备方法 </li></ul></ul>
  63. 63. <ul>实现 </ul><ul>内容处理与容器分离 (Visitor) </ul>
  64. 64. <ul>实现 </ul><ul>模板处理 </ul><ul><li>HTML 模板中包含子 pagelet 占位符 </li></ul>
  65. 65. <ul>实现 </ul><ul>输出模式 </ul><ul><ul><li>传统 Traditonal
  66. 66. 流水线 Streamline
  67. 67. 随机流水线 Random </li></ul></ul>
  68. 68. <ul>实现 </ul><ul>输出模式 </ul><ul>传统 </ul><ul>流水线 </ul><ul>随机 </ul><ul>访问次序 </ul><ul>先子后父 </ul><ul>先父后子 </ul><ul>任意 </ul><ul>输出方式 </ul><ul>同时输出 </ul><ul>父先输出 子后输出 </ul><ul>父先输出 子后输出 </ul><ul><ul><li>深度优先遍历 </li></ul></ul>
  69. 69. <ul>实现 </ul><ul>总结 </ul><ul><ul><li>树形组织 Pagelets
  70. 70. Pagelet 储存自身依赖
  71. 71. Pagelet 提供数据获取方法
  72. 72. Pagelet 容器与处理逻辑分离
  73. 73. 深度优先遍历 </li></ul></ul>
  74. 74. <ul>日程 </ul><ul><li>概念
  75. 75. 实现
  76. 76. 实战问题
  77. 77. 展望 </li></ul>
  78. 78. <ul>问题 </ul><ul><li>页面区域需要单独划分成 pagelet 以便重用和调整
  79. 79. 同时又作为页面框架的一部分直接输出 </li></ul><ul>静态 pagelet </ul>
  80. 80. <ul>问题 </ul><ul><li>跨页面更新内容或仅更新部分内容
  81. 81. 不需要输出脚本框架和页面框架 </li></ul><ul>ScriptOnly 模式 </ul>
  82. 82. <ul>问题 </ul><ul><li>随机流水线模式输出
  83. 83. 数据并行处理 </li></ul>异步 IO + 事件回调 (纯 PHP 实现) <ul><li>socket_select/curl_multi_select </li></ul>
  84. 84. <ul>问题 </ul><ul><li>IE6 Bug :脚本中止错误 </li></ul>强制 IE6 用户使用传统模式
  85. 85. <ul>问题 </ul><ul><li>Pagelet 数据获取失败 </li></ul>单 Pagelet 失效
  86. 86. <ul>问题 </ul><ul><li>Pagelet 的数据希望可以继承到子 Pagelet
  87. 87. 但对父 Pagelet 不可见 </li></ul><ul>数据“伪作用域” </ul>
  88. 88. <ul>问题 </ul><ul><li>其他琐碎 </li></ul><ul><ul><li>输出模式判断 </li></ul></ul><ul><ul><ul><li>浏览器检测
  89. 89. Noscript 标签跳转
  90. 90. Cookie 识别 </li></ul></ul></ul><ul><ul><li>gzip 模块不影响输出
  91. 91. HTTP 1.1 & 1.0 兼容 </li></ul></ul>
  92. 92. <ul>日程 </ul><ul><li>概念
  93. 93. 实现
  94. 94. 实战问题
  95. 95. 展望 </li></ul>
  96. 96. <ul>展望 </ul><ul><li>全站 BigPipe
  97. 97. Pagelet 优先级
  98. 98. 随机模式输出 ( 待上线 )
  99. 99. JS/CSS 资源的全局管理 </li></ul>
  100. 100. <ul>Q&A </ul><ul>THANKS <li>Q? </li></ul>
  101. 101. <ul>讨论 </ul><ul>适用场景? <li>BigPipe 改进方案? </li></ul>

×