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倍》