Question

I saw someone load JS in his html as following (via JQuery ajax):

(jquery.utils.js, jquery.utils.js, browser_files/background.js in the same domain)

<script>

var scriptsArr = [
"scripts/jquery.utils.js",
"scripts/jquery.utils.js",
"browser_files/background.js",
]

for(var i=0;i<scriptsArr.length;i++)
{
    var path = scriptsArr[i];

    $.ajax({
        async: false,
        cache: false,
        url: chrome.extension.getURL(path),
        type: "GET",
        success: function(){},
        dataType: 'script'
    });
}
</script>

This approach(via ajax) has some advantages??

And why use tag

<script src=""> 

attribute “src” load this library????

Answer 1

This is called Lazy Loading or On-demand loading of JavaScript.

Apart from saving unnecessary loading of script files the other main advantages is speed.

Scripts loaded asynchronously are non-blocking. i.e. they do not interrupt the loading of a page.