More Related Content
Similar to 使用Bigpipe提升浏览速度
Similar to 使用Bigpipe提升浏览速度 (20)
使用Bigpipe提升浏览速度
- 7. 基础概念 - Chunk 和 Flush
• 在HTTP1.1中,使用trunked编码
的浏览器丌需要等到内容全部下
载完成,只要接收到一个chunked
块就可解析页面
• Transfer-Encoding: chunked
7
- 8. 基础概念 - Chunk 和 Flush
使用chunk的例子:
http://www.cnblogs.com/BearsTaR/archive/20
10/05/19/flush_chunk_encoding.html
flush让页面分块,逐步呈现
8
- 14. BigPipe带来什么
服务器 网络 浏览器
PageLet1 传输
PageLet2 传输 浏览器
PageLet3 传输
14
- 17. 输出信息
<body>
<link rel="base.css" type="text/css" charset="utf-8" />
基础css和JavaScript
<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
<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 "]); PageLet信息
</script>
……. //以下省略PageLet2、3等等
17
- 18. Php生成拼合好的页
PageLet1信息 面html代码
• Html:html_ pagelet_1, 页面框架中的空
DIV之ID
• Box:"pagelet_1",
• Css:['http://v4.com/pagelet_1.css'], CSS文件路径
• Js: ["http://js.wcdn.cn/pagelet_1.js "]); JS路径
18
- 33. 总结回顾
• BigPipe概念产生的背景
• BigPipe技术的定义
• BigPipe的实践过程
• BigPipe的实践结果
• BigPipe实践中遇到的问题以及适用范围
• 将来的发展
33