具有位图区域采样效果（JavaScript）的Chrome性能问题

我正在使用engine Phaser编写一个HTML5游戏，在这个游戏中，我实现了基本上是真实的背景，这些背景对游戏对象的运动做出响应。我正在处理的第一个问题是水涟漪效应，它在bitmapData对象上使用区域采样。我原以为我的代码有性能问题，但事实证明Firefox运行起来就像做梦一样。Chrome一开始运行速度稍慢，当我的游戏对象离屏幕顶部或底部太近时，运行速度会降至10 FPS以下。（我不明白为什么这会产生不同。）

这表明Chrome的图像处理性能很差，并建议将大型图像数据分解成更小的片段。我不知道这在我的情况下是否可行，因为这不仅仅是屏幕上显示的图像，而是基于相邻像素的效果，刷新每个帧。即使有可能，我认为Chrome最终也需要做同样多的工作才能让四个单独的位图像一个位图一样相互作用

我已经在Chrome上做了几个小时的性能测试，问题是它肯定是被从源imageData中读取像素并将其写入目标imageData中的另一个位置（下面的

ws.displace（x，y）

方法）的方法所吸引

功能水景（画布）{
var ws=新对象（）；
ws.dampFactor=16；
ws.magFactor=150；
ws.dispFactor=0.5；
ws.lumFactor=1；
ws.width=canvas.width；
ws.height=canvas.height；
//初始化高度数据缓存
ws.pMaps=[]；
var map1=新数组（ws.width+2）；
var map2=新数组（ws.width+2）；
对于（x=0；xfunction waterStage(canvas) {

    var ws = new Object();
    ws.dampFactor = 16;
    ws.magFactor = 150;
    ws.dispFactor = 0.5;
    ws.lumFactor = 1;

    ws.width = canvas.width;
    ws.height = canvas.height;

    // Initialize height data caches
    ws.pMaps = [];
    var map1 = new Array(ws.width+2);
    var map2 = new Array(ws.width+2);

    for (x=0; x < map1.length; x++) {
        map1[x] = new Array(ws.height+2);
        map2[x] = new Array(ws.height+2);
    }

    for (x=0; x < map1.length; x++) {
        for (y=0; y < map1[x].length; y++) {
            map1[x][y] = 0;
            map2[x][y] = 0;
        }
    }

    ws.pMaps.push(map1, map2);

    ws.stageInit = function(canvas) {
        canvas.fill(100,100,100);
        canvas.ctx.strokeStyle = "#000000";
        canvas.ctx.lineWidth = 2;
        canvas.ctx.moveTo(0,0);
        for (y=0; y < ws.height; y+=10) {
            canvas.ctx.beginPath();
            canvas.ctx.moveTo(0,y);
            canvas.ctx.lineTo(ws.width,y);
            canvas.ctx.closePath();
            canvas.ctx.stroke();
        }

        ws.sourceData = canvas.ctx.getImageData(0, 0, ws.width, ws.height);
        ws.targetData = canvas.ctx.getImageData(0, 0, ws.width, ws.height);
    }

    ws.setWave = function(pnt) {
        ws.pMaps[0][pnt.x-1][pnt.y-1] = ws.magFactor//*pnt.magnitude;
    }

    ws.resolveWaves = function(x,y) {
        // Calculate the net result of the wave heights
        ws.pMaps[1][x][y] = ((ws.pMaps[0][x-1][y]+ws.pMaps[0][x+1][y]+ws.pMaps[0][x][y-1]+ws.pMaps[0][x][y+1]) / 2)
                            -ws.pMaps[1][x][y];
        ws.pMaps[1][x][y] -= (ws.pMaps[1][x][y]/ws.dampFactor);
    }

    ws.displace = function(x,y) {

        var displace = Math.floor(ws.pMaps[1][x][y]*ws.dispFactor);
        var xCorrect = x-1, yCorrect = y-1;
        var targetIndex = (xCorrect + yCorrect * ws.width)*4;

        if (displace == 0) {
            ws.targetData.data[targetIndex] = ws.sourceData.data[targetIndex];
            ws.targetData.data[targetIndex+1] = ws.sourceData.data[targetIndex+1];
            ws.targetData.data[targetIndex+2] = ws.sourceData.data[targetIndex+2];
        }

        else {

            if (displace < 0) {
                displace += 1;
            }

            var sourceX = displace+xCorrect;
            var sourceY = displace+yCorrect;
            var sourceIndex = (sourceX + sourceY * ws.width)*4;

            //var lum = ws.pMaps[1][x][y]*ws.lumFactor;

            ws.targetData.data[targetIndex] = ws.sourceData.data[sourceIndex];//+lum;
            ws.targetData.data[targetIndex+1] = ws.sourceData.data[sourceIndex+1];//+lum;
            ws.targetData.data[targetIndex+2] = ws.sourceData.data[sourceIndex+2];//+lum;

        }
    }

    ws.stageRefresh = function(moves, canvas) {
        canvas.clear();

        for (j=0; j < moves.length; j++) {
            ws.setWave(moves[j]);
        }

        for (x=1; x <= ws.width; x++) {
            if (ws.pMaps[1][x][0] != 0 || ws.pMaps[0][x][0] != 0) {
                alert("TOP ROW ANOMALY");
            }
            for (y=1; y <= ws.height; y++) {
                ws.resolveWaves(x,y);
                ws.displace(x,y);
            }
        }

        ws.pMaps.sort(function(a,b) { return 1 });
        //ws.pMaps[0] = ws.pMaps[1];
        //ws.pMaps[1] = temp;

        canvas.ctx.putImageData(ws.targetData, 0, 0);
    }

    return ws;
}