tml代码。先看看首页查看的源代码因为源代码比较大所以把图片压缩了下可能看不太清楚只需要注意图中红色是html代码其余黑压压一片的就全部是JS代码二、JS代码看到黑压压的JS代码是不是被吓一跳下面就截取一段JS来分析(其余段的JS都是类似的)facebook源代码中充斥了类似于下面的JS代码1234567891011121314scriptbig_pipe.onPageletArrive({id:pagelet_welcome_box,phase:1,is_last:false,append:false,bootloadable:[],css:[lDRwi,eonN],js:[FB8D,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让我们再看看big_pipe.onPageletArrive函数到底做了什么了我们只关注参数中的id,js,css,content4个参数可以看出js和css都是进行过编码下面是解码后我们关注的代码1234567891011121314151617181920scriptbig_pipe.onPageletArrive({id:pagelet_welcome_box,css:{name:css/c5mv8gd5gwoc4kk0.pkg.csspermanent:truesrc:http://static.ak.fbcdn.net/rsrc.php/zBP3B/hash/abee68r4.csstype:css},js:{name:js/19khsprwvtvokwow.pkg.jspermanent:falsesrc:http://static.ak.fbcdn.net/rsrc.php/zAVXU/hash/e8mwcqsi.jstype:js},content:{pagelet_welcome_box:div id\c4c13a3ed2dd1e0e349b72\div class\UIImageBlock clearfix fbxWelcomeBox\ ...这里省略N多HTML}});/script看到还原后的JS你应该猜出onPageletArrive函数是干嘛的吧其实onPageletArrive最主要实现就是把content中的html内容插入到对应id(上面的pagelet_welcome_box)的html元素中,并下载对应的css和JS。三、chunk、flush看到上面的分析后大家一定奇怪facebook为什么要生成那么多段JS再用js去动态插入html代码这不是脱了裤子放屁多此一举吗还不如直接生成html代码了。facebook当然不会那么笨了让我们先监控下facebook的http请求监控图如下注意上图中红色部分原来facebook使用了chunk对页面进行分块输出。这就比较容易理解了facebook首页的js代码段不是1次就全部输出的而是一段一段进行输出的。什么是chunk和如何使用chunk,请参考我的另1篇博文flush让页面分块,逐步呈现总结facebook使用chunk技术让页面分块输出成很多JS段这样做的好处就是服务器和客户端可以并行进行处理不用等服务器全部处理完毕客户端才进行处理。举个博客园首页的列子博客园首页分为下面几块(推荐博客排行,首页随笔列表,最新新闻...),我们一般对该http请求处理如下1. 浏览器发送http请求2. 服务器处理请求(从缓存读取前50个推荐博客从数据库读取首页随笔列表,从数据库读取最新新闻)生成首页的html代码。3. 服务器发送html代码给客户端4、浏览器接收到响应处理html(下载css,js,image,执行js等等)可以看出传统的http请求4个过程中每个过程都必须等待前1个过程完成后才能执行这样就存在很大的资源浪费。facebook的对该http请求的处理如下1. 浏览器发送http请求2. 服务器处理请求(从缓存读取前50个推荐博客,生成推荐博客的js代码段flush输出该代码段,服务器继续读取首页随笔列表并生成输入js代码段。服务器继续读取最新新闻并生成输入js代码段。3. 浏览器接收到js代码段下载该代码段所需的js和css。插入html代码。在这个处理流程中最大的特点就是2,3是并行进行处理的服务器处理完一部分数据就把已经处理好的数据交给浏览器进行呈现处理自己再继续处理其他的数据。