微博新版中的 bigpipe技术后端实现分享
DESCRIPTION
微博新版中的 BigPipe技术后端实现分享. 史罗丹 @Rodin 高级开发工程师@新浪微博 [email protected]. 日程. 概念 实现 实战问题 展望. 概念. BigPipe是 重新设计的Web服务处理过程 利用流水线思想降低网页的用户感知延迟 AJAX模块化方式的性能加强版. 概念. 概念. 概念. 概念. 传统页面处理过程. 概念. AJAX 模块化处理过程. 概念. BigPipe处理过程. 概念. 输出示例 - 普通模式 左侧内容 - PowerPoint PPT PresentationTRANSCRIPT
![Page 2: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/2.jpg)
日程
概念 实现 实战问题 展望
![Page 3: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/3.jpg)
概念
BigPipe是 重新设计的Web服务处理过程 利用流水线思想降低网页的用户感知延迟 AJAX模块化方式的性能加强版
![Page 4: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/4.jpg)
概念
![Page 5: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/5.jpg)
概念
![Page 6: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/6.jpg)
概念
![Page 7: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/7.jpg)
概念
传统页面处理过程
![Page 8: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/8.jpg)
概念
AJAX 模块化处理过程
![Page 9: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/9.jpg)
概念
BigPipe处理过程
![Page 10: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/10.jpg)
概念
输出示例 - 普通模式<html>
<div id="pl_left">左侧内容 </div>
<div id="pl_main">主要内容 </div>
</html>
![Page 11: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/11.jpg)
概念
输出示例 - 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>
![Page 12: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/12.jpg)
概念
传统模式 (BP关闭 ) 流水线模式 (BP开启 )
248ms => 70 ms
![Page 13: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/13.jpg)
概念
好处 用户更快看到部分内容
减少 HTTP请求 Pagelet处理可并发
坏处 强制页面模块化 数据请求层封装 部分运算移动到浏览器端
浏览器兼容性
![Page 14: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/14.jpg)
概念
伴生技术 Quickling
将所有点击加载异步化 PageCache
浏览器端缓存内容
![Page 15: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/15.jpg)
广告
#Velocity China 2011# 《使用 BigPipe —提升浏览速度 流水线技术在新浪微博的实践》
吴侃@v4ria 前端技术经理
![Page 16: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/16.jpg)
日程
概念 实现 实战问题 展望
![Page 17: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/17.jpg)
实现
服务器端任务 组织 Pagelets 管理 Pagelet依赖 获取数据 判断输出模式 生成 HTTP响应
前端任务 JS/CSS拆分 JS/CSS加载卸载 Dom处理 Quickling 历史管理
![Page 18: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/18.jpg)
实现
树形组织 Pagelets (Composite)
![Page 19: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/19.jpg)
实现
![Page 20: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/20.jpg)
实现
Pagelet类 依赖的 css 依赖的 js脚本 所需 html模板 数据准备方法
![Page 21: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/21.jpg)
实现
内容处理与容器分离 (Visitor)
![Page 22: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/22.jpg)
实现
模板处理 HTML模板中包含子 pagelet占位符
![Page 23: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/23.jpg)
实现
输出模式 传统 Traditonal 流水线 Streamline 随机流水线 Random
![Page 24: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/24.jpg)
实现
输出模式
传统 流水线 随机
访问次序 先子后父 先父后子 任意
输出方式 同时输出 父先输出子后输出
父先输出子后输出
深度优先遍历
![Page 25: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/25.jpg)
实现
总结 树形组织 Pagelets Pagelet储存自身依赖 Pagelet提供数据获取方法 Pagelet容器与处理逻辑分离 深度优先遍历
![Page 26: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/26.jpg)
日程
概念 实现 实战问题 展望
![Page 27: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/27.jpg)
问题
跨页面更新内容或仅更新部分内容 不需要输出脚本框架和页面框架
ScriptOnly模式
![Page 28: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/28.jpg)
问题
随机流水线模式输出 数据并行处理
异步 IO + 事件回调 (纯 PHP实现) socket_select/curl_multi_select
![Page 29: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/29.jpg)
问题
IE6 Bug :脚本中止错误
强制 IE6用户使用传统模式
![Page 30: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/30.jpg)
问题
Pagelet数据获取失败
单 Pagelet失效
![Page 31: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/31.jpg)
问题
其他琐碎 输出模式判断
浏览器检测 Noscript标签跳转 Cookie识别
gzip模块不影响输出 HTTP 1.1 & 1.0兼容
![Page 32: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/32.jpg)
日程
概念 实现 实战问题 展望
![Page 33: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/33.jpg)
展望
全站 BigPipe Pagelet优先级 随机模式输出 (待上线 ) JS/CSS资源的全局管理
![Page 34: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/34.jpg)
Q&A
THANKS
Q?
![Page 35: 微博新版中的 BigPipe技术后端实现分享](https://reader033.vdocuments.site/reader033/viewer/2022061401/5681350e550346895d9c62ab/html5/thumbnails/35.jpg)