Javascript 当多个画布同时运行时，Chrome cpu使用率高

几天前，我在谷歌浏览器上遇到了一个问题。我喜欢像素艺术，我正在尝试使用html5创建一个巨大的动画地图

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

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

谢谢你的帮助

这是一张地图，仅供参考： 解决方案：

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

显然，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();
        }
    }
}

this.loadIsVisibleOptions=函数（）{
如果（此.stopAnimationWhenIsNotVisible）{
addEventListener（“滚动”，函数（事件）{CurrentJadsEngine.isVisible（document.getElementById（canvasID），CurrentJadsEngine）}）；
}
}
this.isVisible=函数（元素，obj）{
if（element.offsetWidth==0 | | element.offsetHeight==0）{
currentJadsEngine.stop（）；
}
否则{
var rects=element.getClientRects（）；
var结果=假；
var tempClientHeight=document.documentElement.clientHeight；
var tempClientWidth=document.documentElement.clientWidth；
for（var i=0，l=rects.length；iif（rects[i]。top+rects[i]。高度>0？rects[i]。top 0&&rects[i]。bottom 0？rects[i]。左0&&rects[i].right在firefox上的加载时间似乎很长，这很正常，有很多图像要加载。事实上，你应该警告我们，你的问题中有10分钟的加载时间。结果太棒了！不幸的是，Chrome Frenzy还不知道你的代码，但这可能会有帮助，感谢链接，信不信由你，我正在使用所有的ose提示，甚至更多。所有画布都以20帧/秒的速度运行。嗨，Peppermint，你能从你的问题中删除解决方案部分并将其添加到你的答案中吗？或者只是自我回答你的问题完成，很抱歉给你添麻烦。