写点什么

Facebook 创新之 BigPipe:优化页面加载时间

  • 2010-08-01
  • 本文字数:1444 字

    阅读完需:约 5 分钟

近日,Facebook 的研究科学家 Changhao Jiang 介绍了一个名为 BigPipe 的技术,这项技术可使 Facebook 站点的访问速度提升一倍。BigPipe 是 Facebook 的创新研究之一,同时也是 Facebook 的“秘密武器”,它能够极大提升站点的性能:在大多数浏览器中,BigPipe 都能将用户感受到的延迟时间降低一半,除了 Firefox 3.6,BigPipe 可以将 Firefox 3.6 的延迟时间降低 50ms 左右,大约降低了 22% 左右。

BigPipe 及相关创新的驱动力是:

相比于 10 年前,现代 Web 站点的动态性与交互性都迈上了一个新台阶,传统的页面处理模型已经无法满足当今 Internet 速度上的需求了。

受到硬件的启发(管道与标量微处理器),Facebook 团队使用 PHP 和 JavaScript(并不需要改变现有的 Web 服务器和浏览器)“重新设计了现有的 Web 服务处理过程”。重新设计的内容包括:将页面处理过程分解为 8 个不同的步骤(每个步骤叫做一个“pagelet”),其中一些步骤可以并行处理。通过返回如下内容来响应最初的页面请求:

一个未闭合的 HTML 文档,包含了 HTML head 标签和 body 标签的第一部分内容。head 标签包含了 BigPipe 的 JavaScript 库,用于解释稍后收到的 pagelet 响应内容。在 body 标签中,有个模板指定了页面的逻辑结构和 pagelets 的占位符。

然后创建 JSON 编码的对象(即 pagelets),里面包含了“pagelet 需要的所有 CSS、JavaScript 资源、HTML 内容以及一些元数据”。

复杂网页不断攀升的加载时间延迟问题已经不是什么新话题了,也有不少人提出使用某种管道技术来提升性能。Aaron Hopkins 在 Die.net 上讨论过如何优化页面加载时间,除了传统的页面请求生命周期外,还有不少影响因素可以影响到页面加载的延迟时间。Aaron 提到的有趣儿的一点是:

IE、Firefox 与 Safari 默认情况下是禁用管道的;Opera 是我所知道的唯一一个启用了管道的浏览器。禁用管道意味着需要应答每个请求,在下一个请求发出前需要释放掉上一个请求所建立的连接。这样就增加了用户等待的延迟时间,平均延迟时间为双向的 ping 时间除以允许的连接数。如果服务器禁用了 HTTP 持续连接(keepalives),那么还需要再进行一次 TCP 三次握手,这又导致一次双向连接,造成延迟时间加倍的后果。

Jiang 并没有说 BigPipe 利用了浏览器所固有的管道功能,实际上却暗示了 BigPipe 并没有这么做,因为他说不需要对现有的服务器与浏览器进行任何改变。一旦浏览器发生了变化(比如 HTML 5 的广泛实现),BigPipe 创新的用途是否还会这么大,我们不得而知。

Kensaku Komatsu 创建了一个示例( The Zinger 谈到了该示例):

… 对 HTML5 Web Sockets 中的数据流与 XML HTTP Request 进行了对比。运行结果令人震惊:565 毫秒对 31444 毫秒,天哪!Web Sockets 快了 55 倍,这是因为 Web Sockets 减少了大量不必要的 header 信息。

该示例使用了 HTTP Pipelining,但通常人们认为这么做有些“危险”:

这并非 HTTP Pipelining。网络传输是由 WebSocket frames 构成的,而非 HTTP 请求与响应。显然,这是由应用作者控制的,并不会遇到 HTTP/1.1 管道的问题。由于 WebSockets 可以在任何时间发送与接收,可以由程序员直接控制,因此它并不会遇到代理干扰(proxy interference)的问题,管道功能是安全的,不应该禁用。

Komatsu 的示例将 Facebook 的创新、HTTP 管道问题以及 HTML 5 的未来有机联系在了一起,尤其是 WebSockets 以及他们最终该如何交互以提升 Web 站点的性能并最大限度地降低用户等待的延迟时间。

查看英文原文: BigPipe at Facebook: Optimizing Page Load Time

2010-08-01 01:3521878
用户头像

发布了 88 篇内容, 共 259.6 次阅读, 收获喜欢 8 次。

关注

评论

发布
暂无评论
发现更多内容

Github Actions 实现 Node.js 项目的 CICD 环境搭建

昆吾kw

nginx CI/CD Node Express Github Actions

超强力推!阿里全新微服务突击手册,把所有操作都写出来了|超清PDF

冉然学Java

架构 微服务 java; 消息中间件 微服务框架

危险!请马上替换代码中的BeanUtils!!!

JAVA活菩萨

Java 后端 java程序员 大厂技能 大厂实践

C++中const关键字的作用总结

桑榆

c++ 8月月更

编译调试插件功能总结

乌龟哥哥

8月月更

站在数字经济浪尖:360视觉云探路中小微企业数智转型

脑极体

发布Android库至MavenCentral详解

JAVA活菩萨

Java 后端 java程序员 大厂技能 大厂实践

图文并茂|Linux内核内存回收之LRU算法

简说Linux内核

内存管理 Linux内核 进程管理 嵌入式开发

12条MySQL优化技巧,提速不止十倍!

TimeFriends

8月月更

六千字梳理 Node.js 的多进程模型和项目部署流程

昆吾kw

Node Express NGIN pm2

使用软引用实现缓存机制

JAVA活菩萨

Java 后端 java程序员 大厂技能 大厂实践

Axure9基本交互操作(二)

乔乔

8月月更

Python 教程之输入输出(6)—— 使用 print() 函数输出

海拥(haiyong.site)

Python 8月月更

C++对象模型和this指针实例分析

CtrlX

c++ 面向对象 后端 代码 8月月更

大算力时代已经到来

DisonTangor

计算

七日算法先导(五)——归并排序,希尔排序

工程师日月

8月月更

设计电商秒杀系统

爱晒太阳的大白

朴素贝叶斯分类-西瓜分类 python

Five

贝叶斯公式 Python. 8月月更

JVM学习之 内存结构

JAVA活菩萨

Java java程序员 大厂技能 大厂实践 秋招

我们来聊聊锁升级吧

JAVA活菩萨

Java 后端 java程序员 大厂技能 大厂实践

一文读懂Linux内核处理器架构中的栈

简说Linux内核

Linux内核 进程管理 嵌入式开发 设备驱动

【字体反爬】的起点,月票数解析,一个小小的Python案例

梦想橡皮擦

Python 爬虫 8月月更

来学习开源模块化前端框架—Layui【Layui极致轻量前端框架】

恒山其若陋兮

开源 前端框架 签约计划第三季 8月月更

原型链中的函数和对象

掘金安东尼

JavaScript 前端 8月月更

系统管理-Linux系统进程管理

Albert Edison

Linux centos 运维 服务器 8月月更

Nacos配置中心之动态感知

急需上岸的小谢

8月月更

阿里技术大牛亲自编写,将高难度的Java高并发知识讲解得浅显易懂

了不起的程序猿

架构实战营复盘

Fan

#架构实战营

leetcode 769. Max Chunks To Make Sorted 最多能完成排序的块(中等)

okokabcd

数组 LeetCode 数据结构与算法

Linux内核LRU算法内存交换过程

简说Linux内核

内存管理 Linux内核 进程管理 嵌入式开发

Java “constant string too long” 编译错误

HoneyMoose

Facebook创新之BigPipe:优化页面加载时间_JavaScript_Dave West_InfoQ精选文章