addHTML('
I AM JUST A PAGELET WITH RED BACKGROUND
'); $PageletRed->addCSS('static/red.php'); $PageletRed->addJS('static/delayJS.php'); $PageletRed->addJSCode("document.getElementById('red').innerHTML += ' [JS executed]';document.getElementById('red').style.borderRadius = '30px';"); #==================================================================================================== # Pagelet mit blauem Hintergrund #==================================================================================================== $PageletBlue = new Pagelet(60); $PageletBlue->addHTML('
I AM JUST A PAGELET WITH BLUE BACKGROUND
'); $PageletBlue->addCSS('static/blue.php'); $PageletBlue->addJS('static/delayJS.php'); $PageletBlue->addJSCode("document.getElementById('blue').innerHTML += ' [JS executed]';document.getElementById('blue').style.borderRadius = '30px';"); #==================================================================================================== # Pagelet mit grünem Hintergrund #==================================================================================================== $PageletGreen = new Pagelet(); $PageletGreen->addHTML('
I AM JUST A PAGELET WITH GREEN BACKGROUND
'); $PageletGreen->addCSS('static/green.php'); $PageletGreen->addJS('static/delayJS.php'); $PageletGreen->addJSCode("document.getElementById('green').innerHTML += ' [JS executed]';document.getElementById('green').style.borderRadius = '30px';"); ?> BigPipe Example

BigPipe Example

Auf dieser Beispielseite werden insgesamt 3 Pagelets gerendert von denen alle jeweils eine CSS- und eine JS-Ressource haben. Wobei jede der CSS-Ressourcen die Hintergrundfarbe des zugehörigen Pagelets ändert. BigPipe wird hingehen und diese Pagelets der Reihe nach rendern. Dabei werden zuerst die zugehörigen CSS-Ressourcen geladen und dann der HTML-Code injiziert. Wenn dann von allen Pagelets die CSS-Ressourcen geladen und der HTML-Code injiziert ist, dann wird BigPipe die JS-Ressourcen der Pagelets einbinden und den statischen Javascript-Code (falls vorhanden) ausführen. Damit man den Pipeline-Effekt auf dieser Beispielseite auch sieht werden die CSS- und JS-Ressourcen über ein Delayscript geleitet. Debuginformationen findest du in der Javascript-Konsole.

Weitere Informationen: https://blackphantom.de/artikel/bigpipe-website-pipelining-und-schnellerer-aufbau-durch-einzelne-pagelets/