I have an app that has a bunch of resources. Having read about javascript loaders I decided to see what kind of boost I’d get from loading resources asynchronously. To my surprise I found that using a loader was visibly slower (no stopwatch needed). This has me wondering if others had similar results and what a dev ought consider regarding when to use or not use a javascript resource loader.
Here are some details about my tests:
- Currently have 60 resources (primarily scripts)
- Due to dependency hierarchies scripts had to be loaded in about 8 batches
- Primarily used Firefox (but tried in Chrome as well)
- Ran tests on both Ubunutu and Windows
- Using a loader (YepNope in my case) does add a little overhead
- I wrote a small bootloader class to simplify my interaction with YepNope.
- Source code is on github (run tests.html and tests-loader.html)
When I say “slower” I’m not saying it’s terribly slow. It’s just that I had to spend some time to set this up and that the results were worse than before I started.
Is 60 resources too few to use a loader? Should resources generally be huge or can they be a bunch of small files? What kinds of things would cause a loader to be slower than using traditional script tags?
Resources are loaded asynchronously? First of all, is the device you are using multi-core? Async. loading is only useful if you have a multi-core computer, laptop, tablet, phone, or other device.
Second, is the loader you use a quality one? Try different loaders, as I see it, there are no standard “this is good” loaders right now, so one you have might be broken. Another one may work.
Are you sure browsers aren’t already optimizing page resource loading? Using an alternate way may actually get in the way of new and faster browsers, slowing down page loading.
Personally I haven’t used these loaders, these are just my educated guesses.