注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

网易杭研自动组

快乐耕耘,收获成长!

 
 
 

日志

 
 

Facebook页面性能优化  

2010-12-22 18:11:29|  分类: 平台开发 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

整理:璎珞

1、Site speed is critical to Facebook!
        facebook用户数                        5亿
        平均每个用户每月在线时间         5小时25分

2、Facebook性能衡量的统一标准
   Facebook从用户交互的角度定义了Time-to-Interact ( TTI 页面响应时间 ) ,作为Facebook公司内部通用的 衡量前后台性能的统一标准。TTI由以下三部分组成:
        server time                数据访问时间
        network time                数据传输时间
        client/render time        页面处理时间

3、Facebook网站的特点
   关键模块时效性要求高。例如,好友近况及好友回复 这部分功能需要实时更新,响应速度需要尽可能的快!
        部分模块数据变化不大。例如,广告栏、好友推荐栏,数据更新速率较低。
        模块集之间,业务相对分离。例如,当前用户信息 和 网站广告 之间,关联度不高。

4、相应的页面优化方案

Quickling 通过Ajax更新页面局部元素(例如,好友近况及好友回复)

目的:只更新 变动较大的模块数据;固定的模块无需被重复加载。

处理流程:
1、用户执行click/back/forward操作;
2、传递Ajax请求到server端;
3、server端返回;
4、清空用户端页面中 待更新的区域;
5、下载JavaScript/CSS;
6、用户端页面显示更新后的数据

具体方案:
1、Link Controller 截获用户的点击操作,转为quickclick请求

2、HistoryManager  截获back/forward页面消息,添加“跳转到前一个或后一个quickclick请求”的处理逻辑。从而弥补了,浏览器back/forward功能中暂不支持Ajax的缺陷。

3、Bootloader       quickclick请求响应时,Javascripts和css页面加载的优化

4、Busy Indicator  quickclick请求响应时,“页面响应中”状态的添加。从而弥补,浏览器页面响应状态显示功能暂不支持Ajax响应的缺陷。

5、CSS Unloading ?

6、Permanent link support 
quickclick请求响应后的页面链接,为相对链接。其他用户通过相对链接,访问不到当前用户所浏览的页面。因此,这种相对链接,需要被特殊转为固定链接,才能够实现页面的有效共享。
具体处理过程如下:用户复制时,复制操作被系统结果,相对链接转为固定链接;server端,新增对固定链接的处理逻辑。
server端能够识别并分解固定链接中包含的请求,最后处理并给出响应。

7、Resetting timer function 在reload整个页面时,关闭历史定时函数。

应用效果:
响应延迟降低了10%
Facebook数据中心开销降低10%


PageCache缓存用户访问过的一些历史数据

目的:对于一些访问较频繁的页面,给予适当的缓存,用以减少冗余的页面访问次数。
在应用Page Cache技术之后,我们面临两个挑战:
其一,需要保证,页面中显示的内容始终是最新的;
其二,在发生用户操作之后,缓存中的历史内容也需要得到相应更新。

处理流程:
1、用户click | back
2、向server端发送quick click请求
3、server端返回请求结果
3.5 用户本地缓存请求结果
4、清空用户页面中待刷新的区域
5、下载java scripts/CSS
6、用户页面中显示更新后的信息

具体方案
我们要解决的主要问题在于,如何保证页面缓存中的内容始终是最新的。
按quick click(Ajax类型)请求需要更新内容的差异,我们将这个问题细分为以下三个子问题,并给出相应的处理方案
  • quick click请求之后,历史内容不变更只追加的情况下,页面缓存如何更新?
例如:追加新的好友近况。
处理:
新增API——onpagecacheRegister,处理逻辑如下:
1> 当页面内容需要从缓存中获得时,开始执行onpagecacheRegister操作;
2> 通过onpagecacheRegister操作,向server端发送内容递增类型Ajax请求;
3> 通过onpagecacheRegister操作,防止历史数据被请求,实现基于历史数据的新数据递增显示。
  • quick click请求之后,单个页面内部历史内容发生变更时,页面缓存如何更新?
例如:好友近况中的评论发生变化。
处理:
1>record 缓存页面中,记录多个需要实时更新的点。
2>replay 从缓存中恢复页面时,触发对应点的操作,恢复整体数据的同时,刷新局部数据。
  • quick click请求发生之后,多页面内部历史内容交叉变更时,页面缓存如何更新?
例如:配置页面下,接受好友请求的操作,将触发主页下的相关信息(好友人数/请求加好友的人数)
处理:
1>server端捕获到这样的操作之后,向client端发送消息;
2>消息的内容中包含了哪个页面的哪些数据需要发生变更;
3>在收到这类消息之后,client端将刷新本地的cache内容,相应更新cache中的局部数据。

应用效果
用户接受数据的速度加快了10倍;
Face book数据中心开销降低了2%。


BigPipe采用流水线的方式,处理长请求。
目的:更有效的处理长请求,降低用户的等待延迟。

处理流程:
1、按业务逻辑的不同,将页面划分为多个域,这里称之为pagelets;
2、client端对某个页面的访问请求,被细分为对多个pagelets的访问请求;
3、server端接收到这类请求后,按照合适的次序进行处理;
4、client端每接收到一个pagelet,即刻显示一个pagelet。

具体方案:
引入BigPipe编程模型,实现页面请求的流水线处理
基本特性:HTML/JavaScript/CSS/onloadRegister
高级特性:Pagelet hierarchy/Phased rendering/Cross-pagelet dependencies (data dependency, display dependency, JavaScript dependency)
代码示例:
// Step 1: create BigPipe instance

$big_pipe = BigPipe::getInstance (BigPipeType::PIPELINE);

// Step 2: Specify page layout and pagelet place holders.

$big_pipe->setPage (

’<div id=“left_column”><div id=“pagelet_navigation”></div></div>

<div id=“middle_column”><div id=“paglet_composer”></div>

<div id=“pagelet_stream”></div> </div>’);

// Step 3: add pagelets to the pipe

$big_pipe->addPagelet (new UIPagelet ()

->setSrc (‘/pagelet/composer.php’)

->setWrapperId (‘pagelet_composer’));

// Step 4: generate pagelets flush them out.

echo $big_pipe->render ();

 

按照浏览器的不同,配备多中BigPipe工作模式:

Single flush mode 原始模式,不生成pagelets请求。适用于低端浏览器的情况。
Pipeline mode(默认模式)        顺序的发送、处理pagelets请求,以及顺序的接收pagelets请求结果。
Parallel mode 并行的发送、处理pagelets请求,以及接收pagelets请求结果,不考虑pagelets的顺序。

应用效果:用户端接收数据等待时间减少了一半。


  评论这张
 
阅读(1180)| 评论(2)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018