没事使用代理上了下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次就全部输出的,而是一段一段进行输出的。
什么是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是并行进行处理的,服务器处理完一部分数据就把已经处理好的数据交给浏览器进行呈现处理,自己再继续处理其他的数据。
PS:文章看完了,有些同学可能会想,为什么不像博客园一样,前台全部用ajax来异步读取"推荐博客" ,“最新新闻”的数据了,这样做就不会出现因为要处理太多数据而让客户端等待太久的问题了。我觉得对于facebook这种并发量巨大的网站,使用这种方法无疑会产生太多的请求,比如facebook首页用了14个chunk,如果使用ajax,则需要多14个request请求,这将增加不少服务器的压力吧。
另外ajax不支持跨域请求(包含二级域名),这时更多采用的是jsonp。
原文地址:http://www.cnblogs.com/BearsTaR/archive/2010/06/18/facebook_html_chunk.html
分享到:
相关推荐
随着时间的发展,Facebook引入了“BigPipe”技术,它将网页加载分成了多个小部分,实现了按需加载,显著提高了页面加载速度。此外,Facebook还广泛使用了分布式缓存系统Memcached和NoSQL数据库HBase,以及图数据库...
广告屏蔽软件的普及,一方面保护了用户的隐私,减少了追踪,并提高了网页加载速度,但另一方面对依赖广告收入的网站构成了威胁。对于Facebook而言,其利润与用户看到广告的数量直接相关。因此,Facebook的技术团队...
Facebook源码包含了各种前端性能优化技巧,如代码分割、懒加载、预加载和预渲染等,以提升页面加载速度和用户体验。此外,还会采用Babel进行ES6+语法转换,使代码兼容更多的浏览器。 3. **后端架构**: Facebook...
它们直接影响着用户体验,包括页面加载速度、数据处理效率和整体的系统稳定性。以下是可能会在文档中涉及的一些关键知识点: 1. **缓存层次结构**:Facebook可能采用了多级缓存策略,从本地内存缓存到分布式缓存...
- 包括缓存机制、异步加载等技术的应用。 通过以上章节的学习,开发者不仅能够掌握 Facebook API 的基本使用方法,还能够在实践中不断积累经验,最终构建出功能完善且用户体验优秀的 Facebook 应用。
- 在网页中集成 Facebook 社交插件的方法。 #### 四、构建 Facebook 应用程序:从零开始(第四章) 通过本章节,开发者将学习如何从头开始构建一个完整的 Facebook 应用程序,包括设计、实现和测试过程。 1. **...
Facebook采用Ajax技术,使得网站在数据加载时无需重载整个页面,提升了用户体验,减少了等待时间。这种方法可以提高应用程序的响应速度,并且对用户操作作出快速响应。 其次,缓存技术的应用对于提高网站性能至关...
总结来说,"gif动态图片播放Facebook特效"是一种利用JavaScript实现的网页性能优化技术,它结合了延迟加载和用户交互,既提升了网页加载速度,又保持了动态图片的吸引力。通过分析压缩包中的代码,我们可以学习到...
通过定制化改进开源技术、引入自研服务和工具,以及遵循简洁高效的设计原则,Facebook成功构建了一个能够应对海量用户和数据挑战的架构体系。这不仅是技术上的创新,也是对互联网服务本质的深入思考。
4. **BigPipe**:为了解决页面加载速度问题,Facebook推出了BigPipe技术,它将网页分割成多个小部分并异步加载,显著提高了用户体验。 5. **数据库优化**:Facebook早期使用MySQL,但随着数据量的增长,他们引入了...
- **Facebook Quickling项目**:通过Ajax技术仅加载页面中发生变化的部分,而不是整个页面,从而显著提高了网站的整体性能。 - **YouTube视频加载优化**:通过优化JavaScript代码执行逻辑、预加载视频片段以及提供...
"Facebook Collector"是一个基于JavaScript的工具,主要用于收集和整理Facebook平台上的信息,如页面帖子、个人资料和图片等。这个工具可能对社交媒体分析、数据挖掘或个人兴趣爱好者有所帮助。接下来,我们将深入...
该程序通过分析Facebook帖子的标题和内容,可能运用自然语言处理技术(NLP)来判断是否存在clickbait特征,如过于夸张的表述、省略关键信息或者使用情绪化的词汇。 【标签】:“JavaScript开发-其它杂项” 这个...
在Android程序开发中,模拟Facebook布局效果是一种常见的需求,它涉及到Android UI设计、自定义View、滑动处理、数据加载等多个技术领域。这份名为"Android程序研发源码Android 仿facebook布局效果.zip"的压缩包文件...
4. **页面部分缓存**:对于动态生成的网页,部分缓存技术允许只缓存页面的一部分,例如评论区、侧边栏等,这在保持页面更新的同时,降低了整体的计算需求。 5. **图片分离与缩略图分离**:图片服务独立出来可以减轻...
总结来说,net bigPipe 是一种强大的性能优化技术,通过分块加载和异步处理,极大地提高了网页加载速度,提升了用户体验。在实际应用中,开发者需要充分理解和掌握其原理,以便在.NET环境中有效地实现和优化。
Facebook还采用了一种名为“BigPipe”的页面加载优化技术,通过分块加载和并行处理来显著提升用户体验。 Google的架构设计以搜索为核心,利用MapReduce进行大规模数据处理,以及Bigtable提供分布式数据存储。Google...
这个解决方案对于那些希望集成Facebook功能或分析用户行为的应用开发者来说非常有用。在深入探讨FacebookIdListener之前,我们先理解一下Facebook ID的重要性和背景。 Facebook ID是每个Facebook用户在平台上的唯一...
本文将深入探讨Ajax的技术原理、核心技术及工作流程,并列举一些典型的Ajax应用案例,最后分析其发展趋势。 #### Ajax的技术原理 传统的Web应用采用的是同步交互方式,即用户每发起一次请求,服务器就会处理并返回...
案例分析部分,书中的实际案例将理论知识与具体实践结合,例如Facebook的BigPipe技术,通过分页加载提高页面渲染速度;Netflix的混沌工程,通过模拟故障来增强系统的健壮性;以及阿里巴巴的双11大促背后的技术挑战和...