高性能页面加载技术（流水线加载）BigPipe的C#简单实现(附源码）

一，BigPipe简介

    BigPipe是一个重新设计的基础动态网页服务体系。大体思路是，分解网页成叫做Pagelets的小块，然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。这是类似于大多数现代微处理器的流水线执行过程：多重指令管线通过不同的处理器执行单元，以达到性能的最佳。虽然BigPipe是对现有的服务网络基础过程的重新设计，但它却不需要改变现有的网络浏览器或服务器，它完全使用PHP和JavaScript来实现。（来源百度百科）

  BigPipe可以简单理解为：将网页分为若干个块（pagelet），请求到达服务器后先初始化pagelet布局并Response.Write（这时用户能看到网页的大致布局），然后使用多线程并行执每个pagelet 的业务逻辑，每个pagelet线程执行完后立即Response.Write,对于用户来说，他看到的网页是一块块同时或先后呈现出来，和ajax异步加载比较类似。

二，实现思路

    1， 前端实现：需要一个js接收服务端输出的HTML，并显示到对应的pagelet中，每个pagelet是一个局部视图(partialView)， 代码如下：

   

var PageLet = PageLet || {};

PageLet = (function () {
    var LoadCss = function (css) {
        var c = document.createElement("link");
        c.setAttribute("type", "text/css");
        c.setAttribute("rel", "stylesheet");
        c.setAttribute("href", css);
        document.getElementsByTagName("head")[0].appendChild(c);
    }
    var LoadJs = function (js) {
        var s = document.createElement("script");
        s.setAttribute("type", "text/javascript");
        s.setAttribute("src", js);
        document.getElementsByTagName("head")[0].appendChild(s);
    }
    //PageLet对象公开InitHtml方法，在后台的输出HTML时会带上该方法。

var InitHtml = function (json) { $('#' + json.Pid).html(json.Html); LoadCss(json.Css); LoadJs(json.Js); } return { InitHtml: InitHtml } })();

　　

        2，服务端实现：先初始化页面pagelet布局并输出，然后用多线程并行执行没个pagelet里的业务，执行完后立即输出，这里需要注意的是：输出的HTML代码(partailView)需要做一个JS包裹，只有这样这段HTML代码才能在对应的pagelet显示。代码如下：

HomeController.cs

using MyBigPipe.Common;
using MyBigPipe.Models;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;

namespace MyBigPipe.Controllers
{
    public class HomeController : Controller
    {
        private static readonly object _sysRoot = new object();

        public void Index()
        {
            InitHomeHtml();

            Parallel.Invoke(() =>
            {
                //模拟操作1秒
                Thread.Sleep(500);
                //头部块
                InitTop();

            }, () =>
            {
                Thread.Sleep(500);
                InitLeft();

            }, () =>
            {
                Thread.Sleep(1000);
                //右边块
                InitRight();

            }, () =>
            {
                Thread.Sleep(1000);
                //底部块
                InitFoot();
            });
        }

        private void InitTop()
        {
            ViewBag.Top = "TopTopTopTopTopTopTopTopTopTopTopTopTopTopTopTopTopTopTopTopTopTopTopTopTopTopTop";

            Pagelet pagelet = new Pagelet()
            {
                Css = "",
                Html = Helper.RenderPartialViewToString(this, "TopPartial"),
                //Js = "/Scripts/BigPipeT1.js",
                Js = "",
                Pid = "topId"
            };
            lock (_sysRoot)
            {
                Response.Write("<script type='text/javascript'>PageLet.InitHtml(" + JsonConvert.SerializeObject(pagelet) + ");</script>");
                Response.Flush();
                Response.Clear();
            }
        }

        private void InitLeft()
        {
            ViewBag.Left = "bbbbbbbbbbbbbbbbbbbbbbb";

            Pagelet pagelet = new Pagelet()
            {
                Css = "",
                Html = Helper.RenderPartialViewToString(this, "LeftPartial"),
                Js = "",
                Pid = "leftId"
            };
            lock (_sysRoot)
            {
                Response.Write("<script type='text/javascript'>PageLet.InitHtml(" + JsonConvert.SerializeObject(pagelet) + ");</script>");
                Response.Flush();
                Response.Clear();
            }
        }

        private void InitRight()
        {
           
            Pagelet pagelet = new Pagelet()
            {
                Css = "",
                Html = Helper.RenderPartialViewToString(this, "RightPartial"),
                Js = "",
                Pid = "rightId"
            };
            lock (_sysRoot)
            {
                Response.Write("<script type='text/javascript'>PageLet.InitHtml(" + JsonConvert.SerializeObject(pagelet) + ");</script>");
                Response.Flush();
                Response.Clear();
            }
        }

        private void InitFoot()
        {
            lock (_sysRoot)
            {
                Response.Write(
                new Pagelet()
                {
                    Css = "",
                    Html = Helper.RenderPartialViewToString(this, "FootPartial"),
                    Js = "",
                    Pid = "footId",
                    PartialViewName = "FootPartial"

                }.RenderHtml(this));
                Response.Flush();
                Response.Clear();
            }
        }

        /// <summary>
        /// 初始化HTML网页框架
        /// </summary>
        private void InitHomeHtml()
        {
            var str = Helper.RenderPartialViewToString(this, "Index");
            Response.Write(str);
            Response.Flush();
            Response.Clear();
        }
    }
}

     

三，总结

    BigPipe和Ajax二者区别：对于一个分成若干个块的页面而言，如果使用Ajax的话，每一块都需要单独发送一个HTTP请求，而如果使用BigPipe的话，不管有多少块，都仅有一个HTTP请

                                     求。所以Ajax对服务器造成的压力会是BigPipe的若干倍。

     BigPipe优点：速度快，将页面分割成多个pagelet，后台代码会为每个pagelet开启线程执行代码逻辑，执行完后立即输出到前端

     BigPipe缺点：不利于SEO， 对于这点可以写两份代码，一份使用bigpipe，一份不使用， 用User Agen判断访问者是用户还是搜索引擎，分别执行对应的那份代码。当然这样工作量增加了。

下载源码