Skip to main content

Can we delay jmaki.addWidget calls from to ?

2 replies [Last post]
bouteill
Offline
Joined: 2004-07-02

In accordance with YSlow principles, we've been putting our s at the bottom of our pages to improve performance.
We're trying to leverage jmaki 1.8 new CombinedResourceServlet (CRS) to combine all the js calls into one HTTP request in the HTML head. This works great, but it appears it's also initializing the widgets at the same time in the HTML head, which slows down the page load...
So we've to trade delayed javascript code for combined resource calls. :( Wish we could have both!
Is there any way to delay the jmaki.addWidget calls from to ?

I get the sense this is an architectural matter which is not configurable and probably difficult to change as the CRS call is not rendered as a but apparently dynamically loaded in javascript. I assume through the jmaki.addWidget call?
This said, I thought I should try to bring this up anyway.
Maybe an enhancement?
Is this a valid use case?
Could render a to invoked the CRS while delaying the jmaki.addWidget call to placement?
Or is it architecturally difficult?

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
gmurray71
Offline
Joined: 2003-07-31

The Combined Resource Servlet supports both cases.

The tag should be used to delineate where the widgets are in the page. What will happen is if it is placed in the head the combined css will be accessible via a url at the location of the initial tag and the combined resources will be made accessible via a url at the closing tag.

Example:

<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<a:page>
<head>
<title>Combined Test Without Resources Tag</title>

</head>
<body>
<h2>Combined Test Without Resources Tag</h2>
<a href="index.jsp">Back to Tests</a>
<hr>
<a:widget name="jmaki.test.combined1"/>
<a:widget name="jmaki.test.combined2"/>
<a:widget name="jmaki.test.combined3"/>
</body>
</a:page>
</html>

Will be rendered as:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<title>Combined Test Without Resources Tag</title>

</head>
<body>
<h2>Combined Test Without Resources Tag</h2>
<a href="index.jsp">Back to Tests</a>
<hr>
<script type="text/javascript" src="http://localhost:8080/jmaki-performance/resources/jmaki-min.js"></script>
<script type="text/javascript">jmaki.webRoot='http://localhost:8080/jmaki-performance';jmaki.resourcesRoot ='/resources';jmaki.xhp ='http://localhost:8080/jmaki-performance/xhp';jmaki.locale='en_US';</script>
<script type="text/javascript" src="http://localhost:8080/jmaki-performance/resources/jmaki/ext/bar/extension.js"></script>
<script type="text/javascript">jmaki.addExtension({name : 'jmaki.ext.bar', extensionDir : 'http://localhost:8080/jmaki-performance/resources/jmaki/ext/bar', args : {topic:'facestopic'}});</script>
<script type="text/javascript" src="http://localhost:8080/jmaki-performance/resources/system-glue.js"></script>
<script type="text/javascript">jmaki.addWidget({widgetDir:'http://localhost:8080/jmaki-performance/resources/jmaki/test/combined1',uuid:'j_id_id20',name:'jmaki.test.combined1'});</script>
<script type="text/javascript">jmaki.addWidget({widgetDir:'http://localhost:8080/jmaki-performance/resources/jmaki/test/combined2',uuid:'j_id_id22',name:'jmaki.test.combined2'});</script>
<script type="text/javascript">jmaki.addWidget({widgetDir:'http://localhost:8080/jmaki-performance/resources/jmaki/test/combined3',uuid:'j_id_id24',name:'jmaki.test.combined3'});</script>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/jmaki-performance/cr?id=3a93e4d86c011757b0874af0475f53fd.css" media="screen,projection" /><div id="j_id_id20" class="jmk-combined1"></div>
<div id="j_id_id22" class="jmk-combined2"></div>
<div id="j_id_id24" class="jmk-combined3"></div>

</body>
<script src="http://localhost:8080/jmaki-performance/cr?id=3a93e4d86c011757b0874af0475f53fd.js"></script>
</html>

If you want to have the scripts placed in a different location (like in the head for xhtml) you can do this using an tag.

The following :

<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<a:page>
<head>
<title>Combined Test</title>
<a:resources/>
</head>
<body>
<h2>Combined Test</h2>
<a href="index.jsp">Back to Tests</a>
<hr>
<a:widget name="jmaki.test.combined1"/>
<a:widget name="jmaki.test.combined2"/>
<a:widget name="jmaki.test.combined3"/>
</body>
</a:page>
</html>

Gets rendered as:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<title>Combined Test</title>
<script type="text/javascript" src="http://localhost:8080/jmaki-performance/resources/jmaki-min.js"></script>
<script type="text/javascript">jmaki.webRoot='http://localhost:8080/jmaki-performance';jmaki.resourcesRoot ='/resources';jmaki.xhp ='http://localhost:8080/jmaki-performance/xhp';jmaki.locale='en_US';</script>
<script type="text/javascript" src="http://localhost:8080/jmaki-performance/resources/jmaki/ext/bar/extension.js"></script>
<script type="text/javascript">jmaki.addExtension({name : 'jmaki.ext.bar', extensionDir : 'http://localhost:8080/jmaki-performance/resources/jmaki/ext/bar', args : {topic:'notopic'}});</script>
<script type="text/javascript">jmaki.addWidget({widgetDir:'http://localhost:8080/jmaki-performance/resources/jmaki/test/combined1',uuid:'jmaki_test_combined11',name:'jmaki.test.combined1'});</script>
<script type="text/javascript">jmaki.addWidget({widgetDir:'http://localhost:8080/jmaki-performance/resources/jmaki/test/combined2',uuid:'jmaki_test_combined22',name:'jmaki.test.combined2'});</script>
<script type="text/javascript">jmaki.addWidget({widgetDir:'http://localhost:8080/jmaki-performance/resources/jmaki/test/combined3',uuid:'jmaki_test_combined33',name:'jmaki.test.combined3'});</script>
<script type="text/javascript" src="http://localhost:8080/jmaki-performance/resources/system-glue.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/jmaki-performance/cr?id=3a93e4d86c011757b0874af0475f53fd.css" media="screen,projection" /><script src="http://localhost:8080/jmaki-performance/cr?id=3a93e4d86c011757b0874af0475f53fd.js"></script>
</head>
<body>
<h2>Combined Test</h2>
<a href="index.jsp">Back to Tests</a>
<hr>
<div id="jmaki_test_combined11" class="jmk-combined1"></div>

<div id="jmaki_test_combined22" class="jmk-combined2"></div>

<div id="jmaki_test_combined33" class="jmk-combined3"></div>

</body>

</html>

One thing to note though is that we are only combining the jMaki related component.js and component.css files. So if you are using a lot of other libraries like jquery / scriptaculous those will still get loaded but they should be placed at the end of the document as well.

We do have the ability to load script resources and library dependencies after the page is done loading as we do with the HTML version of jMaki but this is another more detailed topic that would be better for a different thread.

So the take aways are:

1) We can load JavaScript related resources at the end of a page. Just don't use the tag and place starting the tag where you want the css to be placed.
2) We had talked about having separate and though it might be late for that in the current release. The method above should be ok?
3) We would like to move in the future to including combining of 3rd party libraries if there is demand.

Could you try to not use the but still use the block around your jmaki resources and see how that improves things?

Let me know how things work.

-Greg

bouteill
Offline
Joined: 2004-07-02

Thanks Greg.
I understand I can delay everything by not using the tag, but I guess what I was looking for was for something in the middle. :)
My understanding of YSlow principles, is that pages should have
1)

to the bottom of the page as they block rendering

I.e. in the case of jmaki, I was hoping to see HTML rendered in the following order:



Combined Test Without Resources Tag




Makes sense?
If so, it appears it's not currently possible to render things that way?
Maybe an enhancement that can be considered?