BigPipe_Backend2[精品].pptxVIP

微博新版中的BigPipe技术后端实现分享史罗丹 @Rodin高级开发工程师@新浪微博luodan@日程概念实现实战问题展望概念BigPipe是重新设计的Web服务处理过程利用流水线思想降低网页的用户感知延迟AJAX模块化方式的性能加强版概念概念概念传统页面处理过程概念AJAX 模块化处理过程概念BigPipe处理过程概念输出示例 - 普通模式htmldiv id=pl_left左侧内容/divdiv id=pl_main主要内容/div/html概念输出示例 - BigPipe模式htmlscript src=BigPipe.js/scriptdiv id=pl_left/divdiv id=pl_main/divscriptbp.pagelet({id: pl_left , html : 左侧内容})/scriptscriptbp.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历史管理实现树形组织PageletsPagelet储存自身依赖Pagelet提供数据获取方法Pagelet结构与处理逻辑分离实现树形组织Pagelets (Composite)实现实现Pagelet类依赖的css依赖的js脚本所需html模板数据准备方法实现内容处理与容器分离(Visitor)实现模板处理HTML模板中包含子pagelet占位符实现输出模式传统 Traditonal流水线 Streamline随机流水线 Random实现输出模式传统流水线随机访问次序先子后父先父后子任意输出方式同时输出父先输出子后输出父先输出子后输出深度优先遍历实现总结树形组织PageletsPagelet储存自身依赖Pagelet提供数据获取方法Pagelet容器与处理逻辑分离深度优先遍历日程概念实现实战问题展望问题页面区域需要单独划分成pagelet以便重用和调整同时又作为页面框架的一部分直接输出 静态pagelet问题跨页面更新内容或仅更新部分内容不需要输出脚本框架和页面框架 ScriptOnly模式问题随机流水线模式输出数据并行处理 异步IO +事件回调 （纯PHP实现） socket_select/curl_multi_select问题IE6 Bug ：脚本中止错误 强制IE6用户使用传统模式问题Pagelet数据获取失败 单Pagelet失效问题Pagelet的数据希望可以继承到子Pagelet但对父Pagelet不可见 数据“伪作用域”问题其他琐碎输出模式判断浏览器检测Noscript标签跳转Cookie识别gzip模块不影响输出HTTP 1.1 1.0兼容日程概念实现实战问题展望展望全站BigPipePagelet优先级随机模式输出(待上线)JS/CSS资源的全局管理QATHANKSQ?适用场景？BigPipe改进方案？讨论