We have released our open BigPipe implementation written for IRC-Galleria which is implemented by loosely following this facebook blog. The sources are located at github: https://github.com/garo/bigpipe and there’s an example demonstrating the library in action at http://www.juhonkoti.net/bigpipe.
BigPipe allows speeding up page rendering times by loading the page in small parts called pagelets. This allows browser to start rendering the page while the php server is still processing to finish the rest. This transforms the traditional page rendering cycle into a streaming pipeline containing the following steps:
- Browser requests the page from server
- Server quickly renders a page skeleton containing the <head> tags and a body with empty div elements which act as containers to the pagelets. The HTTP connection to the browser stays open as the page is not yet finished.
- Browser will start downloading the bigpipe.js file and after that it’ll start rendering the page
- The PHP server process is still executing and its building each pagelet at a time. Once a pagelet has been completed it’s results are sent to the browser inside a <script>BigPipe.onArrive(…)</script> tag.
- Browser injects the html code received into the correct place. If the pagelet needs any CSS resources those are also downloaded.
- After all pagelets have been received the browser starts to load all external javascript files needed by those pagelets.
- After javascripts are downloaded browser executes all inline javascripts.
There’s an usage example in example.php. Take a good look on it. The example uses a lot of whitespace padding to saturate web server and browser caches so that the bigpipe loading effect is clearly visible. Of course these paddings are not required in real usage. There’s still some optimizations to be done and the implementation is way from being perfect, but that hasn’t stopped us from using this in production.
Files included:
- bigpipe.js Main javascript file
- h_bigpipe.inc BigPipe class php file
- h_pagelet.inc Pagelet class php file
- example.php Example showing how to use bigpipe
- test.js Support file for example
- test2.js Support file for example
- README
- Browser.php Browser detection library by Chris Schuld (http://chrisschuld.com/)
- prototype.js Prototypejs.org library
- prototypepatch.js Patches for prototype
Hi Juho,
I am José Manuel Pérez and I have been taking a look to your Bigpipe implementation after having seen your comment on my blog.
First of all congrats for having made such a complete implementation. I have just skimmed out your JavaScript file but I will have a closer look to all the project. I thought of making a GitHub repository, at least for the JavaScript file, but now I will try to revise yours. I find this a great opportunity to learn how GitHub works.
During my first look at the script file I see it needs prototype to work. I think it would be great to make BigPipe independent on any library and use raw JavaScript. At least for the features I covered it was enough. After all, the important point is to quickly load content so reducing the javacript resources will help. In addition, with so many JavaScript frameworks out there (personally I use jQuery) it is not useful to load two overlapping frameworks.
Anyway I encourage you to continue your development. During next weeks I will put my solution in a production stage. Currently I am using Bigpipe just to load HTML since so far I had its CSS and JS embedded in bloated files.
I would like to share my experiences with you about BigPipe and some other techniques to improve website performance.
Regards,
José
Hello Jose,
nice to hear that you found my implementation interesting. The javascript still has some problems, like the dependency on prototype which you mentioned and also some other bugs. The javascript part is the most problematic piece of the puzzle and I’m sure that it needs still a lot of work. That’s one reason why I’m using the Browser.php to check if the browser is capable of operating with bigpipe – probably with a little bit of work the supported browser list could be extended.
I’m also accepting patches and suggestions how I could improve my implementation.
Some time ago, I needed to buy a car for my business but I didn’t have enough cash and couldn’t purchase something. Thank God my mother suggested to take the credit loans at trustworthy bank. Thus, I did so and used to be satisfied with my car loan.
I was testing your webpage implemented by bigpipe, but to my surprise the page loadtimes are staggering above 8sec? Or am I getting something wrong?