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

标签: 网站架构 fecebook | 发表时间:2010-06-23 11:04 | 作者:Euy Hui Hui
出处:http://www.fovweb.com

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

一、html代码。

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

二、JS代码

看到黑压压的JS代码是不是被吓一跳,下面就截取一段JS来分析(其余段的JS都是类似的),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>

让我们再看看big_pipe.onPageletArrive函数到底做了什么了?我们只关注参数中的id,js,css,content4个参数,可以看出js和css都是进行过编码,下面是解码后我们关注的代码:

<script>
big_pipe.onPageletArrive({
	"id":"pagelet_welcome_box",
	"css":{
		name: "css/c5mv8gd5gwoc4kk0.pkg.css"
		permanent: true
		src: "http://static.ak.fbcdn.net/rsrc.php/zBP3B/hash/abee68r4.css"
		type: "css"
	},
	"js":{
		name: "js/19khsprwvtvokwow.pkg.js"
		permanent: false
		src: "http://static.ak.fbcdn.net/rsrc.php/zAVXU/hash/e8mwcqsi.js"
		type: "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次就全部输出的,而是一段一段进行输出的。

总结

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是并行进行处理的,服务器处理完一部分数据就把已经处理好的数据交给浏览器进行呈现处理,自己再继续处理其他的数据。

PS:文章看完了,有些同学可能会想,为什么不像博客园一样,前台全部用ajax来异步读取”推荐博客” ,“最新新闻”的数据了,这样做就不会出现因为要处理太多数据而让客户端等待太久的问题了。我觉得对于facebook这种并发量巨大的网站,使用这种方法无疑会产生太多的请求,比如facebook首页用了14个chunk,如果使用ajax,则需要多14个request请求,这将增加不少服务器的压力吧。

[作者]:BearRui(AK-47)
[博客]: http://www.cnblogs.com/BearsTaR/

相关内容

相关 [技术分析 facebook 页面] 推荐:

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

- Hui Hui - 视野
没事使用代理上了下facebook,注册进入个人首页后,习惯性的查看源代码,发现了1个很有意思的现象,首页内容不少,但源代码中HTML的代码却很少,但去多出了很多段的javascript代码,这些js代码都是用于动态生成html的,facebook为什么需要这样做了. 先看看首页查看的源代码,因为源代码比较大,所以把图片压缩了下,可能看不太清楚,只需要注意图中红色是html代码,其余黑压压一片的就全部是JS代码:.

免费下载:Facebook粉丝页面GUI设计包(PSD格式)

- 小明 - 互联网的那点事
很荣幸能有机会为DamnDigital的广大读者分享一款由Hike设计的Facebook粉丝页面(Fan Page) GUI(图形用户界面)设计包(PSD格式)(原载于Smashing Magazin). PSD格式可以加快创建预览的过程,从而避免编辑所有的DOS口令,同时可按用户的需求制订所需的文字、按钮和数据内容.

Pinterest新版个人页面上线 酷似Facebook(图)

- - TechWeb 今日焦点 RSS阅读
Pinterest新个人页面上线 酷似Facebook.   新浪科技讯 北京时间3月16日晚间消息,社交网站Pinterest周四进行了首次重大改版,新页面重点对个人信息页面进行了优化.   此次改版被业界期待已久,改版后的新页面更加流畅. 此前位于页面侧部的分类栏目被移至顶部,重点突显了照片和内容.

技术分析与行为

- 猪不鸣 - 扬韬
随着股市节节下滑,一些测底的言论逐渐多起来. 比较有影响的判断包括:历史上,底部市盈率15倍,而目前只有14倍了;历史上,底部成交量400多亿元,现在500亿元左右了;持仓账户占全部账户的比例创下新低了,意味着底部的到来;股市交易厅门可罗雀了;亏损股民扩大了;MACD底背离了;指数碰到布林线下轨了;等等.

Facebook 发表「Timeline」,给个人页面以时间轴为主的新呈现方式

- austin - Engadget 中国版
在稍早的 F8 演讲中,Facebook 老大 Mark Zuckberg 发表了全新的个人页面排板方式,取名为「Timeline(时间轴)」. 它背后的理念,是让每件事发生的时间点更明确,所以除了在页面左方加入了一个时间轴之外,整体来说也更强调可视化的呈现 -- 如果你的 FB 以琐碎的文字居多的话,可能效果就会差一些了.

中国的Facebook?

- Lorna - It Talks--上海魏武挥的博客
腾讯近日很低调地推出了一个名为“朋友”的网络服务(也是一个使用独立域名的网站),这是一个与时下社交网站,比如人人、开心等非常类似的产品. 与它们一样,目前这个“朋友”上也加载了一些应用,当然,一贯的,以腾讯自家出品为主. 而且,我个人以为,未来会有更多的腾讯在QQ这个客户端上的应用,逐步向这个网站迁移.

Facebook初探

- 亦农 - 王建硕
今天的湾区阳光灿烂,280州际公路两边的绿色山坡和蔚蓝的白云,让人觉得自己是Windows XP桌面上的一个图标. 下午,2点,终于来到Facebook这个神奇的公司. 他们的新家在南加利福尼亚街的最里面,一幢两层的楼里. 他们刚刚从车位紧张的Palo Alto城里搬到这里,据说一层楼又要搬了. 我好像是他们再次搬地方前的最后一批访客.

Facebook败给Foursquare

- We_Get - GeekPark 捕风捉影
除了我们熟知的QQ,互联网世界里以自身强大资源来复制小公司的产品和服务的事,绝不少见. 去年8月份,Facebook推出了Facebook Places,这是一个类似Foursquare的基于地理位置的手机在线签到功能. Foursquare当时是社交网站新贵,几个月以后它成了代表着全球互联网方向中的SoLoMo中的Lo—Location.

Facebook的标语

- - 阮一峰的网络日志
Facebook即将 上市,一时之间成为全球新闻热点. 为了不错过商机,有人将Facebook内部的标语做成 海报,每张20美元,放到网上卖. 据说,从扎克伯格创业初期,这些标语就贴在Facebook的办公室,作为行动准则,激励员工. 虽然这些标语很简单,但是我发现,它们真的具有警醒的效果,能指导你做出正确的事.