Question

I have the following code on my page:

<script src="/Scripts/common/layout/addAccessControls.js"></script>
<script src="/Scripts/common/layout/addAjaxControls.js"></script>
<script src="/Scripts/common/layout/addBodyControls.js"></script>
<script src="/Scripts/common/layout/addContentControls.js"></script>
<script src="/Scripts/common/layout/addThemeControls.js"></script>
<script src="/Scripts/common/layout/hashClick.js"></script>
<script src="/Scripts/common/layout/setSideBar.js"></script>

Is it correct that all the scripts will load one after another? If so is there a way I can make more than one load at once?

Just to clarify the question a bit. I can minify these and concat and maybe they’re already mimified and concated 🙂 What I am intersted to find out is the load process given these exact files. Is it one file after the other. Does the browswer do anything to parallel load. Thanks

Answer 1

Well, first problem is that the scripts are loaded one after the other.
Second problem is the number of requests. The more requests, the longer it takes.

Most simple approach would be to concat the files server-side into one single .js file so that you only have one request left. This will speed up things.

If you additionally minify the scripts, this will speed up things, too.

Depending on what framework you use server-side there are various solutions on how to do this. E.g., for Node.js you can use Piler to do this at runtime.

Or, of course, you can always do this manually, respectively via a build job.

PS: And, of course, you can use other mechanisms to load scripts files, such as dynamically adding script tags which will allow you to parallelize loading. See http://blogs.msdn.com/b/kristoffer/archive/2006/12/22/loading-javascript-files-in-parallel.aspx for details.