what is the best way to defer loading the JavaScript libraries (Richfaces, Primefaces, own stuff) with JSF to speed up page loading?
As Google PageSpeed plugins says it is remend to parse JavaScript when the site is loaded pletely. One way to achieve this is to put the JavaScripts loads at the end of the <body> tag. An other way is to put the "defer" attribute to <script> tag, which can not be done with JSF's <h:outputScript> Tag as I saw.
So, how would you do this?
what is the best way to defer loading the JavaScript libraries (Richfaces, Primefaces, own stuff) with JSF to speed up page loading?
As Google PageSpeed plugins says it is remend to parse JavaScript when the site is loaded pletely. One way to achieve this is to put the JavaScripts loads at the end of the <body> tag. An other way is to put the "defer" attribute to <script> tag, which can not be done with JSF's <h:outputScript> Tag as I saw.
So, how would you do this?
Share Improve this question edited Apr 25, 2012 at 13:00 BalusC 1.1m376 gold badges3.7k silver badges3.6k bronze badges asked Apr 25, 2012 at 6:49 SpecialAgentSpecialAgent 1102 silver badges8 bronze badges 1- Please see stackoverflow./questions/20514987/… using the BalusC's answer. – drodil Commented Dec 11, 2013 at 12:20
2 Answers
Reset to default 5Use <h:outputScript target="body">. It will then end up in the very end of <h:body>. It namely defaults to "current" location in the view (another target value is head which will then make the script to end up in the <h:head>, even when the script is specified somewhere in the <h:body>).
<h:outputScript name="js/foo.js" target="body" />
If you want to apply this for 3rd party scripts as well, you'd need to create a custom SystemEventListener hooking on PreRenderViewEvent which does exactly that with help of UIViewRoot#getComponentResources() and UIViewRoot#addComponentResource().
Don't know if that counts (you can call it a workaround),
But you can always include some js files in external xhtml page wich will be included in your main page with ui:include which will be wrapped by <h:panelGroup id="externalPageWrapper" render="#{myBean.renderExternalPage}" and with little help of js/jquery you can execute .click() on some hidden h:mandButton with f:ajax that will change the renderExternalPage to true and render the externalPageWrapper that will load that xhtml page and all the js files that were included inside it...