Facebook's BigPipe: Pipelining-Technik für Webseiten

Veröffentlicht am

Achtung: Dieser Beitrag erschien ursprünglich auf meinem alten Blog und ist sehr alt. Manche Meinungen und Ansichten können, aber müssen sich nicht geändert haben.

Beim Seitenaufbau einer Webseite mit vielen Javascript- und CSS-Dateien kommt es oft dazu, dass man als Besucher beobachten kann wie der Webbrowser das Layout nacheinander darstellt. Das ist besonders dann der Fall, wenn eingebundene Javascript-Dateien das Rendering blockieren, weil sie noch nicht vollständig geladen wurden. Aber auch wenn für das Layout (oder Teile davon) mehrere einzelne CSS-Ressourcen eingebunden werden und der Besucher zum Beispiel eine langsame Internetverbindung hat.

An dieser Stelle kommt Facebook’s Pipeline-Technik “BigPipe” in’s Spiel. Mit BigPipe kann man eine Website in einzelne Fragmente zerlegen, die Pagelets genannt werden. Jedes Pagelet besteht mindestens aus seinem HTML-Code und optional aus zugehörigen Javascript- und CSS-Dateien.

Website mit BigPipe in einzelne Fragmente aufteilen

Wenn das HTML auf dem Server erzeugt wird, dann wird es nicht direkt an der eigentlichen Stelle im HTML-Code ausgegeben, sondern an der Stelle wird nur ein Platzhalter-Element rein geschrieben, das leer ist. Dieses Platzhalter-Element bekommt dann eine eindeutige ID damit BigPipe das Element identifizieren und den echten HTML-Code injizieren kann. Bevor das passiert werden allerdings erst einmal die zum Pagelet zugehörigen CSS-Ressourcen eingebunden und der HTML-Code wird erst dann in das Platzhalter-Element injiziert wenn die CSS-Ressource vollständig geladen ist.

Wenn von allen Pagelets die CSS-Ressourcen geladen sind und der HTML-Code in die Platzhalter-Element injiziert wurde, dann beginnt BigPipe mit dem Nachladen der externen Javascript-Ressourcen aller bekannten Pagelets. Jedes einzelne Pagelet wird also gepipelinet und nacheinander gerendert.

Einzelne Pagelets werden in der BigPipe-Klasse registriert

Priorisieren von Pagelets: Die wichtigsten Pagelets zuerst

Der Besucher will beim Besuch einer Seite möglichst schnell die Teile der Webseite sehen, die relevant / wichtig sind. Komplett sinnfrei wäre es also wenn sich bei einer langsamen Internetverbindung auf einmal zuerst der Footer der Seite, dann die Sidebar, dann die Navigation und dann erst die eigentlichen Inhalte aufbauen würden.

Da der eigentliche HTML-Code eins Pagelets jetzt aber nicht mehr direkt an die entsprechende Stelle geschrieben wird, sondern dort nur Platzhalter eingesetzt werden, ist es möglich, die einzelnen Pagelets serverseitig zu priorisieren. So kann man zum Beispiel dem Pagelet für den Hauptinhalt eine höhere Priorität geben als dem Pagelet für die Sidebar. Und BigPipe würde tatsächlich zuerst den Hauptinhalt rendern und dann erst die Sidebar (ganz egal ob die Endposition der Sidebar im fertigen DOM noch vor dem Hauptinhalt liegt).

BigPipe: Download der PHP- und Javascript-Klassen [PHP >= 5.4]

Da Facebook offiziell den Quellcode für BigPipe nicht bereitstellt haben sich andere Entwickler schon mal hingesetzt und die Pipeline-Technik nachgebaut. Allerdings ist der Code von dieser GitHub-Quelle leider nicht unbedingt für den Produktiveinsatz geeignet. Er ist überladen und zudem noch inkompatibel wenn man auf der Website die Hauptinhalte per Transport-Iframe nachladen will und diesen Response ebenfalls durch die Pipeline leiten möchte. Da ich aber derzeit an einem Projekt arbeite wo all das Standard ist und ich auf eine (stabil funktionierende) Pipeline-Technik nicht verzichten wollte, habe ich das Teil komplett neu geschrieben und mich dabei an dieser GitHub-Quelle orientiert was den Aufbau der Klassen etc. angeht.

Ich hoffe, dass sich die Arbeit gelohnt hat und ich vielleicht auch anderen damit helfen kann. Für mich hat es sich auf jeden Fall gelohnt da ich auch einiges über Javascript gelernt habe. Unter folgendem Link auf GitHub sind alle benötigten Dateien mit einer index.php, die als Demoseite fungiert.

GitHub-Repository: https://github.com/Nerdmind/BigPipe

Bild meiner Person

Über mich

Hi. Ich bin Thomas. Hier veröffentlichte ich in unregelmäßgen Abständen mehr oder weniger interessante Beiträge über Dies und Jenes, hauptsächlich über Computer und IT. Außerdem mochte ich die Linux-Kommandozeile, vor allem wenn ich mit (m)einer mechanischen Tastatur darauf herumhacken kann. 😀 Es wird hier aus persönlichen Gründen nicht mehr viel neues geben.