Best way for JSF to defer parsing of JavaScript?

2020-07-13 10:20发布

问题:

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 recommend to parse JavaScript when the site is loaded completely. 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?

回答1:

Use <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().



回答2:

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:commandButton 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...