zoukankan      html  css  js  c++  java
  • BigPipe Net

    BigPipe 技术是FaceBook 提出的新型浏览器加载模式。提高了网站加载速度和用户体验。

    对于业务逻辑比较复杂的社区,电子商务类网站。Bigpipe是一个高性价比提升网站速度方案。

    BigPipe 介绍

    http://baike.baidu.com/view/4601904.htm

    bigpipe技术的ppt:http://twork.taobao.net/books/237

    bigpipe的java实现:http://codemonkeyism.com/facebook-bigpipe-java/

    一篇介绍bigpipe的文章:http://www.54chen.com/architecture/rose-pipe-http-54chen.html

    实现方案

    当前的实现方式大多基于JAVA 和PHP实现方式,通过ASP.NET MVC 实现BIGPIPE

    仿新浪微博

    JS 基本框架代码,base.Js

    var CMB = function () {
        var js = {},
        logs = [],
        cachedBrowser;
        js.inc = function (js, logs) {
            return !0
        };
        // 注册多个命名空间
        js.register = function (ns, fun) {
            var e = ns.split("."),
            f = js,
            g = null;
            while (g = e.shift()) {
                if (e.length) {
                    f[g] === undefined && (f[g] = {});
                    f = f[g]
                } else {
                    if (f[g] === undefined) {
                        try {
                            f[g] = fun(js)
                        } catch (h) {
                            logs.push(h)
                        }
                    }
                }
            }
        };
        js.regShort = function (b, c) {
            if (js[b] !== undefined)
                throw "[" + b + "] : short : has been register";
            js[b] = c
        };
        js.IE = /msie/i.test(navigator.userAgent);
        js.E = function (a) {
            return typeof a == "string" ? document.getElementById(a) : a
        };
        js.C = function (a) {
            var b;
            a = a.toUpperCase();
            a == "TEXT" ? b = document.createTextNode("") : a == "BUFFER" ? b = document.createDocumentFragment() : b = document.createElement(a);
            return b
        };
        js.log = function (a) {
            logs.push("[" + (new Date).getTime() % 1e5 + "]: " + a)
        };
        js.getErrLogInfoList = function (a) {
            return logs.splice(0, a || logs.length)
        };
        js.existElm = function (id) {
            return typeof document.getElementById(id) !== 'undefined';
        };
        js.browser = function () {
            if (!cachedBrowser) {
                var ua = navigator.userAgent.toLowerCase();
                var match = /(webkit)[ \/]([\w.]+)/.exec(ua) ||
                    /(opera)(?:.*version)?[ \/]([\w.]+)/.exec(ua) ||
                    /(msie) ([\w.]+)/.exec(ua) ||
                    !/compatible/.test(ua) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(ua) ||
                    [];
                cachedBrowser = match[1];
            }
            return cachedBrowser;
        }
        return js
    } ();
    $Import = CMB.inc;
    CMB.register("comm.LoadCss", function (obj) {
        return function (i,url, cb) {
            var cl = obj.C("link");
            cl.setAttribute("rel", "Stylesheet");
            cl.setAttribute("type", "text/css");
            cl.setAttribute("charset", "utf-8");
            cl.setAttribute("href", url);
            if (obj.browser() == "msie")
                cl.onreadystatechange = function () {
                    /loaded|complete/.test(cl.readyState) && cb(i);
                }
            else if (obj.browser() == "opera")
                cl.onload = cb(i);
            else
            //FF, Safari, Chrome
                (function () {
                    try {
                        cl.sheet.cssRule;
                    } catch (e) {
                        setTimeout(arguments.callee, 20);
                        return;
                    };
                    cb(i);
                })();
            document.getElementsByTagName("head")[0].appendChild(cl);
        }
    });
    CMB.register("comm.LoadJs", function (obj) {
        return function (jsLinks) {
            if (jsLinks && jsLinks.length) {
                for (var i = 0; i < jsLinks.length; i++) {
                    var spt = obj.C("script");
                    spt.setAttribute("type", "text/javascript");
                    spt.setAttribute("src", jsLinks[i]);
                    document.getElementsByTagName("head")[0].appendChild(spt);
                }
            }
        };
    });
    CMB.register("pageletM.view", function (obj) {
        return function (vjson) {
            var defVjson = { pid: "", html: "", css: [], js: [] };
            vjson = $.extend(defVjson, vjson);
            if (obj.existElm(vjson.pid)) {
                if (vjson.css && vjson.css.length) {
                    for (var i = 0; i < vjson.css.length; i++) {

                        CMB.comm.LoadCss(i, vjson.css[i], function (j) {
                            if (j == vjson.css.length-1) {
                                $("#" + vjson.pid).html(vjson.html);
                                CMB.comm.LoadJs(vjson.js);
                            }
                        });
                    }
                } else {
                    $("#" + vjson.pid).html(vjson.html);
                    CMB.comm.LoadJs(vjson.js);
                }

            }
        }
    });

    C#后台主要代码

    注册方法 RegisterPagelet

         var context = helper.ViewContext.HttpContext;
                bool isBigpipe = context.Request.Browser.Cookies &&
                                context.Request.Browser.Browser.Length>0;
                if (!isBigpipe)
                {
                    if (pagelet.Data.css != null)
                        foreach (string css in pagelet.Data.css)
                            helper.IncludeCss(css);

                    pagelet.Execute();
                    context.Response.Write(string.Format("<div id=\"{0}\">{1}</div>", pagelet.Container, pagelet.Data.html));
                    context.Response.Flush();
                    if (pagelet.Data.js != null)
                        foreach (string js in pagelet.Data.js)
                            helper.IncludeJs(js);

                    return;
                }

                List<Pagelet> pagelets = (List<Pagelet>)context.Items["Pagelets"];
                if (pagelets == null)
                {
                    pagelets = new List<Pagelet>();
                    context.Items["Pagelets"] = pagelets;
                }
                pagelets.Add(pagelet);
                //输出块
                context.Response.Write("<div id=\"" + pagelet.Container + "\"></div>");

     BIGPIPE输出前端JS代码

       static readonly object _locker = new object();
            public static void ExecutePagelets(this HtmlHelper helper)
            {
                var context = helper.ViewContext.HttpContext;
                List<Pagelet> pagelets = (List<Pagelet>)context.Items["Pagelets"];
                if (pagelets == nullreturn;
                Parallel.For(0, pagelets.Count, (i) =>
                {
                    var pagelet = pagelets[i];
                    pagelet.Execute();
                    lock(_locker) {
                        context.Response.Write(pagelet.Serialize());
                        context.Response.Flush();
                    }
                });
            }

     代码下载地址,已调试,优化

    http://download.csdn.net/detail/turandeziwo/4256798

  • 相关阅读:
    PHP学习笔记-session
    [C语言] 插入排序之希尔(shell)排序的特性及实现
    [C语言] 插入排序之二分插入排序的特性及实现
    [C语言] 插入排序之直接插入排序的特性及实现
    [Linux环境编程] TCP通信与多线程编程实现“多人在线聊天室”
    [Linux环境编程] 信号的基本概念与操作函数
    [Linux环境编程] Linux系统命令“rm -rf”的实现
    [Linux环境编程] Linux系统命令“ls -R”的实现
    [Linux环境编程] Linux系统命令“ls -l”的实现
    [C语言] 单向链表的构建以及翻转算法_图文详解(附双向链表构建代码)
  • 原文地址:https://www.cnblogs.com/xianzuoqiaoqi/p/2472779.html
Copyright © 2011-2022 走看看