CODEWITHSUNDEEP
jquery
Michael
Michael

Reputation: 13616

Is the order of loading jQuery scripts important?

I am new to client development. If I have this order of loading jQuery libraries:

<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/jquery-ui.js"></script>
<script type="text/javascript" src="/jquery-ui.min.js"></script>

And this order of loading jQuery libraries:

<script type="text/javascript" src="/jquery-ui.js"></script>
<script type="text/javascript" src="/jquery-ui.min.js"></script>
<script type="text/javascript" src="/jquery.js"></script>

Is it the same? In other words, is order in which load jQuery scripts is important?

Upvotes: 0

Views: 2581

Answers (2)

Purag
Purag

Reputation: 17061

In your example, the scripts will be loaded and executed in order, which is necessary. jQuery UI requires jQuery to be available on the webpage.

This also means that the rest of the webpage will wait for these scripts to be requested and executed before moving on to the next thing to load.

Script tags in the head section of the page will load synchronously by default, as I described above. However, you can add the async attribute to them to make them load asynchronously; meaning, the order in which they are loaded and executed cannot be predicted. jQuery generally should not be loaded asynchronously, since, when using it, you generally have code that is dependent on it.

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

The above code will load the script asynchronously, meaning it will be loaded randomly (you can never predict it), and it will not lock up the page during loading. This is very useful in other cases!

Upvotes: 2

Satpal
Satpal

Reputation: 133403

Yes, Order of script is important.

You should use following order

<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/jquery-ui.min.js"></script>

Since jquery-ui is dependent of jquery one should always load jQuery first.

Also, As jquery-ui.min is minified version of jquery-ui one should load either of them, I prefer minified version.

Upvotes: 3

Related Questions