多个画布同时运行时 Chrome 高 CPU 使用率

Question

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

在我开始同时使用超过 5 或 6 个画布之前，一切都很好。 在 Firefox 和 Internet Explorer 中，地图没有问题，但在 Chrome 中，CPU 达到 70%，有时甚至更高。

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

感谢您的帮助。

地图仅供参考： http://pixelslivewallpaper.github.io/jadsdsengine/Zelda.htm

Answer 1

解决方案：

解决此问题的简单方法是停止用户可见区域之外的所有画布的动画并稍后恢复它们。计算这个区域的方法是捕获滚动位置。

显然，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?