CODEWITHSUNDEEP
javascript
Bogdan Borisov
Bogdan Borisov

Reputation: 21

Defer loading of JavaScript (3 files)

All day I read and review on Defer loading in JavaScript and nothing. I tried with defer/async attributes and deferredfunctions.js(?). What should I do with it and where to put it? Sorry for my ignorance.

Here is my code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="http://mysite.com/files/js/mosaic.1.0.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){     $('.fade').mosaic();});</script>

Upvotes: 0

Views: 281

Answers (1)

jAndy
jAndy

Reputation: 236022

The question is a little bit too widespreaded to answer correctly. Loading javascript code asyncronously / deferred and using a script-loaded should have a lot of different reasons.

Why should you load it deferred? Just for the same reason you should put all your <script> tags at the very bottom of your HTML markup. <script> elements do block the executing of the browsers HTML renderer. When a <script> elements gets encountered, the HTML parser will stop and load+evaluate that script file before it continues. This can have a more or less huge performance impact on page-loading times (depending on the number and size of your javascript files).

Thats the reason why you should tag your <script> elements with async and/or deferr attributes. If a browser understands those attributes (which pretty much every modern browser does) it will not stop, but load and evaluate the resource asyncronously.

You might say now, "what about order and dependencies", which would be a valid and good argument. If you flag all your scripts for the browser that allow to load them asyncronously, order is no longer guaranteed, which is a big problem if scripts depend on the presence of other scripts. Here is the point where third-party script loaders like requireJS come to the stage.

Upvotes: 2

Related Questions