2

We've been writing an angular.js webapp for a year and we've noticed that some memory leaks have snuck in. Most are easy enough to fix, but hard to spot during development.

How can we monitor the memory usage and performance of the app, so we can get alerts if its performing slowly for our users.

We can log errors to our server, then get a notification. How can I do the same for performance.

I'd like to check something like window.performance.memory.usedJSHeapSize and log an warning if its too big. But it looks like that has to be enabled in Chrome with -enable-memory-info.

Thanks

Edit: I should clarify. Im not asking how I can find memory leaks when I know there are some. I've used the chrome dev tools. I want to know how can I monitor in js running on real clients what the memory usage is of my app. Ta

Stephen
  • 4,228
  • 4
  • 29
  • 40
  • 1
    Some good tips on tracking memory leaks in JS here: http://stackoverflow.com/questions/15970525/how-to-find-js-memory-leaks These won't help you monitor user experience, but are helpful for internal debugging/testing. – KayakDave Dec 03 '13 at 02:37
  • Thanks Dave. Good resources. – Stephen Dec 03 '13 at 05:57
  • For angularjs performance analysis, check out the chrome addon AngularJS Batarang. At my work we were experiencing performance hits with ng-repeat and this helped diagnose issues. It also helps visualize all the scopes present in your app. https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en – ryanlutgen Dec 03 '13 at 06:05
  • check this one http://danieltao.com/lazy.js/comparisons.htmle – ProllyGeek Dec 03 '13 at 07:16

1 Answers1

0

Here's a simple slowdowns detection technique for javascript. Concept is very easy: basically just compares the expected timestamp of a function to the actual function execution's timestamp.

currentTimestamp - expectedTimestamp = delay;

For example if you got a delay of 1000ms compared to the expected timestamp, user is may experiencing slowdowns

With this I believe you can achieve what you want. Actually you can even build a fully functioning profiler with this method, keeping track of what is executed in that period of time... but that only for dev purposes, since the profiler itself would consume resources (webworkers would help, though)

Note: that's not a reliable method and browsers may issue false positives. For example on Chrome if you blur a tab, JS' performance slows down and you may get delays of seconds even if they didn't actually happen.

So you have to do something like this:

window.addEventListener("focus", function(){ slowdownsChecker.enable(); });
window.addEventListener("blur",  function(){ slowdownsChecker.disable(); });

jsfiddle demo: http://jsfiddle.net/sAKyS/

here's the pseudo code just for to demostrate how it works

JS:

var expected = new Date().getTime() + 200;
var highestDelay = 0;
var delayDisplay = document.getElementById("delay");
var highestDelayDisplay = document.getElementById("hdelay");
function check(){
    var delay = new Date().getTime() - expected;
    delay = delay >= 0 ? delay : 0;
    if(delay > highestDelay) highestDelay = delay;
    delayDisplay.textContent = delay;
    highestDelayDisplay.textContent = highestDelay;
    expected = new Date().getTime() + 200;
}
setInterval(check, 200);



// ignore next code, it's just some heavy code for to demonstrate how it's working
var log = document.getElementById("log");
var button = document.getElementsByTagName("button")[0];
button.addEventListener("click", function(){
// prime numbers calculation
    var sieve = [], i, j, max = 100000;
    for (i = 2; i <= max; ++i) {
        if (!sieve[i]) {
            log.textContent += " - " + i;
            for (j = i << 1; j <= max; j += i) {
                sieve[j] = true;
            }
        }
    }
});

HTML:

<div>current delay in ms: <span id="delay"></span></div>
<div>highest registered delay in ms: <span id="hdelay"></span></div>
<button>Start random computation</button>
<div id="log"></div>