{"id":1403,"date":"2014-03-10T14:52:02","date_gmt":"2014-03-10T12:52:02","guid":{"rendered":"http:\/\/hasselba.ch\/blog\/?p=1403"},"modified":"2014-03-10T14:52:02","modified_gmt":"2014-03-10T12:52:02","slug":"xpages-use-async-defer-option-for-external-csjs-script-libraries","status":"publish","type":"post","link":"https:\/\/hasselba.ch\/blog\/?p=1403","title":{"rendered":"XPages: Use async \/ defer option for external CSJS Script Libraries"},"content":{"rendered":"

When adding CSJS libraries to your XPage, try to use the defer<\/a> or the async<\/a> option for a better user experience. When not using this options, the Page might be blocked during page load.<\/p>\n

Have a look at this example XPage which contains two external CSJS scripts (for demonstration purposes they are computed to get a remote script out of nowhere):<\/p>\n

<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<xp:view xmlns:xp=\"http:\/\/www.ibm.com\/xsp\/core\">\r\n    Foo!\r\n    <xp:this.resources>\r\n        <xp:script clientSide=\"true\">\r\n            <xp:this.src>\r\n               <![CDATA[#{javascript:\"http:\/\/\" + @Unique() + \".null\";}]]>\r\n            <\/xp:this.src>\r\n        <\/xp:script>\r\n    <\/xp:this.resources>\r\n    <xp:scriptBlock id=\"scriptBlock1\">\r\n        <xp:this.src>\r\n           <![CDATA[#{javascript:\"http:\/\/\" + @Unique() + \".null\";}]]>\r\n        <\/xp:this.src>\r\n    <\/xp:scriptBlock>\r\n    Bar!\r\n<\/xp:view><\/code><\/pre>\n
When opening the XPage, the DOM is blocked, until the operation times out:<\/p>\n
\"\"<\/p>\n
\"\"<\/p>\n
The best you can do is to use the async<\/em> or the defer<\/em> option of external CSJS scripts. For script blocks, there is an option in the DDE available:<\/p>\n
\"\"<\/p>\n
The async<\/em> option can be set with an attribute:<\/p>\n
<xp:this.attrs>\r\n\u00a0\u00a0\u00a0 <xp:attr name=\"async\" value=\"async\" minimized=\"true\" \/>\r\n<\/xp:this.attrs><\/code><\/pre>\n
To use the option for a resource, you must add them as an attribute for both options:<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<xp:view xmlns:xp=\"http:\/\/www.ibm.com\/xsp\/core\">\r\n\u00a0\u00a0 \u00a0Foo!\r\n\u00a0\u00a0 \u00a0<xp:this.resources>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:script clientSide=\"true\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:this.src>\r\n               <![CDATA[#{javascript:\"http:\/\/\" + @Unique() + \".null\";}]]>\r\n            <\/xp:this.src>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:this.attrs>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:attr name=\"async\" value=\"async\" minimized=\"true\" \/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:this.attrs>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:script>\r\n\u00a0\u00a0 \u00a0<\/xp:this.resources>\r\n\u00a0\u00a0 \u00a0<xp:scriptBlock id=\"scriptBlock1\" defer=\"true\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:this.src>\r\n           <![CDATA[#{javascript:\"http:\/\/\" + @Unique() + \".null\";}]]>\r\n        <\/xp:this.src>\r\n\u00a0\u00a0 \u00a0<\/xp:scriptBlock>\r\n\u00a0\u00a0 \u00a0Bar!\r\n<\/xp:view><\/code><\/pre>\n
There are some other techniques<\/a>, but this is the simplest way and supported in most browsers:<\/p>\n