CODEWITHSUNDEEP
javascript
Samantha J T Star
Samantha J T Star

Reputation: 32798

How can I reduce the load time of my javascripts?

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

Upvotes: 3

Views: 3357

Answers (10)

theintersect
theintersect

Reputation: 758

This is script blocking. Its a browser feature. Different browsers download different number of files in parallel. Scripts will be loaded and executed after each other. You can read these articles by Steve Souders and Nicolas Zakas. This could help you.

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/ http://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/

Upvotes: 1

Vitalii Maslianok
Vitalii Maslianok

Reputation: 1631

You can use async command (HTML5):

<script async src="slow.js"></script>

Dynamic scripts load:

var script = document.createElement("script");
script.async = false;
script.src = url;
document.head.appendChild(script);

HTML5 Async Scripts

Upvotes: 3

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382150

Yes, they will be loaded and executed one after the other. And you can't change that.

But if you're concerned about performances you may be happy to learn that the download process is different and may be parallelized by the browser.

You can see it in Chrome by opening the network tab of the Chrome Developer Tools.

If you want to reduce the total time, the best solution is to concatenate all the files in one (and minify them if possible but the important operation is the concatenation).

Upvotes: 1

Stphane
Stphane

Reputation: 3456

You could merge files when pushing them to production in order to get a single file [and minimify them]... This way you will save requests hand checks and all steps in between ...

Upvotes: 0

Sudip
Sudip

Reputation: 2051

You can try with this techniques, whichever is suitable with your existing code...

1. Use minify version of JS code
2. Add only one external JS file (copy all content to one)
3. Use cookie less domain

Upvotes: 0

Hugo Scott-Slade
Hugo Scott-Slade

Reputation: 897

Depending on the browser, different amounts of files will be loaded in parallel. They should be executed in parallel, but for the best results attach an event handler to the page like onload.

Concatenating your files will improve load times if they don't change by reducing the server round trip. You can also try using a cache manifest or loading tertiary scripts lazily with AJAX.

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

If your questions are related to the title (How can I reduce the load time of my javascripts?) a good approach is to

  • review the code, removing and optimizing where necessary
  • concatenate all files (in the order of loading)
  • minify the code
  • serve the single file with gzip compression
  • make use of caching to avoid unnecessary requests

Upvotes: 0

SergioMSCosta
SergioMSCosta

Reputation: 334

Depending on the browser and the number of other files being downloaded (images, for example), you may have several JavaScript files being downloaded simultaneously by the order you put them.

You can see this happening by using Firebug or Chrome's developer tools. You'll notice that your browser will always load more than one file but the maximum number of simultaneous downloads varies on the browser and version being used.

Upvotes: 0

Miha Rekar
Miha Rekar

Reputation: 1546

You can concatenate and minify them with tools like this. If you have a Mac there is even an awesome app that automates this process called CodeKit

Upvotes: 1

Golo Roden
Golo Roden

Reputation: 150624

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.

Upvotes: 3

Related Questions