<!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

来自于：http://www.phpshare.cn/2011/08/facebook%E5%88%86%E5%9D%97%E5%8A%A0%E8%BD%BD%EF%BC%8C%E9%A1%B5%E9%9D%A2%E4%BC%98%E5%8C%96%EF%BC%8Cbigpipe%EF%BC%8C%E7%AE%80%E5%8D%95%E5%AE%9E%E4%BE%8B/

facebook分块加载，页面优化，BigPipe，简单实例的更多相关文章

  1. jQuery Pjax – 页面无刷新加载，优化用户体验

    pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...

  2. React 16 加载性能优化指南

    关于 React 应用加载的优化,其实网上类似的文章已经有太多太多了,随便一搜就是一堆,已经成为了一个老生常谈的问题. 但随着 React 16 和 Webpack 4.0 的发布,很多过去的优化手段 ...

  3. 移动端-H5预加载页面

    利用简洁的图片预加载组件提升h5移动页面的用户体验   阅读目录 1. 实现思路 2. demo说明 3. 注意事项 4. 总结 在 做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未 ...

  4. 记一次cocos项目的加载速度优化

    半个月前,我们用cosos creator做了一个简单的小游戏,也许算不上小游戏吧..一边学cocos,一边做,几经波折后终于上线了.然鹅,功能是实现了,但是加载速度十分感人(毕竟没经验嘛,无辜脸). ...

  5. HBuilder mui 手机app开发 Android手机app开发 ios手机app开发 打开新页面 预加载页面 关闭页面

    创建子页面 在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题: mui的解决思路是:将需要滚动的区域通过单独的webview实 ...

  6. RadioGroup+Fragment 使用Fragment的add（）方法，防止使用replace每次都重新加载页面，造成资源浪费

    radiogroup+fragment是很常用的主页导航控件,之前为了代码简便一直使用的replace()替换fragment,代码如下: getSupportFragmentManager().be ...

  7. 爬虫再探实战（三）———爬取动态加载页面——selenium

    自学python爬虫也快半年了,在目前看来,我面临着三个待解决的爬虫技术方面的问题:动态加载,多线程并发抓取,模拟登陆.目前正在不断学习相关知识.下面简单写一下用selenium处理动态加载页面相关的 ...

  8. ExtJs非Iframe框架加载页面实现

    在用Ext开发App应用时,一般的框架都是左边为菜单栏,中间为tab页方式的显示区域.而tab页面大多采用的嵌入一个iframe来显示内容.但是采用iframe方式有一个很大的弊端就是每次在加载一个新 ...

  9. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

随机推荐

  1. DOM解析原理

    用于处理XML文档的DOM元素属性 childNodes:返回当前元素所有子元素的数组: firstChild:返回当前元素的第一个下级子元素: lastChild:返回当前元素的最后一个子元素: n ...

  2. ReportViewer中设置ServerReport.ReportServerCredentials属性的方法

    当使用SSRS技术来布置报表,可能使用MS自带的ReportViewer控件来读取报表. 它分为Web和Windows两种版本;此处Web版. ServerReport.ReportServerCre ...

  3. Java 中的泛型详解-Java编程思想

    Java中的泛型参考了C++的模板,Java的界限是Java泛型的局限. 2.简单泛型 促成泛型出现最引人注目的一个原因就是为了创造容器类. 首先看一个只能持有单个对象的类,这个类可以明确指定其持有的 ...

  4. Excel导入mysql数据库

    步骤一:选取要导入的数据快儿,另外要多出一列,如下图:    步骤二:  将选中的数据快儿拷贝到一个新建的表格工作薄,然后“另存为” ->“文本文件(制表符分割)(*.txt)”,假如存到“D: ...

  5. Linux散列表(二)——宏

    散列表宏承接了双向链表宏的风范,好使好用!务必区分“结点”和“元素”!双链表宏博文中已经提及,这里不赘述! 1.获取元素(结构体)基址 #define hlist_entry(ptr, type, m ...

  6. javascript、js操作json方法总结(json字符创转换json对象)

    相信前端的同学们对json并不陌生,接触过很多.但是很少人知道json的全称是什么,哈哈,我也是查资 料知道的.(JSON JavaScript Object Notation是一种轻量级的数据交换格 ...

  7. 【Java规划】DOM XML Parser分解、遍历、创XML

    1.前言 DOM XML Parser简介 DOM 它是 W3C 处理 XML 规范 API,这是很多其他的 XML 地基处理相关标准,不仅是 Java,其他的,如 Javascript,PHP.MS ...

  8. [转] C++中临时对象及返回值优化

    http://www.cnblogs.com/xkfz007/articles/2506022.html 什么是临时对象? C++真正的临时对象是不可见的匿名对象,不会出现在你的源码中,但是程序在运行 ...

  9. 错误记录--关于foreach，集合已修改；可能无法执行枚举操作

    集合已修改,可能无法执行枚举操作.今天在使用foreach遍历的时候出现了这样的错误.查了一下,这个是使用foreach的典型的错误问题问题.foreach在遍历取数据的过程中,枚举器只允许读,不允许 ...

  10. Windows Azure上的Odoo(OpenERP)-1.创建Ubuntu虚拟机，安装PostgreSQL 数据库

    前提是您必须拥有Windows Azure的账号,如果没有的话,可以去Windows Azure 中国区网站申请免费试用账号.哈哈,我就是第一批申请的试用账号,感觉自己挺幸运的.申请的过程就不写了,请 ...