使用big pipe提升浏览速度v2
DESCRIPTION
新版,在W3Ctech 2011北京站会议上演示的版本TRANSCRIPT
![Page 4: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/4.jpg)
• 这家伙是干嘛的?
新版微博前端架构,代码贡献 微博前端新技术框架布道
4
![Page 5: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/5.jpg)
概要
• 为什么使用BigPipe
• BigPipe介绍
• BigPipe实践
• 使用效果
5
![Page 6: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/6.jpg)
为什么使用BigPipe 解决速度瓶颈 降低用户感受到的延迟时间。 TTI(Time-to-Interact)
6
![Page 7: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/7.jpg)
• 传统网页处理模型
浏览器 服务器
发送请求
返回HTML
7
![Page 8: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/8.jpg)
• BigPipe网页处理模型
浏览器 服务器
发送请求
数据2
返回HTML
数据1
……
8
![Page 9: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/9.jpg)
基本概念 – 流水线技术
CPU的流水线技术 (Pipeline)
9
![Page 12: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/12.jpg)
基础概念 - Chunk
Chunk HTTP1.1 Transfer-Encoding: chunked
12
![Page 13: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/13.jpg)
基础概念 - Chunk 和 Flush
Flush() 让页面分块,逐步呈现
13
![Page 14: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/14.jpg)
BigPipe介绍
定义BigPipe(百度百科)
• BigPipe是一个重新设计的劢态网页服务体系。
• 将页面分解成一个个Pagelet,然后通过Web服务器和浏览器之间建立管道,进行分段输出(减少请求数)。
• BigPipe丌需要改变现有的网络浏览器或服务器。
14
![Page 15: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/15.jpg)
BigPipe使服务器端和浏览器端
并发处理
15
![Page 16: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/16.jpg)
BigPipe介绍
BigPipe带来什么
• 后端程序无需等到页面所有 Pagelet 的API都读取执行完,才输出到浏览器,服务器端不浏览器端并行处理,加快了页面显示。
• Pagelet的输出顺序可以由后端程序控制,及早输出用户关心的模块。
16
![Page 17: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/17.jpg)
BigPipe带来什么
17
服务器
Pagelet1、2、3 网络
浏览器
Pagelet1、2、3
![Page 18: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/18.jpg)
BigPipe简介
BigPipe给微博带来什么
18
First Impression [ms] On Client [ms]
BigPipe 1965 1783
No BP 2759 922
-29% +93% BigPipe 1214 1372
No Bp 1403 943
-13% +45%
![Page 19: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/19.jpg)
BigPipe实践
• BigPipe页面输出信息
• BigPipe的三种模式
19
![Page 20: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/20.jpg)
BigPipe实践
20
<body>
<script>
![Page 21: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/21.jpg)
切分页面
21
PLC
![Page 22: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/22.jpg)
BigPipe实践
输出信息 <body> <link rel="base.css" type="text/css" charset="utf-8" /> <script type="text/javascript" charset="utf-8" src="base.js"></script>
<div id='frame'><!--框架开始--> <div id="top">...</div><!--顶部导航--> <div id="menu">...</div><!--左侧--> <div id="content"><!--此处为下面的PageLet占位--> <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等等
22
基础css和JavaScript
框架DIV
PageLet信息
Chunk1
Chunk2、3、4
![Page 23: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/23.jpg)
BigPipe实践
PageLet1信息
• Html:html_ pagelet_1,
• Box:"pagelet_1",
• Css:[‘module/pagelet_1.css'],
• Js: [“pl/pagelet_1.js "]);
23
Php生成拼合好的页面html代码
页面框架中的空DIV之ID
CSS文件路径
JS路径
![Page 24: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/24.jpg)
BigPipe实践
24
![Page 25: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/25.jpg)
BigPipe实践
BigPipe体系的三种模式
• 支持BigPipe
• 丌支持BigPipe
• 劢态刷新PageLet
25
![Page 26: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/26.jpg)
BigPipe实践 26
![Page 27: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/27.jpg)
BigPipe实践结果
• 普通方式
27
![Page 28: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/28.jpg)
• BigPipe方式
28
![Page 29: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/29.jpg)
遇到的问题
• 对真实地址栏跳转的模拟(history管理器)
• Iframe + hash + HTML5 state系列
需要拦截用户在页面中页面跳转操作,转换成AjaxPageLet方式(BigPipe管理器)(/home?ajaxpagelet=1)
需要接收管道页面发送的命令,加载css资源后显示模块,加载js资源后(PageLet管理器)
29
![Page 30: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/30.jpg)
问题 - 使用的范围
• BigPipe丌具备普适性
• 适用于: 1. 第一个请求时间较长
2. 页面上的劢态内容可以划分在多个区块内显示,且各个区块之间的关系丌大
30
![Page 31: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/31.jpg)
未来
• 超标量
• HTML5 Web Socket
31
![Page 32: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/32.jpg)
总结回顾
• BigPipe的起因、原理
• BigPipe技术的定义
• BigPipe的实践过程
• BigPipe的实践结果
• BigPipe实践中遇到的问题以及适用范围
• 将来的发展
32
![Page 33: 使用Big pipe提升浏览速度v2](https://reader034.vdocuments.site/reader034/viewer/2022050702/55996acf1a28ab096a8b4797/html5/thumbnails/33.jpg)
33