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 ...
随机推荐
- 怎样在loop中处理异常
怎样在loop中处理异常,而不跳出 出现符号“exception”在需要下下列之一时的解决办法; 如果sql中发生异常,我们可以用 exception when others then d ...
- 卸载Symantec Endpoint Protection, 无需password的卸载方法
近期一次偶然的机会, 被人装了个Symantec在电脑上, 搞得各种报警, 验证, 烦死. 然后就自然而然的想卸载掉这个该死的杀毒软件, 没想到这个杀毒软件竟然还是个流氓杀毒软件, 卸载还须要pass ...
- POJ3169 Layout(差分约束系统)
POJ3169 Layout 题意: n头牛编号为1到n,按照编号的顺序排成一列,每两头牛的之间的距离 >= 0.这些牛的距离存在着一些约束关系:1.有ml组(u, v, w)的约束关系,表示牛 ...
- PHP安全编程：跨站脚本攻击的防御(转)
跨站脚本攻击是众所周知的攻击方式之一.所有平台上的Web应用都深受其扰,PHP应用也不例外. 所有有输入的应用都面临着风险.Webmail,论坛,留言本,甚至是Blog.事实上,大多数Web应用提供输 ...
- Qt 学习之路 ：Qt 绘制系统简介
Qt 的绘图系统允许使用相同的 API 在屏幕和其它打印设备上进行绘制.整个绘图系统基于QPainter,QPainterDevice和QPaintEngine三个类. QPainter用来执行绘制的 ...
- select poll epoll三者之间的比较
一.概述 说到Linux下的IO复用,系统提供了三个系统调用,分别是select poll epoll.那么这三者之间有什么不同呢,什么时候使用三个之间的其中一个呢? 下面,我将从系统调用原型来分析其 ...
- AWS S3国内与国外的区别
S3云存储国际版目前正被某墙,国内部分地区只能下载不能上传,所以建议S3使用国内AWS的. 国内S3与国外S3在编程时注意以下几点: 1)URL不通用 国际版的S3可以使用不带Region的URL,例 ...
- Unix Shell 通配符、转义字符、元字符、特殊字符
shell通配符: * 匹配0或多个字符 a*b a与b之间可以有任意长度的任意字符, 也可以一个也没有, 如aabcb, a01b, ab等 ? 匹配任意一个字符 a?b a与b之间有且只有一个字符 ...
- ie6-7 overflow:hidden失效问题的解决方法
即使父元素设置了overflow:hidden.解决这个bug很简单,在父元素中使用position:relative; zoom: 1;触发haslayout 即可解决该BUG.
- Java对象序列化入门
Java对象序列化入门 关于Java序列化的文章早已是汗牛充栋了,本文是对我个人过往学习,理解及应用Java序列化的一个总结.此文内容涉及Java序列化的基本原理,以及多种方法对序列化形式进行定制 ...