15

I am thinking of a web application on browsers. I can dynamically add required js files as needed while traversing through different parts of application, but can I unload unnecessary js content from the current session's "memory" as the memory usage grows over time?

I know it is possible to remove the tag responsible for the content but it is not assured that it will eventually unload and unbind everything correspondent to that content.

Thanks

2
  • Unless you are able to know all the methods and variables, there is no way to unload a script from memory. Commented Jan 25, 2016 at 16:30
  • 1
    javascript have auto garbage collector same as Java language. you read article developer.mozilla.org/en-US/docs/Web/JavaScript/… Commented Jan 25, 2016 at 16:36

1 Answer 1

10

I know it is possible to remove the tag responsible for the content but it is not assured that it will eventually unload and unbind everything correspondent to that content.

In fact, it's assured that it will not. Once the JavaScript is loaded and executed, there is no link between it and the script element that loaded it at all.

You can dynamically load and unload modules, but you have to design it into your code by

  • Having a module have a single symbol that refers to the module as a whole
  • Having an "unload" function or similar that is responsible for removing all of a module's event listeners and such

Then unloading the module is a matter of calling its unload function and then setting the symbol that refers to it to undefined (or removing it entirely, if it's a property on an object).

Here's a very simple demonstration of concept (which you'd adapt if you were using some kind of Asynchronous Module Definition library):

// An app-wide object containing a property for each module.
// Each module can redefine it in this way without disturbing other modules.
var AppModules = AppModules || {};

// The module adds itself
AppModules.ThisModule = (function() {
    var unloadCallbacks = [];

    function doThis() {
        // Perhaps it involves setting up an event handler
        var element = document.querySelector(/*...*/);
        element.addEventHandler("click", handler, false);
        unloadCallbacks.push(function() {
            element.removeEventHandler("click", handler, false);
            element = handler = undefined;
        });

        function handler(e) {
            // ...
        }
    }

    function doThat() { 
        // ...
    }

    function unload() {
        // Handle unloading any handlers, etc.
        var callbacks = unloadCallbacks;
        unloadCallbacks = undefined;
        callbacks.forEach(function(callback) {
            callback();
        });

        // Remove this module
        delete AppModules.ThisModule;
    }

    return {
        doThis: doThis,
        unload: unload
    };
})();

That callbacks mechanism is very crude, you'd want something better. But it demonstrates the concept.

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

7 Comments

So in that sense there is no way to be sure that a 3rd party module (eg. select2, typeahead, etc.) have any sort of encapsulation and unload or destructors. Right?
@Cunning: Right. You'd hope that as well-behaved plugins they would only have functions hooked up to things if you'd initialized them and not called their destroy method, in which case delete jQuery.fn.select2; would do it (provided you had destroyed all select2 instances). You'd hope. :-)
Thanks a lot! Keeping this in mind will surely help building a cleaner code, too.
@T.J.Crowder sorry for that, I mean can unload be done from window object? am trying to delete window.onOfMyGlobalFunctions; but with no luck..
@shamaseen - There are (roughly) three kinds of properties on window: 1. Predefined ones; 2. Ones created via var at global scope; 3. And ones created via assignment, window.prop = value;. You can only remove (delete) the last kind. So if you currently have var onOfMyGlobalFunctions = ..., change it to window.onOfMyGlobalFunctions = ... and then you'll be able to delete it later.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.