How to optimise ram memory consumption by javascript web application -

i have javascript web application abnormally consumes more 4gb of ram memory, when launch application memory consumption 700 800mb while doing action on application time longer ram memory consumption spike up. root cause of , how make application consume 400 500mb of ram.

it's impossible answer question, it's broad , don't know code (and won't read obvious reasons). think should read article on javascript optimisation on google chrome développer website.

you should analyse functions use memory , pin point problem find possible memory leak and/or optimise code.

https://developers.google.com/speed/articles/optimizing-javascript

optimizing javascript code

authors: gregory baker, software engineer on gmail & erik arvidsson, software engineer on google chrome

recommended experience: working knowledge of javascript

client-side scripting can make application dynamic , active, browser's interpretation of code can introduce inefficiencies, , performance of different constructs varies client client. here discuss few tips , best practices optimize javascript code.

defining class methods

the following inefficient, each time instance of baz.bar constructed, new function , closure created foo:

baz.bar = function() { // constructor body this.foo = function() { // method body }; } preferred approach is:

baz.bar = function() { // constructor body };

baz.bar.prototype.foo = function() { // method body }; approach, no matter how many instances of baz.bar constructed, single function ever created foo, , no closures created.

initializing instance variables

place instance variable declaration/initialization on prototype instance variables value type (rather reference type) initialization values (i.e. values of type number, boolean, null, undefined, or string). avoids unnecessarily running initialization code each time constructor called. (this can't done instance variables initial value dependent on arguments constructor, or other state @ time of construction.)

for example, instead of:

foo.bar = function() { this.prop1_ = 4; this.prop2_ = true;
this.prop3_ = []; this.prop4_ = 'blah'; }; use:

foo.bar = function() { this.prop3_ = []; };

foo.bar.prototype.prop1_ = 4;

foo.bar.prototype.prop2_ = true;

foo.bar.prototype.prop4_ = 'blah'; avoiding pitfalls closures

closures powerful , useful feature of javascript; however, have several drawbacks, including:

they common source of memory leaks. creating closure slower creating inner function without closure, , slower reusing static function. example:

function setupalerttimeout() { var msg = 'message alert';
window.settimeout(function() { alert(msg); }, 100); } slower than:

function setupalerttimeout() { window.settimeout(function() { var msg = 'message alert'; alert(msg); }, 100); } slower than:

function alertmsg() { var msg = 'message alert'; alert(msg); }

function setupalerttimeout() { window.settimeout(alertmsg, 100); } add level scope chain. when browser resolves properties, each level of scope chain must checked. in following example:

var = 'a';

function createfunctionwithclosure() { var b = 'b'; return function () { var c = 'c'; a; b; c; }; }

var f = createfunctionwithclosure(); f(); when f invoked, referencing slower referencing b, slower referencing c. see ie+jscript performance recommendations part 3: javascript code inefficiencies information on when use closures ie.

avoiding with

avoid using in code. has negative impact on performance, modifies scope chain, making more expensive variables in other scopes.

avoiding browser memory leaks

memory leaks common problem web applications, , can result in huge performance hits. memory usage of browser grows, web application, along rest of user's system, slows down. common memory leaks web applications involve circular references between javascript script engine , browsers' c++ objects' implementing dom (e.g. between javascript script engine , internet explorer's com infrastructure, or between javascript engine , firefox xpcom infrastructure).

here rules of thumb avoiding memory leaks:

use event system attaching event handlers

the common circular reference pattern [ dom element --> event handler --> closure scope --> dom ] element discussed in msdn blog post. avoid problem, use 1 of well-tested event systems attaching event handlers, such in google doctype, dojo, or jquery.

in addition, using inline event handlers can lead kind of leak in ie. not common circular reference type leak, rather leak of internal temporary anonymous script object. details, see section on "dom insertion order leak model" in understanding , solving internet explorer leak patterns , and example in javascript kit tutorial.

avoid expando properties

expando properties arbitrary javascript properties on dom elements , common source of circular references. can use expando properties without introducing memory leaks, pretty easy introduce 1 accident. leak pattern here [ dom element --> via expando--> intermediary object --> dom element ]. best thing avoid using them. if use them, use values primitive types. if use non-primitive values, nullify expando property when no longer needed. see section on "circular references" in understanding , solving internet explorer leak patterns.