Big pipe backend2

706 views

Published on

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

No Downloads
Views
Total views
706
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
12
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Big pipe backend2

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

×