转：名站技术分析 — facebook奇特的页面加载技术

来自：http://www.cnblogs.com/BearsTaR/archive/2010/06/18/facebook_html_chunk.html

 　没事使用代理上了下facebook，注册进入个人首页后，习惯性的查看源代码，发现了1个很有意思的现象，首页内容不少，但源代码中HTML的代码却很少，但去多出了很多段的javascript代码，这些js代码都是用于动态生成html的，facebook为什么需要这样做了？出于职业习惯，研究研究：

 

一、html代码。

     先看看首页查看的源代码，因为源代码比较大，所以把图片压缩了下，可能看不太清楚，只需要注意图中红色是html代码，其余黑压压一片的就全部是JS代码：

 

二、JS代码

     看到黑压压的JS代码是不是被吓一跳，下面就截取一段JS来分析(其余段的JS都是类似的)，facebook源代码中充斥了类似于下面的JS代码：

 

01

<script>

02	big_pipe.onPageletArrive({

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

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

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

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

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

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

09	"content":{

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

11

},

12	"page_cache":true

13

});

14

</script>