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

微博新版中的

BigPipe技术后端实现分享

史罗丹 @Rodin

高级开发工程师@新浪微博[email protected]

日程

概念实现实战问题展望

概念

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>

<script>bp.pagelet({'id': 'pl_left' , 'html' : '左侧内容 '})</script>

<script>bp.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 (Composite)

实现

实现

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

实现

内容处理与容器分离 (Visitor)

实现

模板处理 HTML模板中包含子 pagelet占位符

实现

输出模式传统 Traditonal 流水线 Streamline 随机流水线 Random

实现

输出模式

传统流水线随机

访问次序先子后父先父后子任意

输出方式同时输出父先输出子后输出

父先输出子后输出

深度优先遍历

实现

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

日程


问题

跨页面更新内容或仅更新部分内容不需要输出脚本框架和页面框架

ScriptOnly模式

问题

随机流水线模式输出数据并行处理

异步 IO + 事件回调（纯 PHP实现） socket_select/curl_multi_select

问题

IE6 Bug ：脚本中止错误

强制 IE6用户使用传统模式

问题

Pagelet数据获取失败

单 Pagelet失效

问题

其他琐碎输出模式判断

浏览器检测 Noscript标签跳转 Cookie识别

gzip模块不影响输出 HTTP 1.1 & 1.0兼容

日程


展望

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

Q&A

THANKS

Q?

Documents

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