zoukankan      html  css  js  c++  java
  • BigPipe具体实现细节

     BigPipe具体实现细节

    如上文讨论的那样,具体实现如下:当用户访问该页面时,在第一个flush 的Response 内容中,返回大部分的HTML 代码,包括完整的<heaad>标签,和一个未封闭的<body>,其中<head>标签中有需要导入的文件的路径,如一些公共的css 文件和BigPipe.js 文件,<body>标签有页面的主要布局,第二块flush 的内容为一段js脚本,处理BigPipe 对象的生成,以及js 和css 文件的路径和字符串的映射

    var bigPipe = new bigPipe();

    bigPipe.setResourceMap({

    aaaaa:{

    “name”: “js/list1.js”,

    “type”: “js”,

    “src”: “js/list1.js”

    }

    );

    setResourceMap(json)为BigPipe 中的函数,功能是设置文件的映射。”aaaaa”应该是在服务器随即生成的五位字符串,name表示文件名称,type 为文件的类型,可以是”js”或”css”,”src”为文件的路径。在下面的页面中,就可以使用”aaaaa”来替代”js/list1.js”了,减少了复杂性。接下来flush 的是每一个pagelet 的内容了,例如:

    <script type=”text/javascript” >

    bigPipe.onPageletArrive({

    id:”list1″,

    content:”this is list 1 <\/br><img src =\”img13.jpg\” \/>”,

    css:["eeeee"],

    js:["aaaaa"],

    “resource_map”:{

    aaaaa:{

    “name”: “js/list1.js”,

    “type”: “js”,

    “src”: “js/list1.js”

    } ,

    “eeeee”: {

    “name”: “css/list1.css”,

    “type”: “css”

    “src”: “css/list1.css”

    }

    }

    });

    </script>

    onPageletArrive(json_arrive)也是BigPipe 的函数,功能是动态添加页面的内容和加载pagelet 所需的文件,函数的参数为json 格式的数据。其参数含义是:“id”用来寻找pagelet 标签;“ content ”是html 页面内容,在找到对应的pagelet 的标签之后,将content 内动态添加到html 页面中;“css”为该Pagelet 所需的css 文件,这里的css 文件可能在之前导入过了;“js”为该pagelet 所需的js 文件,同样,有可能在之前的pagelet已经导入过了。在函数实现过程中,因为js 文件是最后加载的,可以把这些js 的路径存入到一个数组当中(去掉重复的),在最后一起加载。resource_map”为该pagelet 所单独需要加载的js 和css 文件,同样也是json 格式的,结构与前面的setResource()中的参数一样。最后flush 的是

    </body>

    </html>

    即为最后的标签。

    结论

    经过上面的讨论,我们可以发现,使用BigPipe 技术优化页面可以有四个好处:

    1. 减少页面的加载时间

    2. 使页面分步输出,改善用户体验

    3. 使页面结构化,提高可读性,更加便于维护

    4. 每个pagelet 都是相互独立的,如果有一个pagelet 的内容不能加载,并不会影响其他的pagelet 的内容显示。

    同时,BigPipe 是一项比较新的理念, 在去年六月份才由Facebook 的工程师提出,应该说有很大的发展空间。BigPipe 的原理非常简单,并不会引入很多额外的负担,适用范围很广,容易上手。几乎所有的网页都可以采用BigPipe 的理念去进行优化,尤其对于是有着海量数据和网页比较大的网站,将会以低成本带来高回报。一般来讲,网站越大,脚本和样式表越多,浏览器版本越旧,网络环境越差,优化的结果越可观。

    引用与参考资料

    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

    注:此文转自 http://www.searchtb.com/2011/04/an-introduction-to-bigpipe.html

  • 相关阅读:
    安全购买数码相机的诀窍!(1)
    获得网卡MAC地址和IP地址
    用Asp.net实现基于XML的留言簿之二
    安全购买数码相机的诀窍!(2)
    使用Flash读取COOKIE
    数码常识:CCD的原理
    ACE 5.5 Make in RedHat AS 4 Update 4 Issue
    Eclipse Plugins 开发 (1)
    RedHat AS4 Update4 DNS (bind 9) 配置
    Maven2 & Continuum 持续整合 (1)
  • 原文地址:https://www.cnblogs.com/danghuijian/p/4400041.html
Copyright © 2011-2022 走看看