近日,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
分享到:
相关推荐
基于 Struts2 标签的 BigPipe 技术实现 facebook前端加载优化方案,可提高3倍。demo可以运行
BigPipe技术java源代码,实现页面的单线程加载,和多线程加载,减少页面的加载时间
配置热加载:在线服务无需重启即可立即加载配置,流量0损失 优雅退出:处理完剩余任务后退出,流量0损失 超强性能:无锁,协程并发,单进程即可充分利用多核,满足一般流量需求 容错机制:对下游实施限速,限并发,...
Facebook首创的一种减少HTTP请求的,首屏快速加载的的异步加载页面方案。是前端性能优化的一个方向。 BigPipe与AJAX的比较 AJAX主要是XMLHttpRequest,前端异步的向服务器请求,获取动态数据添加到网页上。这样的...
Bigpipe命令_V45_comref2
或者通过webpack/browserify require('node-bigpipe/static/bro.bigpipe') 。 您可以自己编写Frontend js代码,并确保与后端的Bigpipe API匹配。 用法 在后端中,您应该使用node-bigpipe创建响应的bigpipe。 在...
节点-bigpipe bigbipe 基于 nodejs,用于个人电脑或移动设备!重要的
NULL 博文链接:https://liaoke0123.iteye.com/blog/2312795
NULL 博文链接:https://mozhenghua.iteye.com/blog/1218888
已调试成功,并做了优化,类似新浪微博BIGPIPE
bigpipe 基于struts2标签实现
页面的所有资产均会异步加载,其中包括CSS。 接收到的客户端代码在执行之前被包装,因此客户端代码可以在保留沙盒方法的同时重用我们的依赖项。 尽管客户端是专门为框架编写的,但只要它返回相同的数据结构,它就...
Koa Bigpipe演示生成基础koa工程使用koa-bigpipe作为bigpipe库默认使用pug模板引擎 jQuery + bigpipe.js $ nvm use 7Now using node v7.9.0 (npm v4.2.0)$ npm start
BigPipe 是 Facebook 开发的优化网页加载速度的技术。网上几乎没有用 node.js 实现的文章,实际上,不止于 node.js,BigPipe 用其他语言的实现在网上都很少见。以至于这技术出现很久以后,我还以为就是整个网页的...
bigpipe-demo1 简单的 bigpipe 演示
用C#实现的仿新浪微博首页数据的加载方式。测试了下谷歌和IE8都支持,同样的数据处理量:BigPipe加载方式耗时1.22秒,传统方式加载3.01秒。
NULL 博文链接:https://secondhrc.iteye.com/blog/1837984
测试我自己编写的koa-bigpipe-middlewary, 模拟bigpipe渲染技术 环境 node >= 8.x 执行 npm install node app.js 打开localhost:9000
bigpipe-example, 使用koa和组件的[DEPRECATED] BigPipe BigPipe示例 使用 koa 和组件插件构建的应用程序,实现了facebook的 BigPipe 。给定 subreddit,这里应用程序执行以下操作:一个基于 horizontal-grid-...