While analyzing the performance of a JSF 2.1 + PrimeFaces 4.0 webapp with Google PageSpeed, it recommends among others to defer parsing of JavaScript files. On a test page with a <p:layout> and a form with <p:watermark> and <p:fileUpload> which looks like follows ...
<p:layout>
<p:layoutUnit position="west" size="100">Test</p:layoutUnit>
<p:layoutUnit position="center">
<h:form enctype="multipart/form-data">
<p:inputText id="input" />
<p:watermark for="input" value="watermark" />
<p:focus for="input" />
<p:fileUpload/>
<p:commandButton value="submit" />
</h:form>
</p:layoutUnit>
</p:layout>
... it lists the following JavaScript files which could be deferred:
primefaces.js (219.5KiB)
jquery-plugins.js (191.8KiB)
jquery.js (95.3KiB)
layout.js (76.4KiB)
fileupload.js (23.8KiB)
watermark.js (4.7KiB)
It links to this Google Developers article wherein deferred loading is explained as well as how to achieve it. You basically need to dynamically create the desired <script> during the onload event of the window. At its simplest form whereby old and buggy browsers are completely ignored, it looks like this:
<script>
window.addEventListener("load", function() {
var script = document.createElement("script");
script.src = "filename.js";
document.head.appendChild(script);
}, false);
</script>
Okay, this is doable if you have control over those scripts, but the listed scripts are all forcibly auto-included by JSF. Also, PrimeFaces renders a bunch of inline scripts to HTML output which are directly calling $(xxx) from jquery.js and PrimeFaces.xxx() from primefaces.js. This would mean that it would not easily be possible to really defer them to onload event as you would only end up with errors like $ is undefined and PrimeFaces is undefined.
But, it should be technically possible. Given that only jQuery doesn't need to be deferred as many of the site's custom scripts also rely on it, how could I block JSF from forcibly auto-including the PrimeFaces scripts so that I can defer them, and how could I deal with those inline PrimeFaces.xxx() calls?
Use <o:deferredScript>
Yes, it is possible with the <o:deferredScript> component which is new since OmniFaces 1.8.1. For the technically interested, here's the involved source code:
The UI component: DeferredScript
The HTML renderer: DeferredScriptRenderer
The JS helper: deferred.unminified.js
Basically, the component will during the postAddToView event (thus, during the view build time) via UIViewRoot#addComponentResource() add itself as a new script resource in end of <body> and via Hacks#setScriptResourceRendered() notify JSF that the script resource is already rendered (using Hacks class as there's no standard JSF API approach for that (yet?)), so that JSF won't forcibly auto-include/render the script resource anymore. In case of Mojarra and PrimeFaces, a context attribute with key of name+library and a value of true has to be set in order to disable auto-inclusion of the resource.
The renderer will write a <script> element with OmniFaces.DeferredScript.add() whereby the JSF-generated resource URL is passed. This JS helper will in turn collect the resource URLs and dynamically create new <script> elements for each of them during the onload event.
The usage is fairly simple, just use <o:deferredScript> the same way as <h:outputScript>, with a library and name. It doesn't matter where you place the component, but most self-documenting would be in the end of the <h:head> like this:
<h:head>
...
<o:deferredScript library="libraryname" name="resourcename.js" />
</h:head>
You can have multiple of them and they will ultimately be loaded in the same order as they're declared.
How to use <o:deferredScript> with PrimeFaces?
This is a little tricky, indeed because of all those inline scripts generated by PrimeFaces, but still doable with a helper script and accepting that jquery.js won't be deferred (it can however be served via a CDN, see later). In order to cover those inline PrimeFaces.xxx() calls to primefaces.js file which is almost 220KiB large, a helper script needs to be created which is less than 0.5KiB minified:
DeferredPrimeFaces = function() {
var deferredPrimeFaces = {};
var calls = [];
var settings = {};
var primeFacesLoaded = !!window.PrimeFaces;
function defer(name, args) {
calls.push({ name: name, args: args });
}
deferredPrimeFaces.begin = function() {
if (!primeFacesLoaded) {
settings = window.PrimeFaces.settings;
delete window.PrimeFaces;
}
};
deferredPrimeFaces.apply = function() {
if (window.PrimeFaces) {
for (var i = 0; i < calls.length; i++) {
window.PrimeFaces[calls[i].name].apply(window.PrimeFaces, calls[i].args);
}
window.PrimeFaces.settings = settings;
}
delete window.DeferredPrimeFaces;
};
if (!primeFacesLoaded) {
window.PrimeFaces = {
ab: function() { defer("ab", arguments); },
cw: function() { defer("cw", arguments); },
focus: function() { defer("focus", arguments); },
settings: {}
};
}
return deferredPrimeFaces;
}();
Save it as /resources/yourapp/scripts/primefaces.deferred.js. Basically, all what it does is capturing the PrimeFaces.ab(), cw() and focus() calls (as you can find in the bottom of the script) and deferring them to the DeferredPrimeFaces.apply() call (as you can find halfway the script). Note that there are possibly more PrimeFaces.xxx() functions which need to be deferred, if that is the case in your app, then you can add them yourself inside window.PrimeFaces = {} (no, it's in JavaScript not possible to have a "catch-all" method to cover the undetermined functions).
Before using this script and <o:deferredScript>, we first need to determine the auto-included scripts in the generated HTML output. For the test page as shown in the question, the following scripts are auto-included in generated HTML <head> (you can find this by rightclicking the page in webbrowser and choosing View Source):
<script type="text/javascript" src="/playground/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&v=4.0"></script>
<script type="text/javascript" src="/playground/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&v=4.0"></script>
<script type="text/javascript" src="/playground/javax.faces.resource/primefaces.js.xhtml?ln=primefaces&v=4.0"></script>
<script type="text/javascript" src="/playground/javax.faces.resource/layout/layout.js.xhtml?ln=primefaces&v=4.0"></script>
<script type="text/javascript" src="/playground/javax.faces.resource/watermark/watermark.js.xhtml?ln=primefaces&v=4.0"></script>
<script type="text/javascript" src="/playground/javax.faces.resource/fileupload/fileupload.js.xhtml?ln=primefaces&v=4.0"></script>
You need to skip the jquery.js file and create <o:deferredScripts> in exactly the same order for the remaining scripts. The resource name is the part after /javax.faces.resource/ excluding the JSF mapping (.xhtml in my case). The library name is represented by ln request parameter.
Thus, this should do:
<h:head>
...
<h:outputScript library="yourapp" name="scripts/primefaces.deferred.js" target="head" />
<o:deferredScript library="primefaces" name="jquery/jquery-plugins.js" />
<o:deferredScript library="primefaces" name="primefaces.js" onbegin="DeferredPrimeFaces.begin()" />
<o:deferredScript library="primefaces" name="layout/layout.js" />
<o:deferredScript library="primefaces" name="watermark/watermark.js" />
<o:deferredScript library="primefaces" name="fileupload/fileupload.js" onsuccess="DeferredPrimeFaces.apply()" />
</h:head>
Now all those scripts with a total size of about 516KiB are deferred to onload event. Note that DeferredPrimeFaces.begin() must be called in onbegin of <o:deferredScript name="primefaces.js"> and that DeferredPrimeFaces.apply() must be called in onsuccess of the last <o:deferredScript library="primefaces">.
In case you're using PrimeFaces 6.0 or newer, where the primefaces.js has been replaced by core.js and components.js, use the below instead:
<h:head>
...
<h:outputScript library="yourapp" name="scripts/primefaces.deferred.js" target="head" />
<o:deferredScript library="primefaces" name="jquery/jquery-plugins.js" />
<o:deferredScript library="primefaces" name="core.js" onbegin="DeferredPrimeFaces.begin()" />
<o:deferredScript library="primefaces" name="components.js" />
<o:deferredScript library="primefaces" name="layout/layout.js" />
<o:deferredScript library="primefaces" name="watermark/watermark.js" />
<o:deferredScript library="primefaces" name="fileupload/fileupload.js" onsuccess="DeferredPrimeFaces.apply()" />
</h:head>
As to performance improvement, important measuring point is the DOMContentLoaded time as you can find in bottom of Network tab of Chrome's developer tools. With the test page as shown in the question served by Tomcat on a 3 year old laptop, it decreased from ~500ms to ~270ms. This is relatively huge (almost the half!) and makes the most difference on mobiles/tablets as they render HTML relatively slow and touch events are fully blocked until the DOM content is loaded.
Noted should be that you're in case of (custom) component libraries dependent on whether they obey the JSF resource management rules/guidelines or not. RichFaces for example didn't and homebrewed another custom layer over it, making it impossible to use <o:deferredScript> on it. See also what is the resource library and how should it be used?
Warning: if you're adding new PrimeFaces components on the same view afterwards and are facing JavaScript undefined errors, then the chance is big that the new component also comes with its own JS file which should also be deferred, because it's depending on primefaces.js. A quick way to figure the right script would be to check the generated HTML <head> for the new script and then add another <o:deferredScript> for it based on the above instructions.
Bonus: CombinedResourceHandler recognizes <o:deferredScript>
If you happen to use OmniFaces CombinedResourceHandler, then it's good to know that it transparently recognizes <o:deferredScript> and combines all deferred scripts with the same group attribute into a single deferred resource. E.g. this ...
<o:deferredScript group="essential" ... />
<o:deferredScript group="essential" ... />
<o:deferredScript group="essential" ... />
...
<o:deferredScript group="non-essential" ... />
<o:deferredScript group="non-essential" ... />
... will end up in two combined deferred scripts which are loaded synchronously after each other. Note: the group attribute is optional. If you don't have any, then they will just all be combined into a single deferred resource.
As a live example, check the bottom of <body> of the ZEEF site. All essential PrimeFaces-related scripts and some site-specific scripts are combined in the first deferred script and all non-essential social media related scripts are combined in the second deferred script. As to performance improvement of ZEEF, on a test JBoss EAP server on modern hardware, the time to DOMContentLoaded went from ~3s to ~1s.
Bonus #2: delegate PrimeFaces jQuery to CDN
In any case, if you're already using OmniFaces, then you can always use CDNResourceHandler to delegate the PrimeFaces jQuery resource to a true CDN by the following context param in web.xml:
<context-param>
<param-name>org.omnifaces.CDN_RESOURCE_HANDLER_URLS</param-name>
<param-value>primefaces:jquery/jquery.js=http://code.jquery.com/jquery-1.11.0.min.js</param-value>
</context-param>
Note that jQuery 1.11 has some major performance improvements over 1.10 as internally used by PrimeFaces 4.0 and that it's fully backwards compatible. It saved a couple of hundred milliseconds when initializing drag'n'drop on ZEEF.
Initially posted as an answer to Defer primefaces.js loading
Adding another solution to this question for anyone else that encounters the same.
You will need to customize the primefaces HeadRenderer to achieve the ordering pagespeed recommends. While this is something that could have been implemented by PrimeFaces, I do not see it in v5.2.RC2. These are the lines in encodeBegin that need change:
96 //Registered Resources
97 UIViewRoot viewRoot = context.getViewRoot();
98 for (UIComponent resource : viewRoot.getComponentResources(context, "head")) {
99 resource.encodeAll(context);
100 }
Simply write a custom component for the head tag, then bind it to a renderer that overrides above behavior.
Now you wouldn't want to duplicate the entire method just for this change, it may be cleaner to add a facet called "last" and move script resources to its beginning in your renderer as new deferredScript components. Let me know if there's interest, and I'll create a fork to demonstrate how.
This approach is "future proof" in the sense that it doesn't break as new resource dependencies are added to components, or as new components are added to the view.
I have added new Javascript library to the “ApplicationResources”:
jquerymobile{
resource url:'css/jquery.mobile-1.3.2.css'
resource url:'js/jquery.mobile/jquery.js'
resource url:'js/jquery.mobile/jquery.mobile-1.3.2.js'
}
Than I used this library in the main.gsp:
<g:javascript library="jquerymobile"/>
<g:layoutHead/>
<r:layoutResources />
</head>
<body>
<g:layoutBody/>
<div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading…"/></div>
<g:javascript library="application"/>
<r:layoutResources />
</body>
The result HTML was that grails concatenates both js files into one and place the script tag at the end.
.
.
.
<div id="spinner" class="spinner" style="display:none;">Loading…</div>
<script src="/Tiv2/static/bundle-bundle_jquerymobile_defer.js" type="text/javascript" ></script>
<script src="/Tiv2/static/js/application.js" type="text/javascript" ></script>
</body>
</html>
This causes bad behavior in the page. When clicking a link, I can see that the address bar in the browser get changed but page is not refreshing and stay on the current page where the link was clicked.
Only after manually refreshing the page (F5), browser load the linked page.
I tried using regular tags and all worked ok.
How do I prevent Grails from combining js files into one?
Thanks
You would want to use the exclude argument when declaring your resources so the bundle mapper doesn't run.
jquerymobile{
resource url:'css/jquery.mobile-1.3.2.css', exclude: 'bundle'
resource url:'js/jquery.mobile/jquery.js', exclude: 'bundle'
resource url:'js/jquery.mobile/jquery.mobile-1.3.2.js', exclude: 'bundle'
}
The documentation covers this and is quite good. You should always start there.
Another option is
jquerymobile{
defaultBundle false
resource url:'css/jquery.mobile-1.3.2.css'
resource url:'js/jquery.mobile/jquery.js'
resource url:'js/jquery.mobile/jquery.mobile-1.3.2.js'
}
This will disable bundling for all resources in this module
I learned that how to embedded a HTML page to a gnome JavaScript application and show it in a Gtk+ frame.
// Create a webview to show the web app
this._webView = new Webkit.WebView ();
// Put the web app into the webview
this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +
"/hellognome.html", null));
// Put the webview into the window
this._window.add (this._webView);
// Show the window and all child widgets
this._window.show_all();
Now i am going to access a Gtk+ API (like accessing to file system ) or a JavaScript function in my gnome JavaScript application from this HTML (hellognome.html) file using JavaScript?
Somthing like this:
<html>
<head>
<title>Hello, GNOME!</title>
<!-- Use JavaScript to show a greeting when someone clicks the button -->
<script type="application/javascript">
function greeting () {
document.getElementById ("greeting").innerHTML = ("O hai!");
//// access to a Gtk+ API (like accessing to file system )
or a JavaScript function in my gnome JavaScript application.
}
</script>
</head>
<body>
<br /> <br />
<button type="button" onclick="greeting()">Hello, GNOME!</button>
<!-- Empty H1 element gets filled in when the button is clicked -->
<h1 id="greeting"></h1>
</body>
</html>
Thanks in advance.
You can't use GTK APIs from inside the JS inside the HTML. You'll have to set up some method of communication between the two. For example, connect to the window-object-cleared signal and set some methods on the window object.
I have a use case in which i want to include my main.gsp file in my page list.gsp , that is easily achieved by doing
<meta name="layout" content="main"/>
But the problem is that it has jQuery 1.6 version but i want an alternative to that a file called as jquery.js and i when i am including it as well in addition to the main layout its conflicting and creating a problem ..
like
<script type="text/javascript" src="${resource(dir: 'js/jquery', file: 'jquery.js')}"></script>
The above is not working , so what i have thought is either manually differentiate the files to be included on my list.gsp page or is there a way to include everything that is on main.gsp page except this jQuery1.6.js file ??
I am open to any other suggestions..
Thanks in advance
A dirty method could be to put the script import in a if block that checks for a page property, and in your list.gsp set that property.
In list.gsp:
<body fooProperty="1">
And in main.gsp:
<g:if test="${pageProperty(name:'body.fooProperty) ?: false}">
<%--includes you want for list.gsp here--%>
</g:if>
<g:else>
<%--normal script link -%>
</g:else>
Forces a if/else on every single page load you got, but there isnt many other ways to do it. Might be to set a hidden page property and write a loader that overrides the 1.6 import in javascript itself.
Put in your main.gsp
${if(!params.jqueryVersion) params.jqueryVersion=''}
<script type="text/javascript" src="${resource(dir: 'js/jquery', file: 'jquery${params.jqueryVersion)}.js')}"></script>
and in your list controller return
[myInstancesList:list, jqueryVersion:'-1.4.2']
I am using an open source wysiwyg editor on one of my asp.net web pages to create news pages... On one page It is put into place like this:
Registered at top of asp.net web page...
<%# Register Src="~/WebUserControls/HTMLEditorControl.ascx" TagName="HTMLEditorControl" TagPrefix="uc2" %>
Incorporated into the page:
<div>
<uc2:HTMLEditorControl ID="HelpTextBox" runat="server" />
</div>
In the code behind there is a Save method that basically saves the above editor data using the id:
dataset.column = htmlTextArea.GetHTML ;
When I try to bring up the page with the editor, I get the error: 'WYSIWYG' is undefined at Line 900, which is:
<script language="javascript" type="text/javascript" >
WYSIWYG.attach('ctl00_ContentPlaceHolder_HelpTextBox_htmlTextArea');
</script>
What's confusing, I have another page set up identically, that produces the same WYSIWYG.attach source, but it handles it with no problem at all. The only difference is the names of the pages. The page that works produces the following, with no problem:
<script language="javascript" type="text/javascript" >
WYSIWYG.attach('ctl00_ContentPlaceHolder_htmlTextArea_htmlTextArea');
</script>
So I'm at a loss...
Does the name of your code-behind class match the class name of your aspx page? Does the aspx page point to the correct code behind file?
My guess is that you copied and pasted but forgot to change that.