Archive for 六月, 2010

facebook奇特的页面加载技术

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

原文链接:
《名站技术分析 — facebook奇特的页面加载技术》

————————————
相关博文:
《为什么Facebook比以前快2倍》


为什么Facebook比以前快2倍

随着用户的增多,几乎所有网站都会面临一个问题:网站速度变慢,用户体验变得不好。Facebook已经有超过5亿的用户,其用户增长速度令人震惊,但是人们从来没有发现Facebook变慢,相反,它正变得越来越快!Facebook 为什么能越来越快?

罗伯特 约翰逊(Robert Johnson)是Facebook的项目总监,他说:在工程师团队对Facebook代码进行了重写和深入优化之后,网站的速度以前快了2倍。

1.Facebook花了多久才让它变快2倍的呢?

罗伯特 约翰逊:我们对网站进行的大幅度的”改革”,这的确使网站速度得到很大的提升。工程师团队花了大概一个月来规划这个项目,具体的实施过程则花费了6个月。

2.在这次的重写行动中,你们在技术上做了什么大的改进?

罗伯特 约翰逊:我们队源代码做了比较多的优化和重写:

1、把用户请求之后的内容生成、网络传输和网页渲染的时间重叠起来;
2、把相应的功能代码放进一个在页面初始化时需要用到的Javascript核心功能文件中;

这个项目叫做”BigPipe“,只要当客户端的浏览器准备好了,我们的服务器就会以最快的速度以流的形式传送内容,当我们的服务器还在产生数据的时候,客户端的浏览器就已经开始下载静态内容和渲染页面最重要的部分了,我们把几部分的时间重叠了起来,使用户感觉更快。这个新的JavaScript库叫做”Primer“.

除了服务器端的大项目之外,我们还对所有的文件都进行了”瘦身”,让一切变得更小更轻,比如我们进行了CSS图片合并(CSS Sprites).

3.Facebook是否鼓励开发员大胆尝试和创新呢?

罗伯特 约翰逊:也许这是这个项目最棘手的部分之一。对于Facebook来说,开发速度是最重要的指标之一,我们不希望看到任何会使开发速度慢下来的事情。我们既要让开发人员尽可能容易的完成任务,又要使网站代码尽可能得到优化,所以我们制造了一些辅助开发工具,它们能使鱼和熊掌兼得。比如Primer,让它使Facebook运行得更快和让它易于集成和不容易被误用是同等重要的。

我们监测一切可能会影响程序性能的因素,并开发相应的工具,在程序正式放出之前检查代码。

这很重要,一旦代码出现问题,系统就会自动提醒开发人员,而不是靠开发人员自己去检查那些问题。这样开发人员就可以不断地创新,只要在出现一些比较特殊问题的时候,开发人口才需要停下来解决那些问题。

原文: oreilly 译文:http://cnnet.us/taobao/facebook-faster/ 转载请保留出处


webrebuild.org第四届年会-北京站

举办时间: 2010年07月17日(星期六)
举办地点: 北京航空航天大学新主楼会议中心 第二报告厅 (地图
报名地址: 在线报名
报名截止: 2010年06月27日
官方网址:webrebuild.org

主要议程:

· (W3C)Klaus Birkenbihl——题目待定
· 范俊豪(腾讯)《从浏览器原理看web标准的重要性》
· 谢子斌(Opera)——《HTML5与CSS3》
· 张克军(豆瓣)——《豆瓣的前端架构》

—————————————————–
会后相关资源分享:
data on the web ——- Klaus Birkenbihl(W3C)
建立前端开发团队 ——- 蒋定宇(D-Link 台湾)
谈谈HTML5和CSS3 ——- 谢子斌(Opera)
网页性能优化之路 ——- 范俊豪(腾讯)
前端基础架构 ——- 张克军(豆瓣)
从浏览器解析看标准的重要性 ——- 梁璟彪(腾讯)


Copyright © 2008-2012 Chesanqi's Web World. All rights reserved.
Jarrah theme by Templates Next | Powered by WordPress