New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Documentation] primefaces.MOVE_SCRIPTS_TO_BOTTOM / move above the fold scripts to the bottom #2888

Closed
tandraschko opened this Issue Oct 30, 2017 · 4 comments

Comments

Projects
None yet
3 participants
@tandraschko
Member

tandraschko commented Oct 30, 2017

it's a new feature, implemented via a custom ResponseWriterWrapper, which does the following:

  • Collect all script tags, skip rendering of them
  • before the body tag ends, render all script tags
  • all of the inline scripts (widget init scripts) will be merged to one big inline script
  • the inline-scripts will be also minimized a little bit (like replacing all PrimeFaces.cw with pf.cw)

overall it improves the visible loading of the page a lot + it reduced the generated html up to 5% in my application

it can be activated via primefaces.MOVE_SCRIPTS_TO_BOTTOM =true in the web.xml

we should really promote it, it makes the rendering really really really fast.

@rdebusscher

This comment has been minimized.

Show comment
Hide comment
@rdebusscher

rdebusscher Oct 31, 2017

Member

It will also remove the white flickering between page navigation like you can see for example on the online Omega Layout demo. (https://www.primefaces.org/omega/sample.xhtml and click on the different items under the components menu item)

It is caused by one of the jquery-plugins.
If this is removed from the head (and placed just before the end of the body) it is solved.

<script type="text/javascript" src="/xxxx/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;loc=&amp;v=6.1"></script>

I didn't dig into the Javascript to find out which JQuery plugin is the cause.

Member

rdebusscher commented Oct 31, 2017

It will also remove the white flickering between page navigation like you can see for example on the online Omega Layout demo. (https://www.primefaces.org/omega/sample.xhtml and click on the different items under the components menu item)

It is caused by one of the jquery-plugins.
If this is removed from the head (and placed just before the end of the body) it is solved.

<script type="text/javascript" src="/xxxx/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;loc=&amp;v=6.1"></script>

I didn't dig into the Javascript to find out which JQuery plugin is the cause.

@tandraschko tandraschko changed the title from [Documentation] primefaces.COLLECT_SCRIPTS / move above the fold scripts to the bottom to [Documentation] primefaces.MOVE_SCRIPTS_TO_BOTTOM / move above the fold scripts to the bottom Dec 26, 2017

@tandraschko

This comment has been minimized.

Show comment
Hide comment
@tandraschko

tandraschko Dec 26, 2017

Member

@rdebusscher thanks for the hint! If you have time someday, we should check that.

Member

tandraschko commented Dec 26, 2017

@rdebusscher thanks for the hint! If you have time someday, we should check that.

@rdebusscher

This comment has been minimized.

Show comment
Hide comment
@rdebusscher

rdebusscher Dec 28, 2017

Member

@tandraschko

I found the statement in question which causes the flickering.

if ( !$( "<a>" ).outerWidth( 1 ).jquery ) {

It WAS in the jquery.ui.js file. But that code part is removed for issue #2233 (upgrade JQuery UI to 1.12, date 9 Aug 2017)

And indeed, with the current SNAPSHOT, there is no flickering anymore. Without using the MOVE_SCRIPTS_TO_BOTTOM.

Member

rdebusscher commented Dec 28, 2017

@tandraschko

I found the statement in question which causes the flickering.

if ( !$( "<a>" ).outerWidth( 1 ).jquery ) {

It WAS in the jquery.ui.js file. But that code part is removed for issue #2233 (upgrade JQuery UI to 1.12, date 9 Aug 2017)

And indeed, with the current SNAPSHOT, there is no flickering anymore. Without using the MOVE_SCRIPTS_TO_BOTTOM.

@tandraschko

This comment has been minimized.

Show comment
Hide comment
@tandraschko

tandraschko Dec 28, 2017

Member

great, thanks for testing this!

Member

tandraschko commented Dec 28, 2017

great, thanks for testing this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment