1 / 35

微博新版中的 BigPipe技术后端实现分享

微博新版中的 BigPipe技术后端实现分享. 史罗丹 @Rodin 高级开发工程师@新浪微博 luodan@staff.sina.com.cn. 日程. 概念 实现 实战问题 展望. 概念. BigPipe是 重新设计的Web服务处理过程 利用流水线思想降低网页的用户感知延迟 AJAX模块化方式的性能加强版. 概念. 概念. 概念. 概念. 传统页面处理过程. 概念. AJAX 模块化处理过程. 概念. BigPipe处理过程. 概念. 输出示例 - 普通模式 <html> <div id="pl_left">左侧内容</div>

ebony-donovan
Download Presentation

微博新版中的 BigPipe技术后端实现分享

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 微博新版中的 BigPipe技术后端实现分享 史罗丹 @Rodin 高级开发工程师@新浪微博 luodan@staff.sina.com.cn

  2. 日程 • 概念 • 实现 • 实战问题 • 展望

  3. 概念 BigPipe是 • 重新设计的Web服务处理过程 • 利用流水线思想降低网页的用户感知延迟 • AJAX模块化方式的性能加强版

  4. 概念

  5. 概念

  6. 概念

  7. 概念 传统页面处理过程

  8. 概念 AJAX 模块化处理过程

  9. 概念 BigPipe处理过程

  10. 概念 输出示例 - 普通模式 <html> <div id="pl_left">左侧内容</div> <div id="pl_main">主要内容</div> </html>

  11. 概念 输出示例 - BigPipe模式 <html> <script src="BigPipe.js"></script> <div id="pl_left"></div> <div id="pl_main"></div> <script>bp.pagelet({'id': 'pl_left' , 'html' : '左侧内容'})</script> <script>bp.pagelet({'id': 'pl_main' , 'html' : '主要内容'})</script> </html>

  12. 流水线模式(BP开启) 概念 • 传统模式(BP关闭) 248ms => 70 ms

  13. 坏处 强制页面模块化 数据请求层封装 部分运算移动到浏览器端 浏览器兼容性 概念 好处 • 用户更快看到部分内容 • 减少HTTP请求 • Pagelet处理可并发

  14. 概念 伴生技术 • Quickling • 将所有点击加载异步化 • PageCache • 浏览器端缓存内容

  15. 广告 • #Velocity China 2011# • 《使用BigPipe提升浏览速度—流水线技术在新浪微博的实践》 • 吴侃@v4ria • 前端技术经理

  16. 日程 • 概念 • 实现 • 实战问题 • 展望

  17. 前端任务 JS/CSS拆分 JS/CSS加载卸载 Dom处理 Quickling 历史管理 实现 服务器端任务 • 组织Pagelets • 管理Pagelet依赖 • 获取数据 • 判断输出模式 • 生成HTTP响应

  18. 实现 树形组织Pagelets (Composite)

  19. 实现

  20. 实现 Pagelet类 • 依赖的css • 依赖的js脚本 • 所需html模板 • 数据准备方法

  21. 实现 内容处理与容器分离(Visitor)

  22. 实现 模板处理 • HTML模板中包含子pagelet占位符

  23. 实现 输出模式 • 传统 Traditonal • 流水线 Streamline • 随机流水线 Random

  24. 实现 输出模式 深度优先遍历

  25. 实现 总结 • 树形组织Pagelets • Pagelet储存自身依赖 • Pagelet提供数据获取方法 • Pagelet容器与处理逻辑分离 • 深度优先遍历

  26. 日程 • 概念 • 实现 • 实战问题 • 展望

  27. 问题 • 跨页面更新内容或仅更新部分内容 • 不需要输出脚本框架和页面框架 ScriptOnly模式

  28. 问题 • 随机流水线模式输出 • 数据并行处理 异步IO +事件回调 （纯PHP实现） socket_select/curl_multi_select

  29. 问题 • IE6 Bug ：脚本中止错误 强制IE6用户使用传统模式

  30. 问题 • Pagelet数据获取失败 单Pagelet失效

  31. 问题 • 其他琐碎 • 输出模式判断 • 浏览器检测 • Noscript标签跳转 • Cookie识别 • gzip模块不影响输出 • HTTP 1.1 & 1.0兼容

  32. 日程 • 概念 • 实现 • 实战问题 • 展望

  33. 展望 • 全站BigPipe • Pagelet优先级 • 随机模式输出(待上线) • JS/CSS资源的全局管理

  34. THANKS Q? Q&A

More Related