facebook bigpipe Java版本实现

转载 2012年03月25日 22:10:53

前言:

 

去年的时候facebook开发工程师分享了了一个在facebook中实现的bigpipe的实现方案,如果您还不了解bigpipe方案解决的问题,请查看这个链接(http://www.facebook.com/note.php?note_id=389414033919

 

当时,facebook的开发工程师主要对这个方案的目标,好处,以及总体的实现方法(没有很具体,只是一些思路)介绍了一下。听完facebook工程师的分享之后,感觉这个方案的确不错。它借鉴CPU上流水线的工作方式,用多线程异步运行的方式,将一个页面能够比原来更快的速度在客户端展现出来,可以让用户感觉不到页面延迟。

 

以上这幅图是传统的用户感知到页面加载时间延迟时间,主要由三部时间组成:

 

  1. 蓝色部分是服务端计算页面中动态内容所要花费的时间,
  2. 绿色部分是服务器端生成的内容传输到客户端所要花费的时间,
  3. 红色部分是页面在接收到服务器端传过来的内容之后调用css和javascript渲染页面所花费的时间
我们发现这三部分内容是线性发生的,就像软件设计中的瀑布模型一样,只有等到上游的事件完成了才会发生下游的事件。

如果采用bigpipe来设计页面的话,用户感知到的页面延迟时间就会如下图所示那样了:

 一个大的页面可以分割成N个逻辑上没有耦合的paglet,每个paglet可以以自己的方式并行执行,每个paglet的生命周期也是由上面介绍的传统的三部分时间组成的。

 

 

 

bigpipe的使用场景是像facebook这样的个人页面是按照内容分块(pagelet)显示,并且,每块内容之间没有耦合性,并且要求内容显示要求实时性非常高的页面。这样的页面非常适合淘宝的“旺铺”,以及“我的淘宝”这样的页面使用。

 

下图是在“口碑店铺”中的使用场景:



 红线框中是的内容是一个独立的paglet内容

 

实现:

 

实现的场景是采用java语言开发,采用tomcat6以下版本,采用j2ee框架协议进行编写,view模板采用JSP。

 

首先需要考虑的问题是,当服务器端相应用户请求之后需要以最快的速度将用户的框架skeleton 页面frush到用户客户端,这样用户会,这个骨架skeleton 中是不会有任何动态内容的,这样能够保证用户能在最快时间内看见一个框架页面。即使后期服务器处理很慢的话,也能保证用户可以在第一时间内看见一个大致的web页面,从而感觉不到网络延时。

 

骨架(skeleton )内容如下:

Html代码 复制代码 收藏代码
  1. <html>  
  2. <head> <script src=“<big pipe js>” /></head>  
  3. <body>…    
  4. <div id=“left_column”>  
  5.   <div id=“pagelet_navigation”>  
  6.   </div>  
  7. </div>  
  8.   
  9. <div id=“middle_column”>    
  10.  <div id=“big3” ></div>  
  11. </div>  
  12.   
  13.   
  14. </body>  
  15. </html>  

 

 从上面这段代码可以看到id为pagelet_navigation和big3这两个div,标签内容为空,具体内容会等到稍后服务器异步flush到pagelet的内容来填充的。

 

每次flush的内容会是以下的方式打印到页面的最末端:

 

Xml代码 复制代码 收藏代码
  1. <script>  
  2.     bigpipeFun({id:'big3',html:‘<h1>hello</h1>’})   
  3. </script>  

 将会调用javascript函数bigpipeFun将id所在的内容替换成 html的属性值。当然在实际应用场景下这个html属性的内容会比较长,且复杂。

 

写一个测试用的Servlet,写一个doGet方法,在dispatcher.include(req, resp),加载骨架内容,再在response中通过writer要向客户端写点内容,来模拟一个paglet。

 

 

Java代码 复制代码 收藏代码
  1. @Override  
  2. protected void doGet(HttpServletRequest req, HttpServletResponse resp)   
  3.          throws ServletException, IOException {   
  4.           
  5.        // 打印骨架内容   
  6.        RequestDispatcher dispatcher = this.getServletContext()     
  7.                 .getRequestDispatcher("/skeleton.jsp");     
  8.         dispatcher.include(req, resp);   
  9.   
  10. // 模拟一个pagelet执行,并且在paglet中打印hello   
  11. final Writer writer = resp.getWriter();   
  12. Thread thread = new Thread(new Runnable() {   
  13. @Override  
  14. public void run() {   
  15. Thread.sleep(1000);   
  16. writer.write(“hello”);     
  17. }   
  18. });   
  19. thread.start();   
  20.   
  21.      Thread.sleep(2000); // 这样可以显示“hello”,但是主线程退出必须要由子线程来控制   
  22.     
  23.   
  24. }  
 

 

这个代码在上一部先用include的方式打印一个骨架页面,然后创建一个线程来模拟一个paglet,假设paglet执行需要1秒,当执行完成之后在页面上打印“hello” 作为paglet的内容,你会在方法体的最下面有一个 Thread.sleep(2000);的代码,这个是主线程,如果在这里不等待子线程paglet执行完成的话,子线程的打印的hello内容是不会在页面上打印出来的。因为当子线程开始执行的时候住线程如果不等待的话,主线程就

直接退出了,并且会将主response的输出流关闭。

 

 改成这个样子的了,页面上基本上可以实现bigpipe的效果了。但是这个例子中还是有问题的,在doGET的末尾必须要加上

 

Java代码 复制代码 收藏代码
  1. Thread.sleep(2000);   
  2.       

 这行代码,不然的话,pageLet中打印的内容就不能在页面上显示了。 这个说明servlet这个主线程,必须要等待pagelet子线程执行完毕才能退出方法,不然的话当servlet退出doGet方法之后,会将response的writer对象属性关闭向客户端写的功能。所以,在这里主线程必须等待其他线程完成所有工作之后才能退出。

 

Java代码 复制代码 收藏代码
  1. @Override  
  2. protected void doGet(HttpServletRequest req, HttpServletResponse resp)   
  3.          throws ServletException, IOException {   
  4.        final Object lock = new Object();   
  5. final Writer writer = resp.getWriter();   
  6. Thread thread = new Thread(new Runnable() {       
  7.  synchronized(lock){   
  8.   @Override  
  9.   public void run() {   
  10.    Thread.sleep(1000);   
  11.    writer.write(“hello”);     
  12.    synchronize(lock ){   
  13.       lock.notify();   
  14.    }    
  15.  }   
  16. });   
  17.           thread.start();       
  18.           lock.wait();   
  19.      }    
  20.   
  21. }  
 

 

 

创建一个lock对象,在paglet中调用lock的notify()方法,在主线程中调用wait方法让主线程等待子线程来唤醒它(notify)。

 

注意:对lock对象的操作必须放置在synchronize代码块中。这样能够保证先执行wait()方法再执行notify();

 

这里特别要提一下wait和notify的区别:

  1. Wait是Object的成员方法,但是sleep是Thread的静态成员方法
  2. Wait需要notify唤醒,sleep会自己苏醒
  3. Wait会释放对象锁,而sleep不释放

 

之前我们讨论的页面都只有一个paglet,现在要考虑多个paglet的情况,所以需要重新设计一下class的设计:

 

因为,执行一个paglet的频率是非常高的,而且一个paglet的生命周期是非常短的,考虑到java创建一个thread是非常耗费资源的,所以在这里引入线程池的解决方案,来解决频繁创建线程耗费资源的问题。

 

Java代码 复制代码 收藏代码
  1. ExecutorService  threadPool = java.util.concurrent   
  2.               .Executors. newCachedThreadPool();   
  3.   
  4. threadPool.execute(new StorePagelet1(pageletCount     ,    response));  

 ExecutorService就是一个线程池的实现。执行的时候只需要new一个 Runnable实例对象,调用ExecutorService的execute方法,ExecutorService会负责找到线程池中找闲置的线程对象来执行Runnable的task。Paglet类主要负责打印paglet中的内容,调用者只需要继承Paglet中,实现getContent方法,返回值是paglet需要显示的内容。

 

接下来的问题是:一个页面一般会由N个paglet构成,也就是一个主线程会由N个子线程构成,只有当这n个子线程都完成之后主线程才能退出。

 

需要设计一个计数器,来协调各个线程工作,只有等到所有子线程都退出了,主线程才能退出:

 

Java代码 复制代码 收藏代码
  1. class PageletCount {   
  2. private int count;   
  3.   
  4. public synchronized PageletCount add() {   
  5. count++;   
  6. return PageletCount.this;   
  7. }   
  8.   
  9. public synchronized int decrease() {   
  10. return --count;   
  11. }   
  12. }  

 

 

PageletCount的工作方式如下:

 

Java代码 复制代码 收藏代码
  1. @Override  
  2. protected void doGet(HttpServletRequest req, HttpServletResponse resp)   
  3.          throws ServletException, IOException {   
  4.        final PageletCount  count= new PageletCount ();   
  5. final Writer writer = resp.getWriter();   
  6. count.Add();   
  7. Thread thread = new Thread(new Runnable() {   
  8. @Override  
  9. public void run() {   
  10. Thread.sleep(1000);   
  11. writer.write(“hello”);     
  12.                                synchronize(count){   
  13.                             if (this.pageletCount.decrease() < 1) {      
  14.       count.notify();   
  15.   } }   
  16. }   
  17. });   
  18.        thread.start();   
  19.     synchronize(count ){   
  20.           count.wait();   
  21.        }    
  22. }  
 

 

 

至此,facebook bigpie的所有实现细节都讲到了。

下面是bigpipe的示例代码,如有需要的话可以下载:http://dl.iteye.com/topics/download/d4652e8b-4fa4-30d9-923e-32b327277c2e

相关文章推荐

Servlet 3.0笔记之异步请求Facebook BigPipe简单模型实现

http://www.blogjava.net/yongboy/archive/2011/02/22/346196.html Servlet 3.0笔记之异步请求Facebook BigPi...

Bigpipe学习笔记和java版实现

1. 技术背景 FaceBook页面加载技术 试想这样一个场景,一个经常访问的网站,每次打开它的页面都要要花费6 秒;同时另外一个网站提供了相似的服务,但响应时间只需3 秒,那么你会如何选择呢?数据...

Bigpipe学习笔记和java版实现

引用与参考资料 1).新浪微博的BigPipe后端实现技术分享 2).使用BigPipe提升浏览速度—— 流水线技术在新浪微博的实践 3).从新浪微博改版谈网页重构——bigpipe中的...

白话Facebook BigPipe

所谓BigPipe,指的是Facebook开发的用来改善客户端响应速度的技术。本质上讲,其实它并不是新事物,原理上等同于Yahoo在Best Practices for Speeding Up Y...

facebook数据采集——利用BigPipe技术和xpath解析数据

这篇文章主要是介绍两个技术,一个是网页前端加速BigPipe技术,另一个是html数据解析需要用到的xpath技术。...

BigPipe facebook

1. 技术背景 FaceBook页面加载技术 试想这样一个场景,一个经常访问的网站,每次打开它的页面都要要花费6 秒;同时另外一个网站提供了相似的服务,但响应时间只需3 秒,那么你会如何选择呢?...

BigPipe技术java源代码

  • 2011年09月13日 15:24
  • 346KB
  • 下载

bigpipe C# 简单实现。

  • 2015年05月06日 12:54
  • 6.21MB
  • 下载

nodejs+bigpipe+angularjs技术实现

--原文:http://cnodejs.org/topic/52d64a30e20b7c8214bc14f1

Node.js实现的BigPipe

拿那篇文章中的php显示页做示例: 先输出页面的主体结构: 然后按顺序更新页面的内容: 2s后输出header 4s后输出content 6s后输出foote...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:facebook bigpipe Java版本实现
举报原因:
原因补充:

(最多只允许输入30个字)