数据加载的bigpipe

数据加载的bigpipe

今天听一个关于页面加载的分享，想到了bigpipe模式，记一下今天相关的了解。

1.传统的页面加载模式：

用户点击了一个链接，即向服务器发送了一个请求，服务器收到请求，整合完页面所需的全部资源后，在一个HTTP Response 中把它传送给客户端。浏览器收到数据，解析渲染，页面展示出来，这是一个单线程的过程。即，服务器在组织数据时，浏览器处于等待的状态，浏览器在渲染页面的时候，服务器处于闲置的状态，资源浪费。用网上看到的一个很生动的例子：你到餐馆吃饭，点了四个菜。传统的加载模式，即当厨师将菜全部炒好后才端上桌。

2.bigpipe加载模式：

页面被分成了若干模块，pagelet，服务器进行数据组织时也以pagelet为单位，组织完一个单位的数据，就推向客户端，客户端进行渲染加载。这样，服务器端和浏览器端都不会处于闲置的状态。也就是刚才的例子：厨师炒好一个菜，就端上来一个；

基本原理了解了，看下具体的实现，以微博为例。

<script>STK && STK.pageletM && STK.pageletM.view({"pid":"pl_business_enterpriseWeiboNew","js":[],"css":[],"html":""})</script>

以这一个为例（事实上微博的源码可以找到很多类似的写法）。在pageletM.view这个方法中，我们可以看到，具体实现的时候，需要传入：对应pagelet的id,我一向都认为，id在html里应当有某种标识符的作用。这里，他就以某个模块的id作为标识符，同时组织对应模块的html和css。

具体的这个方法尚需摸索，在网上找到了一个类似的demo.

     (function ($) {  

       //pagelets holder

     var pagelets = {};

        //bipipe

        var bigpipe = function () { this._init.apply(this, arguments); };

       bigpipe.prototype = {

            _init: function () { },

          add: function (let) {

              pagelets[let['Name']] = let;

            $.getJSON(let['Url'], function (data) {

                    $('#' + let['Target']).append(let['Template']

                      .replace('${name}', data['name'])

                      .replace('${description}', data['description']));

              });

          }

    }

      window.client = new bigpipe();

 })(jQuery);

我好久没用jquery了，对于网上的这个demo只是能猜出一个大概的思路，接下来呢，准备在php和js两个方面研究下bigpipe的具体实现，肯定以js为主