如何减少javascripts的加载时间？

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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/

Answer 6

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.

Answer 7

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

Answer 8

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.

Answer 9

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

Answer 10

您可以在将文件推送到生产时合并文件以获取单个文件[并最小化它们] ...这样您将保存请求手动检查以及介于两者之间的所有步骤...