Facebook的Changhao jiang博士的分享ppt
作者:kun10 发布时间:December 11, 2010 分类:牛人之整理
Changhao jiang facebook
View more presentations from amdgigabyte.
jiang博士的演讲主要讲解了facebook页面优化的三大技术
我写了一些自己的理解,你可以对着幻灯自己理解一下。
一、quickling
(对页面的刷新使用ajax的方法来模拟,以消除以一些例如顶部导航等不太变动的资源的反复调用,中间需要模拟浏览器重载页面的事件)
个人理解:
最简单的实现可以理解为,用js写一个事件委派,对所有的链接的click事件做捕获,如果链接是新开窗口的,就用ajax的方法去向服务器请求相应的这个页面的html,返回回来替换掉现存页面的内容部分,注意不是替换页面的全部。这样可以请求的时候的资源就小了一些。
quickling遇到的一个问题是,ajax回来的css加载的多了之后客户端会变得缓慢(尤其是低版本的ie),此时可以对quickling设定一个预值,比如当一个页面使用了10次quickling之后就不再使用quickling而重新刷一遍页面,以此循环。
2、pagecache
(对常用的页面的dom缓存于JavaScript中,在重新载入这个页面的时候从客户端调用)
个人理解:
例如facebook的个人主页是被经常的调用的,这时候就对此页面使用pagecache技术,对页面的dom缓存于JavaScript变量中,当用户再次使用这个页面的时候就从JavaScript变量中调用之前缓存的页面dom。这样拼装页面都是在客户端进行的,当然也遇到一些的问题,页面的dom是在载入之后被缓存的,因此用户在页面载入后向服务器做的一些数据的请求导致页面内容的变化将不被记入在原来缓存的变量中,这样下次载入的时候用户会看不到上一次自己对主页做的操作,对此facebook做的工作是记录用户对页面的操作(比如记录下用户的ajax的请求),在下一次使用pagecache的时候像放录像一样的,还原用户之前一次的操作。
3、bigpipe
(页面分为多个pagelet的小区域,通过bigpipe的js,单独的从服务器请求每个pagelet)
个人理解:
原来的页面从服务器到客户端要经历服务器拼装html、网络传输、客户端渲染页面三步。
每一步都需要等待前面的步骤完成才进行
使用bigpipe就是把页面拆分成了很多小的单独的模块(pagelet),通过ajax的方式单独的拼装、传输和渲染这些模块
这样一个页面的多个模块都是单独的进行渲染的,并且这些模块的渲染都不受其他模块是否载入完成的影响,多个模块的载入是并行的。这样一方面可以加速页面的渲染,让页面尽早的展现在用户的面前,另一方面可以自己控制哪一部分先展示,是重要的模块先展示给用户。