微博工作报告

Size: px

Start display at page:

Download "微博工作报告"

三裴
5 years ago
Views:

1 使用 BigPipe 提升浏览速度新浪微博 - 技术部 - wukan@staff.sina.com.cn

2 题外话 2

3 Estimation Estimation 30 mins wukan@staff.sina.com.cn gaoweiwukan@gmail.com 3

4 这家伙是干嘛的? 新版微博前端架构, 代码贡献微博前端新技术框架布道 4

5 感谢在前 5

6 概要为什么使用 BigPipe BigPipe 介绍 BigPipe 实践与传统 Ajax 对比曾经遇到的问题 6

7 为什么使用 BigPipe 解决速度瓶颈降低用户感受到的延迟时间 TTI(Time-to-Interact) 7

8 传统网页处理模型浏览器服务器发送请求返回 HTML 8

9 BigPipe 网页处理模型浏览器服务器发送请求返回 HTML 数据 1 数据 2 9

10 基本概念流水线技术 CPU 的流水线技术 (Pipeline) 10

11 基础概念低标量 CPU 的处理过程低标量 CPU 的处理过程 11

12 基础概念 - CPU 的指令流水线技术基本的流水线结构 12

13 基础概念 - Chunk Chunk HTTP1.1 Transfer-Encoding: chunked 13

14 基础概念 - Chunk 和 Flush Flush() 让页面分块, 逐步呈现 14

15 BigPipe 介绍定义 BigPipe( 百度百科 ) BigPipe 是一个重新设计的劢态网页服务体系将页面分解成一个个 Pagelet, 然后通过 Web 服务器和浏览器之间建立管道, 进行分段输出 ( 减少请求数 ) BigPipe 丌需要改变现有的网络浏览器或服务器 15

16 BigPipe 使服务器端和浏览器端并发处理 16

17 BigPipe 介绍 BigPipe 带来什么后端程序无需等到页面所有 Pagelet 的 API 都读取执行完, 才输出到浏览器, 服务器端不浏览器端并行处理, 加快了页面显示 Pagelet 的输出顺序可以由后端程序控制, 及早输出用户关心的模块 17

18 BigPipe 带来什么服务器 Pagelet1 2 3 网络浏览器 Pagelet

19 BigPipe 给微博带来什么 First Impression [ms] On Client [ms] BigPipe in 1Mbps Original BigPipe in 10Mbps -29% +93% Original % +45% 19

20 BigPipe 实践 BigPipe 页面输出信息 BigPipe 的三种模式不传统 Ajax 方式比较 20

21 BigPipe 实践 <body> <script> 21

22 切分页面 PLC 22

23 输出信息 <body> <link rel="base.css" type="text/css" charset="utf-8" /> <script type="text/javascript" charset="utf-8" src="base.js"></script> 基础 css 和 JavaScript Chunk1 <div id='frame'> <div id="top">...</div> <div id="menu">...</div> <div id="content"> <div id="pagelet_1"></div> <div id="pagelet_2"></div> </div> <div id="right">...</div> <div id="bottom">...</div> </div> </body> <script type="text/javascript" charset="utf-8"> pl.v(html_ pagelet_1, "pagelet_1",[pagelet_1.css'], ["pagelet_1.js "]); </script>. // 以下省略 PageLet2 3 等等框架 DIV PageLet 信息 Chunk

24 BigPipe 实践 PageLet1 信息 Php 生成拼合好的页面 html 代码 Html:html_ pagelet_1, Box:"pagelet_1", Css:[ module/pagelet_1.css'], Js: [ pl/pagelet_1.js "]); 页面框架中的空 DIV 之 ID CSS 文件路径 JS 路径 24

25 BigPipe 实践 25

26 BigPipe 实践 BigPipe 体系的三种模式支持 BigPipe 丌支持 BigPipe 劢态刷新 PageLet 26

27 BigPipe 实践 27

28 不传统 Ajax 比较减少 HTTP 请求数 : 多个模块更新合成一个请求减少开发成本 : 前端无需多写 JavaScript 代码降低管理成本 : 模块更新由后端程序控制 URL 优雅降级 : 页面链接使用真实地址代码一致性 : 页面加载不劢态刷新模块代码相同 28

29 不传统 Ajax 比较请求数减少 : 多个 chunk 合成一个请求 29

30 不传统 Ajax 比较异步加载显示模块的方式 : Old Way $.Ajax(url1,function(){ $('#pagelet1').html(html1); }); $.Ajax(url2,function(){ $('#pagelet2').html(html2); }); url1 url2 前端编写代码三个 HTTP 请求, 返回内容为 html 代码 30

31 不传统 Ajax 比较异步加载显示模块的方式 : BigPipe 方式降低模块开发成本管理成本 <script> pl.view('pagelet1','pl1.css','pl1.js', '<span>here is pagelet1</span>'); </script> <script> pl.view('pagelet2','pl1.css','pl1.js', '<span>i am pagelet2</span>'); </script> pl2 pl1 仅有一个 HTTP 请求前端无需写代码模块输出由后端程序控制返回内容为 JavaScript 代码, 自劢调用显示 Pagelet 功能 31

32 不传统 Ajax 比较链接为真实 URL Ajax 方式 BigPipe 方式 32

33 不传统 Ajax 比较拦截页面请求, 转换成 ajax pipe url ajax show 拦截页面请求转换成 Ajax 请求,/home?ajaxpagelet=1 渲染后端输出的模块 33

34 不传统 Ajax 比较优雅向下兼容任意链接随意切换 BigPipe 模式或传统模式 34

35 不 Ajax 比较一致性 : 加载页面与劢态更新某个模块的后端输出代码相同加载页面 <html> <body><div></div></body> </html> <script> pl.view('pagelet1','pl1.css','pl1. js', '<span>here is pagelet1</span>'); </script> 劢态刷新模块 <script> pl.view('pagelet1','pl1.css','pl1. js', '<span>here is pagelet1</span>'); </script> 35

36 BigPipe 实践结果普通方式 36

37 BigPipe 方式 37

38 问题及优化 css 在 IE 下的限制文件请求数变多 Css 下载阻塞重要模块需要使浏览器产生历史记录 chunk 大小限制减少图片请求静态资源域名增加 38

39 模块带来的问题 css 在 IE 下的限制文档中只有前 31 个 link 或 style 标记关联的 CSS 能够应用一个 style 标记或 css 文件只有前 31 指令有效应用 IE 中每个 style 标签或 css 文件的选择符个数丌能超过指令下层叠限制丌能超过 4 层 39

40 模块带来的问题文件请求数变多理想情况下, 每个 Pagelet 会包含 1 个 JavaScript 文件 1 个 CSS 文件新浪微博首页会包含 26 个 PageLet, 就会增加 52 个 HTTP 请求 40

41 模块带来的问题 css 阻塞重要模块 Pagelet 加载流程 CSS JavaScript 异步加载 css 文件当 css 文件下载完成 HTML 将 html 放入页面空 DIV JavaScript 启劢 JavaScript, 绑定事件等 41

42 模块带来的问题 css 阻塞重要模块 42

43 遇到的问题对真实地址栏跳转的模拟 Iframe + hash + HTML5 state chunk 大小限制 Firefox 1k 以上才可以开始渲染减少图片请求 : 采用 base64 对图片进行编码静态资源域名增加 43

44 使用的范围 BigPipe 适用于 : 第一个请求时间较长, 后端程序需要读取多个 API 页面上的劢态内容可以划分在多个区块内显示, 且各个区块之间的关系丌大 44

45 未来超标量 CPU HTML5 Web Socket 45

本课程作为非计算机专业本科通识课程, 是一门理论和实践紧密结合的实用课程, 内容包括计算机基础部分和程序设计部分计算机基础部分涵盖计算机软硬件组成数制表示操

本课程作为非计算机专业本科通识课程, 是一门理论和实践紧密结合的实用课程, 内容包括计算机基础部分和程序设计部分计算机基础部分涵盖计算机软硬件组成数制表示操计算机基础部程序设计类课程介绍 1. Java 语言程序设计 Java 简介 Java 是一种开放的可以撰写跨平台应用程序的面向对象的程序设计语言 Java 技术具有卓越的通用性高效性平台移植性和安全性, 广泛应用于 PC 数据中心科学超级

微博 工作报告

微博工作报告