From 7a49346f8069d814c51af2e0cefcc6e66fe9826e Mon Sep 17 00:00:00 2001 From: Thomas Lange Date: Fri, 22 Apr 2016 21:17:53 +0200 Subject: Multiple updates with async demo. --- index.php | 176 +++++++++++++++++++++++++++++++------------------------------- 1 file changed, 89 insertions(+), 87 deletions(-) (limited to 'index.php') diff --git a/index.php b/index.php index 3386d5e..1eae51e 100755 --- a/index.php +++ b/index.php @@ -1,88 +1,90 @@ -addHTML('

I AM 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 with blue background color -#==================================================================================================== -$PageletBlue = new BigPipe\DemoPagelet('customPageletID', BigPipe\Pagelet::PRIORITY_HIGH); -$PageletBlue->addHTML('

I AM 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 with green background color -#==================================================================================================== -$PageletGreen = new BigPipe\DemoPagelet(); -$PageletGreen->addHTML('

I AM 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 Demo - - -

BigPipe Demo

You see on this page 3 pagelets are getting rendered. Each pagelet has his own CSS and JS resources. The CSS resources change the background color of the pagelet (so you can see the effect when the CSS is loaded). The next step is to load the JS resources and they change the border-radius of the pagelet. After the loading of CSS and JS resources the static JS callback get executed. Additionally, the PhaseDoneJS callbacks performed for each pagelet phase. See the javascript console for more debug informations.

PhaseDoneJS is a new feature of BigPipe which can execute JS callbacks for each pagelet phase. Each pagelet can have multiple PhaseDoneJS callbacks for each phase. The difference between a PhaseDoneJS callback and a static JS callback ("JS_CODE") is the following: The static JS callback always get executed (regardless of whether the pipeline is enabled or disabled) and can be a main part of the JS from the pagelet. But the PhaseDoneJS callbacks are only executed if the pipeline is enabled. They are suitable for application-specific stuff.

- -

More information [at this time only in german; sorry]:
https://blackphantom.de/artikel/bigpipe-website-pipelining-und-schnellerer-aufbau-durch-einzelne-pagelets/

- -

Check if output flushing works on your server:
output-flushing-test.php

- - - - - +addHTML('

I AM 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 with blue background color +#=============================================================================== +$PageletBlue = new BigPipe\DemoPagelet('customPageletID', BigPipe\Pagelet::PRIORITY_HIGH); +$PageletBlue->addHTML('

I AM 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 with green background color +#=============================================================================== +$PageletGreen = new BigPipe\DemoPagelet(); +$PageletGreen->addHTML('

I AM 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 Demo + + +

BigPipe Demo

+ +

Notice: BigPipe may support the features of the new PHP 7 in the future and you may also benefit from the performance boost with PHP 7.

+ +

Check if output flushing works on your server:
output-flushing-test.php

+ + + + + + + \ No newline at end of file -- cgit v1.2.3