timcoat (3) [Avatar] Offline
#1
I notice that on a simple login page a lot of js files are being loaded from resources. I wonder if this is normal or what can I do to limit the loading of js files? I am betting that I do not need all of these files to load for every page. Especially pages that do not use any of these files.

I know these are being loaded from load-script tag but how to still use the tag and yet optimize the page loading is my question.

My console output is:


GET http://localhost:8080/shop-1.0.0/resources/dojo/parser.js 304 Not Modified 26ms
GET http://localhost:8080/shop-1.0.0/resources/dojo/date/stamp.js 304 Not Modified 39ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/TitlePane.js 304 Not Modified 127ms
GET http://localhost:8080/shop-1.0.0/resources/dojo/fx.js 304 Not Modified 80ms
GET http://localhost:8080/shop-1.0.0/resources/dojo/fx/Toggler.js 304 Not Modified 74ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_Templated.js 304 Not Modified 47ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_Widget.js 304 Not Modified 71ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_WidgetBase.js 304 Not Modified 46ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_base/manager.js 304 Not Modified 89ms
GET http://localhost:8080/shop-1.0.0/resources/dojo/Stateful.js 304 Not Modified 30ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_base.js 304 Not Modified 50ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_base/focus.js 304 Not Modified 57ms
GET http://localhost:8080/shop-1.0.0/resources/dojo/window.js 304 Not Modified 65ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_base/place.js 304 Not Modified 51ms
GET http://localhost:8080/shop-1.0.0/resources/dojo/AdapterRegistry.js 304 Not Modified 65ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_base/popup.js 304 Not Modified 52ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_base/window.js 304 Not Modified 49ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_base/scroll.js 304 Not Modified 69ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_base/sniff.js 304 Not Modified 48ms
GET http://localhost:8080/shop-1.0.0/resources/dojo/uacss.js 304 Not Modified 55ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_base/typematic.js 304 Not Modified 47ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_base/wai.js 304 Not Modified 66ms
GET http://localhost:8080/shop-1.0.0/resources/dojo/string.js 304 Not Modified 65ms
GET http://localhost:8080/shop-1.0.0/resources/dojo/cache.js 304 Not Modified 65ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/layout/ContentPane.js 304 Not Modified 49ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/layout/_ContentPaneResizeMixin.js 304 Not Modified 69ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_Contained.js 304 Not Modified 38ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/layout/_LayoutWidget.js 304 Not Modified 78ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_Container.js 304 Not Modified 47ms
GET http://localhost:8080/shop-1.0.0/resources/dojo/html.js 304 Not Modified 75ms
GET http://localhost:8080/shop-1.0.0/resources/dojo/i18n.js 304 Not Modified 41ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/nls/loading.js 304 Not Modified 60ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/_CssStateMixin.js 304 Not Modified 47ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/form/ValidationTextBox.js 304 Not Modified 592ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/form/TextBox.js 304 Not Modified 102ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/form/_FormWidget.js 304 Not Modified 55ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/Tooltip.js 304 Not Modified 46ms
GET http://localhost:8080/shop-1.0.0/resources/dijit/form/nls/validate.js 304 Not Modified 49ms
ken.rimple (246) [Avatar] Offline
#2
Re: Loading a lot of js files from resources
Tim,

The 304 Not Modified is being returned for each of these, that's true. The reason they are being asked for at all is because Roo's default tag library for all user interface tags uses Dojo.

Dojo is a modular Javascript component library. Roo uses a number of elements from Dojo itself, including:

parser.js - the Dojo page parser
TitlePane.js - the border around all Roo forms (see form:create, etc) is a title pane
All items are widgets, hence the _Widget.js and _WidgetBase.js, etc...

and the list goes on and on. Client-side validation is done within the tags, such as field, etc.., and those use the Dojo validation library.

Roo added the Spring Resource support - which serves contents out of an in-memory resource cache (a very nice feature for speeding up subsequent new requests for the same resource content), but it doesn't stop the browser for asking for these resources.

Each of those asks takes a network hit, so it's not very efficient to request them, versus providing them in one single resource instead. It would be nice if you could just ask for Dojo in one simple tag, but actually what is happening is that the page is asking for parts of Dojo, and in turn, they ask for dojo parts, and so on.

This is all quite fast, but still, it's a number of resources being queried. People smarter than me may say we need e-tags and would know how to configure Spring resource downloads to use them etc... An area I haven't spent much time in and don't really know much about.

One of the things I'm publishing in the next MEAP is the instructions for how to create an add-on to support installing jQuery and jQuery UI. Then you can take apart their tags and replace Dojo support with whatever you wish (such as jQuery UI, etc).

At some point, after the book is in editing, I'll get around to getting a good jQueryUI widget library going to replace the Dojo one if people want that. But I'm too busy on the book now to focus on that.

Hope this helps,

Ken