javascript - 当多个 Canvas 同时运行时，Chrome CPU 使用率过高

Question

我几天前在使用 Google Chrome 时遇到了问题。我喜欢像素艺术，我正在尝试使用 html5 创建一个巨大的动画 map 。

一切正常，直到我开始同时使用超过 5 或 6 个 Canvas 。 在 Firefox 和 Internet Explorer 中 map 没有问题，但在 Chrome 中 CPU 达到 70%，有时甚至更多。

关于如何在 Chrome 中解决此类问题，您能给我一些好的提示吗？ 我一直在互联网上搜索有关提高 Chrome 性能的信息，但没有任何帮助。

感谢您的帮助。

仅供引用，这是 map : http://pixelslivewallpaper.github.io/jadsdsengine/Zelda.htm

Answer 1

解决方法:

解决此问题的简单方法是停止用户可见区域外所有 Canvas 的动画，稍后再恢复。计算该区域的方法是捕获滚动位置。

显然，Firefox 和 Internet Explorer 会自动完成这项工作，但在 Google Chrome 中您需要手动完成。

代码如下:

this.loadIsVisibleOptions = function () {
    if (this.stopAnimationWhenIsNotVisible) {
        window.addEventListener("scroll", function (event) { currentJadsdsEngine.isVisible(document.getElementById(canvasID), currentJadsdsEngine) });
    }
}

this.isVisible = function (element, obj) {
    if (element.offsetWidth === 0 || element.offsetHeight === 0) {
        currentJadsdsEngine.stop();
    }
    else {
        var rects = element.getClientRects();
        var result = false;
        var tempClientHeight = document.documentElement.clientHeight;
        var tempClientWidth = document.documentElement.clientWidth;

        for (var i = 0, l = rects.length; i < l; i++) {
            if (rects[i].top + rects[i].height > 0 ? rects[i].top <= tempClientHeight : (rects[i].bottom > 0 && rects[i].bottom <= tempClientHeight) == true) {
                if (rects[i].left + rects[i].width > 0 ? rects[i].left <= tempClientWidth : (rects[i].right > 0 && rects[i].right <= tempClientWidth) == true) {
                    result = true;
                    break;
                }
            }
        }

        if (result) {
            currentJadsdsEngine.resume();
        }
        else {
            currentJadsdsEngine.stop();
        }
    }
}

灵感: How do I check if an element is really visible with JavaScript?