Hello World! FaceBook的软件架构

System.out.println("Hello World!");

facebook为什么能风靡全球？
除去有用的功能性需求之外，良好的用户体验也一定占了很大比重。
在全球都在用FB的今天，良好的软件架构设计保障了人们的快捷使用。


最出名的是BigPipe/Pagelet - 解决页面可感知速度问题。


受到硬件的启发（管道与标量微处理器），Facebook团队使用PHP和JavaScript（并不需要改变现有的Web服务器和浏览器）“重新设计了现有的Web服务处理过程”。重新设计的内容包括：将页面处理过程分解为8个不同的步骤（每个步骤叫做一个“pagelet”），其中一些步骤可以并行处理。通过返回如下内容来响应最初的页面请求：


一个未闭合的HTML文档，包含了HTML head标签和body标签的第一部分内容。head标签包含了BigPipe的JavaScript库，用于解释稍后收到的pagelet响应内容。在body标签中，有个模板指定了页面的逻辑结构和pagelets的占位符。


然后创建JSON编码的对象（即pagelets），里面包含了“pagelet需要的所有CSS、JavaScript资源、HTML内容以及一些元数据”。


复杂网页不断攀升的加载时间延迟问题已经不是什么新话题了，也有不少人提出使用某种管道技术来提升性能。Aaron Hopkins在Die.net上讨论过如何优化页面加载时间，除了传统的页面请求生命周期外，还有不少影响因素可以影响到页面加载的延迟时间。Aaron提到的有趣儿的一点是：


IE、Firefox与Safari默认情况下是禁用管道的；Opera是我所知道的唯一一个启用了管道的浏览器。禁用管道意味着需要应答每个请求，在下一个请求发出前需要释放掉上一个请求所建立的连接。这样就增加了用户等待的延迟时间，平均延迟时间为双向的ping时间除以允许的连接数。如果服务器禁用了HTTP持续连接（keepalives），那么还需要再进行一次TCP三次握手，这又导致一次双向连接，造成延迟时间加倍的后果。


并没有说BigPipe利用了浏览器所固有的管道功能，实际上却暗示了BigPipe并没有这么做，因为他说不需要对现有的服务器与浏览器进行任何改变。


另外的好处可能在于易于做缓存，某个页面虽然是动态的但大部分内容是静态的，分开之后很容易缓存。






对facebook前端的代码进行观察，发现JS代码非常的多




<script>


big_pipe.onPageletArrive({


    "id":"pagelet_welcome_box","phase":1,"is_last":false,"append":false,"bootloadable":[],


    "css":["lDRwi","eon+N"],


    "js":["F+B8D","IdQlc"],


    "resource_map":[],"requires":[],"provides":[],


    "onload":["window.__UIControllerRegistry[\"c4c13a3ed2dd1e0e349b72\"] = new UIPagelet(\"c4c13a3ed2dd1e0e349b72\", \"\\\/pagelet\\\/generic.php\\\/WelcomeBoxPagelet\\\/\", {}, {});; ;"],


    "onafterload":[],"onpagecache":[],"onafterpagecache":[],"refresh_pagelets":[],"invalidate_cache":[],


    "content":{


        "pagelet_welcome_box":"<div id=\"c4c13a3ed2dd1e0e349b72\"><div class=\"UIImageBlock clearfix fbxWelcomeBox\"> ...这里省略N多HTML"


        },


    "page_cache":true


});


</script> 


实际上，这段代码是用来生成html，css和js的
那么为何要生成那么多js，再用js去动态插入html代码？而不是直接生成html？
其实就是使用chunk计数让页面输出分成很多JS段，以达到服务器和客户端并行处理的目的。