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正在自动完成这项工作，但在谷歌浏览器中你需要手动完成。

以下是代码：

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?

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

1 个答案: