Question

Does it make sense to make use of $.getScript(); in jQuery to do something like the following:

$("#action-one").click(function() {     
    $.getScript('scripts/action-one.js');
});

$("#action-two").click(function() {     
    $.getScript('scripts/action-two.js');
});

Would reduce the size of your main.js file making load times faster? Also means code is only ever loaded if it’s used, could come into issues if the same code is loaded over and over though ..

(I’m not doing this at the moment but it just crossed my mind if you have very large js files)

Answer 1

If the code is not needed immediately, it makes sense to load those scripts asychronously upon page load. That way they won’t slow down the page load in any way, but then they will be immediately available later when/if needed.

But, loading them only upon demand usually interferes with the user experience – making the viewer wait for the scripts to load before their operation can proceed so most sites decide that is not the best user experience to load them only when needed.

There are exceptions, of course. If the scripts are gigantic and are rarely needed, then loading on-demand might make sense. But usually they are not large, so loading them asynchronously AFTER page load is a better idea.

Also, keep in mind that once the scripts have been loaded once, they will generally load quickly from the browser cache.