How can I reduce the load time of my javascripts? - Stack Overflow

admin管理员组

文章数量:1289537

I have the following code on my page:

<script src="/Scripts/mon/layout/addAccessControls.js"></script>
<script src="/Scripts/mon/layout/addAjaxControls.js"></script>
<script src="/Scripts/mon/layout/addBodyControls.js"></script>
<script src="/Scripts/mon/layout/addContentControls.js"></script>
<script src="/Scripts/mon/layout/addThemeControls.js"></script>
<script src="/Scripts/mon/layout/hashClick.js"></script>
<script src="/Scripts/mon/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

I have the following code on my page:

<script src="/Scripts/mon/layout/addAccessControls.js"></script>
<script src="/Scripts/mon/layout/addAjaxControls.js"></script>
<script src="/Scripts/mon/layout/addBodyControls.js"></script>
<script src="/Scripts/mon/layout/addContentControls.js"></script>
<script src="/Scripts/mon/layout/addThemeControls.js"></script>
<script src="/Scripts/mon/layout/hashClick.js"></script>
<script src="/Scripts/mon/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

• javascript

Share Improve this question Follow edited Sep 27, 2012 at 11:11 Samantha J T Star asked Sep 27, 2012 at 11:02 Samantha J T StarSamantha J T Star 32.8k8989 gold badges256256 silver badges441441 bronze badges 3

• you can use minify javascript for that it pacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time. – Pragnesh Chauhan Commented Sep 27, 2012 at 11:05
• 1 I know I can use minify but I guess that wasn't the question :-( – Samantha J T Star Commented Sep 27, 2012 at 11:07
• I'd also suggest placing as many as possible to load at the end of the page, so the page's content can load & display before those requests occur. – SubjectCurio Commented Sep 27, 2012 at 11:14

Add a ment  | 

10 Answers 10

Sorted by: Reset to default 3

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./b/kristoffer/archive/2006/12/22/loading-javascript-files-in-parallel.aspx for details.

You can use async mand (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

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

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).

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./blog/2009/04/27/loading-scripts-without-blocking/ http://www.nczonline/blog/2009/06/23/loading-javascript-without-blocking/

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.

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 pression
• make use of caching to avoid unnecessary requests

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.

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

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 ...

本文标签： How can I reduce the load time of my javascriptsStack Overflow