diff options
Diffstat (limited to 'readme.md')
| -rw-r--r-- | readme.md | 11 |
1 files changed, 4 insertions, 7 deletions
@@ -1,8 +1,5 @@ -## Problembeschreibung -Beim Seitenaufbau einer Website mit vielen Javascript- und CSS-Dateien kommt es oft dazu, dass man als Besucher beobachten kann wie der Browser das Layout darstellt. Das ist besonders dann der Fall, wenn eingebundene Javascript-Dateien das Rendering blockieren weil sie noch am laden sind. Aber auch wenn für das Layout (oder Teile davon) mehrere einzelne CSS-Dateien eingebunden werden und der Besucher zum Beispiel eine langsame Internetverbindung hat. An dieser Stelle kommt [Facebook's Pipeline-Technik "BigPipe"](https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919) 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. +# BigPipe: Short description +> BigPipe is a fundamental redesign of the dynamic web page serving system. The general idea is to decompose web pages into small chunks called pagelets, and pipeline them through several execution stages inside web servers and browsers. This is similar to the pipelining performed by most modern microprocessors: multiple instructions are pipelined through different execution units of the processor to achieve the best performance. Although BigPipe is a fundamental redesign of the existing web serving process, it does not require changing existing web browsers or servers; it is implemented entirely in PHP and JavaScript. -## 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 reingeschrieben welches 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 geht BigPipe hin und bindet von jedem Pagelet die JS-Ressourcen ein. Jedes einzelne Pagelet wird also gepipelinet und nacheinander gerendert. - -## Priorisieren von Pagelets: Die wichtigsten Pagelets zuerst -Der Besucher will beim Besuch einer Seite möglichst schnell die Informationen bekommen, die er haben will. 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 HTML-Code noch vor dem Hauptinhalt liegt).
\ No newline at end of file +**More information from *Changhao Jiang* at Facebook Engineering:** +<https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919>
\ No newline at end of file |