主页 > 网站建设 > 用户体验 >
网页异步加载

网页异步加载

 Facebook的网站速度做为最关键的公司任务之一。在2009年，我们成功地实现了Facebook网站速度提升两倍 。而正是我们的工程师团队的几个关键的

 
创新使它成为可能。在本文中，我将向大家介绍我们的秘密武器之一，我们称之为BigPipe的伟大底层技术。
 
BigPipe是一个重新设计的基础动态网页服务体系。大体思路是，分解网页成叫做Pagelets的小块，然后通过Web服务器和浏览器建立管道并管理他们在
 
不同阶段的运行。这是类似于大多数现代微处理器的流水线执行过程：多重指令管线通过不同的处理器执行单元，以达到性能的最佳。虽然BigPipe是
 
对现有的服务网络基础过程的重新设计，但它却不需要改变现有的网络浏览器或服务器，它完全使用PHP和JavaScript来实现。
 
动机
 
为了更好的了解BigPipe，我们需要了解一下现有的动态Web服务系统，它的历史可以追溯到万维网的初期，但现在与初期相比却并没有多少改变。现代
 
网站有着远远高于10年前的动态效果和互动性，但传统的网页服务系统早已无法跟上当今互联网速度的要求。在传统的模式，用户请求的生命周期如下
 
：
 
浏览器发送一个HTTP请求到Web服务器。
Web服务器解析请求，然后读取数据存储层，制定一个HTML文件，并用一个HTTP响应把它发送到客户端。
HTTP响应通过互联网传送到浏览器。
浏览器解析Web服务器的响应，使用HTML文件构建了一个的DOM树，并且下载引用的CSS和JavaScript文件。
CSS资源下载后，浏览器解析它们，并将它们应用到DOM树。
JavaScript资源下载后，浏览器解析并执行它们。
传统模式在现代网站中效率是非常低下的，因为很多系统的操作顺序，不能互相重叠。一些如延时加载JavaScript、并行下载等优化技术已被网络社区
 
广泛采用，以此来克服的一些限制。然而，这些优化却很少涉及Web服务器和浏览器的执行顺序造成的瓶颈。当Web服务器正忙生成一个页面，浏览器处
 
于闲置状态，浪费其周期无所事事。当Web服务器完成生成页面，并将其发送到浏览器，浏览器则成为性能瓶颈并且Web服务器对其无从帮助。重叠Web
 
服务器的生成时间与浏览器的渲染时间，我们不仅可以减少最终的时间延迟，也能使网页更早显示用户可见区域给用户，从而大大减少用户对延迟的感
 
知。
 
Web服务器的产生时间和浏览器的渲染时间重叠，是特别有用的，如Facebook这样内容丰富的网站。一个典型的Facebook的网页包含许多来源不同的数
 
据资料：好友名单，好友动态，广告等。在传统的网页呈现模式的用户将不得不等到这些查询数据都返回并生成最终文件，然后将其发送到用户的电脑
 
。任何一个查询延迟都将拖慢整个最终文件的生成。
 
BigPipe如何工作
 
要利用该Web服务器和浏览器之间的并行性，BigPipe首先分解网页成多个可调用的Pagelets。正如流水线微处理器划分一个指令的生命周期为（如“取
 
指令”，“指令解码”，“执行”，“写回寄存器”等）多个阶段，BigPipe的页面生成过程分为以下几个阶段：
 
请求解析：Web服务器解析和完整性检查的HTTP请求。
数据获取：Web服务器从存储层获取数据。
标记生成：Web服务器生成的响应的HTML标记。
网络传输：响应从Web服务器传送到浏览器。
CSS的下载：浏览器下载网页的CSS的要求。
DOM树结构和CSS样式：浏览器构造的DOM文档树，然后应用它的CSS规则。
JavaScript中下载：浏览器下载网页中JavaScript引用的资源。
JavaScript执行：浏览器的网页执行JavaScript代码。