diff options
| -rw-r--r-- | readme.md | 8 |
1 files changed, 8 insertions, 0 deletions
diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..5c06f8d --- /dev/null +++ b/readme.md @@ -0,0 +1,8 @@ +## 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. + +## 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 |