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

Question

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

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

我们可以将错误记录到我们的服务器，然后收到通知。我怎样才能为性能做同样的事情。

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

谢谢

编辑:我应该澄清一下。当我知道有一些内存泄漏时，我不会问如何找到内存泄漏。我使用过 chrome 开发工具。我想知道如何在真实客户端上运行的 js 中监视我的应用程序的内存使用情况。塔

Answer 1

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

currentTimestamp - expectedTimestamp = delay;

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

有了这个我相信你可以实现你想要的。实际上，您甚至可以使用此方法构建一个功能齐全的分析器，跟踪在那段时间执行的操作......但这仅用于开发目的，因为分析器本身会消耗资源(尽管网络 worker 会有所帮助)

注意:这不是可靠的方法，浏览器可能会发出误报。例如，在 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>