facebook分块加载，页面优化，BigPipe，简单实例
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>BigPipe Demo 3</title>
<style type=”text/css”>
* {margin: 0; padding:0;}
body {background-color:#fff;}
div{border:2px solid #4F81BD; margin:30px; padding: 10px;}
p {word-wrap:break-wrod; word-break:break-all; color: #666;}
.red {color: #f00;}
.blue {color:blue;}
.green {color:green;}
</style>
<script>
function render(nodeID,html){
document.getElementById(nodeID).innerHTML=html;
}
</script>
</head>
<body>
<div id=”header”><p>Loading…</p></div>
<div id=”content”><p>Loading…</p></div>
<div id=”footer”><p>Loading…</p></div>
<?php
ob_flush();
flush();
sleep(1);
//填充缓冲区
$header = str_pad(‘<span>111111</span>’, 4096);
?>
<script>render(‘header’, ‘<p><?php echo $header;?><p>’);</script>
<?php
ob_flush();
flush();
sleep(10);
$content = str_pad(‘<span>222222</span>’, 4096);
?>
<script>render(‘content’, ‘<p><?php echo $content;?><p>’);</script>
<?php
ob_flush();
flush();
sleep(10);
$footer = str_pad(‘<span>333333</span>’, 4096);
?>
<script>render(‘footer’, ‘<p><?php echo $footer;?><p>’);</script>
<?php
ob_flush();
flush();
?>
</body>
</html>
注：请将以上代码放到apache服务器上运行
1.作者的博客：http://www.facebook.com/note.php?note_id=389414033919
2.bigpipe技术的ppt：http://twork.taobao.net/books/237
3.bigpipe的java实现:http://codemonkeyism.com/facebook-bigpipe-java/
4.一篇介绍bigpipe的文章：http://www.54chen.com/architecture/rose-pipe-http-54chen.html
5.另一篇挺有用的文章：http://www.cnblogs.com/BearsTaR/archive/2010/06/18/facebook_html_chunk.html
6.人人网类似bigpipe的技术–rosepipe：http://www.54chen.com/architecture/rose-open-source-portal-framework.html
7．《高性能网站建设指南》by Steve Souder， Copyright 2007 Steve Sounder， 978-0-596- 52930-7
facebook分块加载，页面优化，BigPipe，简单实例的更多相关文章
- jQuery Pjax – 页面无刷新加载，优化用户体验
pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...
- React 16 加载性能优化指南
关于 React 应用加载的优化,其实网上类似的文章已经有太多太多了,随便一搜就是一堆,已经成为了一个老生常谈的问题. 但随着 React 16 和 Webpack 4.0 的发布,很多过去的优化手段 ...
- 移动端-H5预加载页面
利用简洁的图片预加载组件提升h5移动页面的用户体验 阅读目录 1. 实现思路 2. demo说明 3. 注意事项 4. 总结 在 做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未 ...
- 记一次cocos项目的加载速度优化
半个月前,我们用cosos creator做了一个简单的小游戏,也许算不上小游戏吧..一边学cocos,一边做,几经波折后终于上线了.然鹅,功能是实现了,但是加载速度十分感人(毕竟没经验嘛,无辜脸). ...
- HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面
创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...
- RadioGroup+Fragment 使用Fragment的add（）方法，防止使用replace每次都重新加载页面，造成资源浪费
radiogroup+fragment是很常用的主页导航控件,之前为了代码简便一直使用的replace()替换fragment,代码如下: getSupportFragmentManager().be ...
- 爬虫再探实战（三）———爬取动态加载页面——selenium
自学python爬虫也快半年了,在目前看来,我面临着三个待解决的爬虫技术方面的问题:动态加载,多线程并发抓取,模拟登陆.目前正在不断学习相关知识.下面简单写一下用selenium处理动态加载页面相关的 ...
- ExtJs非Iframe框架加载页面实现
在用Ext开发App应用时,一般的框架都是左边为菜单栏,中间为tab页方式的显示区域.而tab页面大多采用的嵌入一个iframe来显示内容.但是采用iframe方式有一个很大的弊端就是每次在加载一个新 ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
随机推荐
- POJ3169 Layout(差分约束系统)
POJ3169 Layout 题意: n头牛编号为1到n,按照编号的顺序排成一列,每两头牛的之间的距离 >= 0.这些牛的距离存在着一些约束关系:1.有ml组(u, v, w)的约束关系,表示牛 ...
- 在Ubuntu上下载、编译和安装Android最新源码
看完了前面说的几本书之后,对Linux Kernel和Android有一定的认识了,是不是心里蠢蠢欲动,想小试牛刀自己编译一把Android源码了呢?一直习惯使用Windows系统,而Android源 ...
- hdu3722Card Game(KM最大带权匹配)
题目请戳这里 题目大意:给n个字符串,再给一个n的排列:p1,p2....pn.然后将第i个字符串贴到第pi个字符串后面,然后形成一个环.pi的首字符和第i个字符串的末尾字符就相邻,如果这2个字符相等 ...
- docker入门（二）
打造自己的镜像 首先我们启动busybox镜像为容器,在该容器中安装一个小工具,再将这个容器保存为新的镜像 首先我们下载一个镜像,再启动容器 [root@centos ~]# docker pull ...
- 10 条提升 Android 性能的建议
About the Speaker: Boris Farber 每个人都知道一个 App 的成功,更这个 App 的性能体验有着很密切的关系.但是如何让你的 App 拥有极致性能体验呢?在 Droid ...
- Traceview 性能分析工具
简介 TraceView 是 Android 平台配备一个很好的性能分析的工具.它可以通过图形化的方式让我们了解我们要跟踪的程序的性能,并且能具体到 method.详细内容参考:http://deve ...
- 洛谷P1993 小 K 的农场（查分约束）
/* 加深一下对查分约束的理解 建图的时候为了保证所有点联通 虚拟一个点 它与所有点相连 权值为0 然后跑SPFA判负环 这题好像要写dfs的SPFA 要不超时 比较懒 改了改重复进队的条件~ */ ...
- HDU5308-脑补-对拍
先贴上对拍的结果: 感想:可以明显发现下标相差1的关系,所以对付这种需要大量脑补的水题,真的蛋疼,以前没用过对拍,只知道有这么回事,调程序什么的都是手算,人工模拟(经常大脑发热,严重缺氧不足),所以试 ...
- iOS开发常用的第三方框架
1. AFNetworking 在众多iOS开源项目中,AFNetworking可以称得上是最受开发者欢迎的库项目.AFNetworking是一个轻量级的iOS.Mac OS X网络通信类库,现在是G ...
- UILabel,UITextField,UIButton三大基础控件总结
(一)UILabel空件 属性: 1.背景颜色 label.backgroundColor = [UIColor ***]; 2. 显示文字: label.text = @"******&q ...