同事推荐了一篇帖子

http://engineering.xueqiu.com/blog/2013/02/27/implementing-bigpipe-in-nodejs/

主要是讲Facebook的Bigpipe技术的

学习了一下思想,写了一个C#版本的

对不对不知道,反正可以实现效果

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BigPipe.aspx.cs" Inherits="TestDemo.WebApplication.BigPipe" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>     
    <div><div>第一块</div><div style=" min-height:200px" id="div1">加载中</div> </div>
     
     <div><div>第二块</div><div style=" min-height:200px" id="div2">加载中</div> </div>
 
     <div><div>第三块</div><div style=" min-height:200px" id="div3">加载中</div> </div>
 
     <%
         ResponseBuffer();
      %>
 
</body>
</html>

后台代码

public partial class BigPipe : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    { 
    }
 
 
 
 
    public void ResponseBuffer()
    {
        Response.Flush();
 
 
 
        Thread.Sleep(1000);
        Response.Write("<script>document.getElementById('div1').innerHTML = '我是内容1,我已经加载完成';</script>");
        Response.Flush();
 
 
        Thread.Sleep(1000);
        Response.Write("<script>document.getElementById('div2').innerHTML = '我是内容2,我已经加载完成';</script>");
        Response.Flush();
 
 
 
        Thread.Sleep(1000);
        Response.Write("<script>document.getElementById('div3').innerHTML = '我是内容3,我已经加载完成';</script>");
        Response.Flush();
 
          
    }
 
}


实质上是 缓冲池中的数据生成一部分就输出一部分,输出之后用JS填充到HTML中

这样就可以做到整个页面框架快速下载,模块后续加载


后来又搜了一篇

http://www.cnblogs.com/BearsTaR/archive/2010/06/18/facebook_html_chunk.html

更先进一些,不过本质原理是一样的


还有一种在服务器端多模块加载的形式pagelet,回头再写一篇吧


Leave a Reply