Javascript单页应用程序和脚本管理

Question

I'm building a single page application with vanilla JS + Knockout JS. The application will consist of multiple sub-applications which I would like to dynamically load (and subsequently unload). The problem is that while I can add and execute a new script with the following:

function loadJs(url, hash){
    var fileObj=document.createElement('script');
    fileObj.setAttribute('type','text/javascript');
    fileObj.setAttribute('src', url);

    if (hash != undefined) {
        fileObj.setAttribute('integrity', hash);
    }

    fileObj.setAttribute('crossorigin', 'anonymous')
    document.getElementsByTagName('head')[0].appendChild(fileObj);
}

I cannot remove (including from memory) with the following:

function unloadJs(url){
    var allScripts = Array.from(document.getElementsByTagName('script'));

    allScripts.forEach( script => {
        if (script.src == url) {
            script.remove();
        }
    });
}

The remove script only removes the tag, but the code is still in memory. Based on this, it seems like I should just load all the application scripts when the application is initially opened rather than managing them dynamically. In this method, I could combine and minify the script into a single file. I was hoping to minimize browser memory usage and prevent leaks.

I read a few SO answers discussing closures and code leaving memory automatically when no longer referenced, but I couldn't establish exactly what the examples were showing and whether my time was well invested to specifically understand closures.

The Javascript code is only handling the UI, and there is minimal data manipulation. The major work will be done on the server with JS displaying the results. Is this type of thing simply premature optimization?

Answer 1

As you have found, removing the script tag does not automatically remove the code or variables from memory. It might eventually get collected eventually, but it's not something you can guarantee. In my experience, they stick around for a while.

I would suggest loading your scripts into a minified JS file and loading them in advance like you describe.

If you're concerned about memory use, you could externalize each set of mini-apps' scripts into a JS object so that all the objects and functions are part of one single parent object for each mini-app (sort of a namespace). You would create a new isntance for that specific page/app's object when it's loaded, and then you can destroy/delete that object when it is unloaded. That would tell the garbage collector that the object can be removed.