View
127
Download
0
Category
Preview:
DESCRIPTION
微博新版中的 BigPipe技术后端实现分享. 史罗丹 @Rodin 高级开发工程师@新浪微博 luodan@staff.sina.com.cn. 日程. 概念 实现 实战问题 展望. 概念. BigPipe是 重新设计的Web服务处理过程 利用流水线思想降低网页的用户感知延迟 AJAX模块化方式的性能加强版. 概念. 概念. 概念. 概念. 传统页面处理过程. 概念. AJAX 模块化处理过程. 概念. BigPipe处理过程. 概念. 输出示例 - 普通模式 左侧内容 - PowerPoint PPT Presentation
Citation preview
微博新版中的
BigPipe技术后端实现分享
史罗丹 @Rodin
高级开发工程师@新浪微博luodan@staff.sina.com.cn
日程
概念 实现 实战问题 展望
概念
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?
Recommended