微博新版中的 BigPipe技术后端实现分享 史罗丹 Rodin 高级开发.pptVIP

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