Question

我们已经写了一个angular.js webapp一年了，我们注意到一些内存泄漏已经陷入困境。大多数都很容易修复，但在开发过程中很难发现。

我们如何监控应用的内存使用情况和性能，以便在我们的用户执行缓慢时收到提醒。

我们可以将错误记录到我们的服务器，然后收到通知。我怎样才能表现出同样的表现。

我想检查window.performance.memory.usedJSHeapSize之类的内容，如果太大，请记录警告。但看起来必须在Chrome中启用-enable-memory-info。

由于

编辑：我应该澄清一下。我不知道当我知道有一些内存泄漏时我怎么能找到内存泄漏。我使用过chrome dev工具。我想知道如何在真实客户端上运行的js中监视我的应用程序的内存使用情况。 TA

Answer 1

这是一个简单的javascript减速检测技术。概念非常简单：基本上只是将函数的预期时间戳与实际函数执行的时间戳进行比较。

currentTimestamp - expectedTimestamp = delay;

例如，如果与预期时间戳相比延迟1000毫秒，则用户可能会遇到速度下降

有了这个，我相信你可以实现你想要的。实际上你甚至可以使用这种方法构建一个功能齐全的探查器，跟踪在那段时间内执行的内容......但这仅用于开发目的，因为探查器本身会消耗资源（但是webworkers会帮助）

注意：这不是一种可靠的方法，浏览器可能会发出误报。例如，如果你在Chrome上模糊标签，那么JS的性能就会降低，即使它们实际上没有发生，你也可能会延迟几秒钟。

所以你必须做这样的事情：

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

jsfiddle演示：http://jsfiddle.net/sAKyS/

这里的伪代码只是为了说明它是如何工作的

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>

如何监控js webapp的性能/内存？

1 个答案: