VC2011-使用BigPipe提升浏览速度--流水线技术在新浪微博的实践

使用BigPipe提升浏览速度 新浪微博 - 技术部 - 吴侃 @v4ria wukan@staff.sina.com.cn 题外话 • http://www.anti-powerpoint-party.com/ 2 Estimation • 30 mins 3 Estimation Weibo.com: @v4ria Email : wukan@staff.sina.com.cn gaoweiwukan@gmail.com 这家伙是干嘛的？ 4 新版微博前端架构，代码贡献 微博前端新技术框架布道 感谢在前 5 概要 • 为什么使用BigPipe • BigPipe介绍 • BigPipe实践 • 与传统Ajax对比 • 曾经遇到的问题 6 为什么使用BigPipe 解决速度瓶颈 降低用户感受到的延迟时间。 TTI(Time-to-Interact) 7 传统网页处理模型 8 浏览器 服务器 发送请求 返回HTML BigPipe网页处理模型 9 浏览器 服务器 发送请求 数据2 返回HTML 数据1 …… 基本概念 – 流水线技术 CPU的流水线技术 （Pipeline） 10 基础概念 – 低标量CPU的处理过程 • 低标量CPU的处理过程 11 基础概念 - CPU 的指令流水线技术 • 基本的流水线结构 12 基础概念 - Chunk Chunk HTTP1.1 Transfer-Encoding: chunked 13 基础概念 - Chunk 和 Flush Flush() 让页面分块,逐步呈现 14 BigPipe介绍 定义BigPipe（百度百科） • BigPipe是一个重新的劢态网页服务体系。 • 将页面分解成一个个Pagelet，然后通过Web 服务器和浏览器之间建立管道，进行分段输出 （减少请求数）。 • BigPipe丌需要改变现有的网络浏览器或服务 器。 15 BigPipe使服务器端和浏览器端 并发处理 16 BigPipe介绍 BigPipe带来什么 • 后端程序无需等到页面所有 Pagelet 的API 都读取执行完，才输出到浏览器，服务器 端不浏览器端并行处理，加快了页面显示。 • Pagelet的输出顺序可以由后端程序控制， 及早输出用户关心的模块。 17 BigPipe带来什么 18 服务器 Pagelet1、2、3 网络 浏览器 Pagelet1、2、3 BigPipe给微博带来什么 19 First Impression [ms] On Client [ms] BigPipe in 1Mbps 1965 1783 Original 2759 922 -29% +93% BigPipe in 10Mbps 1214 1372 Original 1403 943 -13% +45% BigPipe实践 • BigPipe页面输出信息 • BigPipe的三种模式 • 不传统Ajax方式比较 20 BigPipe实践 21 ……. //以下省略PageLet2、3等等 23 基础css和 JavaScript 框架DIV PageLet信 息 Chunk1 Chunk2、3、4 BigPipe实践 PageLet1信息 • Html：html_ pagelet_1, • Box："pagelet_1", • Css：[‘module/pagelet_1.css'], • Js: [“pl/pagelet_1.js "]); 24 Php生成拼合好的页 面html代码 页面框架中的空 DIV之ID CSS文件路径 JS路径 BigPipe实践 25 BigPipe实践 BigPipe体系的三种模式 • 支持BigPipe • 丌支持BigPipe • 劢态刷新PageLet 26 BigPipe实践 27 不传统Ajax比较 • 减少HTTP请求数：多个模块更新合成一个请求 • 减少开发成本：前端无需多写JavaScript代码 • 降低管理成本：模块更新由后端程序控制 • URL优雅降级：页面链接使用真实地址 • 代码一致性：页面加载不劢态刷新模块代码相同 28 不传统Ajax比较 • 请求数减少：多个chunk合成一个请求 29 不传统Ajax比较 Old Way $.Ajax(url1,function(){ $('#pagelet1').html（html1）; }); $.Ajax(url2,function(){ $('#pagelet2').html（html2）; }); 30 异步加载显示模块的方式： • 前端编写代码、 • 三个HTTP请求， • 返回内容为html代码 url1 url2 不传统Ajax比较 BigPipe方式 31 异步加载显示模块的方式： 降低模块开发成本、管理成本 • 仅有一个HTTP请求 • 前端无需写代码 • 模块输出由后端程序控制 • 返回内容为JavaScript代码，自 劢调用显示Pagelet功能 pl2 pl1 不传统Ajax比较 Ajax方式 BigPipe方式 32 链接为真实URL 不传统Ajax比较 • 拦截页面请求，转换成ajax pipe 33 url • 拦截页面请求 ajax • 转换成Ajax请求，/home?ajaxpagelet=1 show • 渲染后端输出的模块 不传统Ajax比较 • 优雅向下兼容 • 任意链接随意切换BigPipe模式或传统模式 34 不Ajax比较 加载页面 劢态刷新模块 35 一致性 ：加载页面与劢态更新某个模块的后端输出代码相同 BigPipe实践结果 • 普通方式 36 BigPipe方式 37 问题及优化 • css 在IE下的限制 • 文件请求数变多 • Css下载阻塞重要模块 • 需要使浏览器产生历史记录 • chunk大小限制 • 减少图片请求 • 静态资源域名增加 38 模块带来的问题 css 在IE下的限制 • 文档中只有前31个link或style标记关联的CSS能够应用。 • 一个style标记或css文件只有前31次@import指令有 效应用。 • IE中每个style标签或css文件的选择符个数丌能超过 4095 • @import指令下层叠限制丌能超过4层 39 模块带来的问题 文件请求数变多 • 理想情况下，每个Pagelet会包含1个JavaScript文件、1个CSS 文件 • 新浪微博首页会包含26个PageLet，就会增加 52 个HTTP请求。 40 模块带来的问题 • css阻塞重要模块 Pagelet加载流程 41 CSS • JavaScript异步加载css文件 HTML • 当css文件下载完成 • 将html放入页面空DIV JavaScript • 启劢JavaScript，绑定事件等 模块带来的问题 • css阻塞重要模块 42 遇到的问题 • 对真实地址栏跳转的模拟 – Iframe + hash + HTML5 state • chunk大小限制 – Firefox 1k以上才可以开始渲染 • 减少图片请求：采用 base64对图片进行编码 • 静态资源域名增加 43 使用的范围 • BigPipe适用于：  第一个请求时间较长，后端程序需要读取多个 API  页面上的劢态内容可以划分在多个区块内显示， 且各个区块之间的关系丌大 44 未来 • 超标量CPU • HTML5 Web Socket 45