Defer loading of JavaScript (3 files)

Question

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>

jAndy · Accepted Answer · 2012-12-02 20:29:19Z

2

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.

answered Dec 2, 2012 at 20:29

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jared Farrish Over a year ago

Interesting response. I think it's useful to mention require.js as well. Good answer.

Collectives™ on Stack Overflow

Defer loading of JavaScript (3 files)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related