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后端实现技术分享——11月26日淘宝aDev技术沙龙

6,300 views

Published on

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

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/sr8x45e } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/sr8x45e } ......................................................................................................................... Download Full doc Ebook here { https://tinyurl.com/sr8x45e } ......................................................................................................................... Download PDF EBOOK here { https://tinyurl.com/sr8x45e } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/sr8x45e } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/sr8x45e } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

新浪微博的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>

×