Load Javascript dynamically understanding

Question

I´ve a page structure with a main area. Every page of the site is loaded in that area using ajax. To properly load the scripts that the new pages is goint to use, I use the next code taken from http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'somescript.js';
newScript.id = "dynamicScript";
headID.appendChild(newScript);

My question is, What happens when the user calls the page several times, all the scritps are loaded once and again? That will cause memory problems in the future?

I tried to remove the script element before creating the new one:

var headScriptfunctions = document.getElementById("dynamicScript");
if (headScriptfunctions != null){
    head.removeChild(headScriptfunctions);
}

And the script is deleted from the head, but anyway, the scripts is still alive because I can call it. I think to use jquery getScript function, but i don´t know how it works when called the same script serveral times.

It depends on that the script does. If you don't want to load this script multiple times, you can use a variable to track if the script has been loaded not run the load script if variable is set. — Will, Jan 12 '16 at 17:25

score 2 · Answer 1 · edited May 23 '17 at 12:15

2

It would not only be a matter of memory, but more critically of references and initialization.

Quick example:

var userClicksCountFromStart = 0;

document.body.addEventListener("click", function () {
    userClicksCountFromStart += 1;
});

Re-loading this script would re-initialize userClicksCountFromStart to 0, and you lose track of your count. Furthermore, you now have 2 listeners, probably adding twice +1 at each click.

It could be even more visible if the script would modify the page (add some Elements, etc.). So loading a script more than once is definitely something to avoid.

As you figured out, removing the <script> tag from DOM is pointless once the JavaScript code has executed.

As for avoiding to load the same script(s) multiple time, you should probably refer to that post: getScript - How to only call if not already called

edited May 23 '17 at 12:15

Community

1
1

answered Jan 12 '16 at 17:39

ghybs

47,565
6
74
99

Thank you I perfectly Understand, I created my own JS files to separate HTML from JavaScript. In that JS files I have standard functions, but I have a lot of code that should be executed at onload, for example, binding clicks events, or initalizating a datatable. So, How should I Inoke this kind of javascript? It´s my code presented right for this kind of javascript? – Keetah Jan 12 '16 at 19:27
I do also think it is a matter of memory as well. If you write a loop that dynamically inserts a – Dan Feb 05 '16 at 15:44

score 1 · Accepted Answer · answered Jan 12 '16 at 17:47

Loading a javascript file several times is a bad idea and can generate problems.

Each time the file is loaded, browser executes all code. So if you have global variables or code at root level (not inside function), variables will be reseted and code will be executed. Functions will be overriden, which doesn't generate problems (maybe memory usage as you mentioned).

Removing dynamicScript element doesn't remove javascript code, as you can see, because code is in memory.

I think that your idea of something like a garbage collector is complex and can give you more problems related to different browsers behaviour.

It is easier to keep a list of loaded scripts to avoid reloading.

var loadedScripts = [];

function loadDynamicScript(scriptUrl)
{
    if (loadedScripts.indexOf(scriptUrl) == -1)
    {
        var js = document.createElement("script");
        js.type = "text/javascript";
        js.src = scriptUrl;
        document.body.appendChild(js);
        loadedScripts.push(scriptUrl);
    }
}

Load Javascript dynamically understanding

2 Answers2