Javascript CreateJS过滤器性能

我一直在使用CreateJS开发一个游戏，并注意到当对图像应用任何过滤器时，性能会显著下降。我创建了这个小测试用例来展示问题：

var isInitialized = false;

function start(preload) {

    egg = preload.getResult("Kiausinis");

    center = new Vector(stage.canvas.width/2,stage.canvas.height/2);

    eggImg = new createjs.Bitmap(egg);
    stage.addChild(eggImg);
    eggImg.x = center.x-300;
    eggImg.y = center.y;
    centerOrigin(eggImg);
    eggImg.on("click",applyFilters);

    eggImg2 = new createjs.Bitmap(egg);
    stage.addChild(eggImg2);
    eggImg2.x = center.x;
    eggImg2.y = center.y;
    centerOrigin(eggImg2);

    eggImg3 = new createjs.Bitmap(egg);
    stage.addChild(eggImg3);
    eggImg3.x = center.x+300;
    eggImg3.y = center.y;
    centerOrigin(eggImg3);

    fpsLabel = new createjs.Text("fps:","150px Verdana","black");
    fpsLabel.lineWidth = 200;
    fpsLabel.textAlign = "center";
    fpsLabel.x = center.x;
    fpsLabel.y = center.y;
    stage.addChild(fpsLabel);

    isInitialized = true;

}

function update(){

    if(!isInitialized) return;

    fpsLabel.text= "fps: " + Math.round(createjs.Ticker.getMeasuredFPS(3));
    stage.update();

}

function centerOrigin(img){

    img.regX = img.getBounds().width/2;
    img.regY = img.getBounds().height/2;

}

function applyFilters(){

    changeImgColor(eggImg,1,0.8,0.7,1);
    changeImgColor(eggImg2,1,0.8,0.7,1);
    changeImgColor(eggImg3,1,0.8,0.7,1);

}

function changeImgColor(img, r, g, b, a){

    img.filters = [

        new createjs.ColorFilter(r, g, b, a)

    ];

    img.cache(0,0,img.getBounds().width,img.getBounds().height);
    img.updateCache();

}

代码显示一个基本设置。将三个图像添加到stage，单击其中一个图像时，对所有图像应用颜色过滤器。在应用过滤器之前，我在桌面和手机上的速度大约为200fps。在应用过滤器后，它会在手机上立即下降到5fps左右。即使帧速率下降到5fps，计数器仍然显示200fps，您可以看出帧速率下降，因为fps计数器现在刷新速度非常慢

可以在此处看到现场演示：

这里发生了什么？我做错什么了吗？还有其他人遇到过类似的问题吗

---

谢谢。

ApplyFilter是做什么的？如果是一些繁重的图像处理，你可以预期会有很大的影响。你可以看到代码，它应用过滤器并缓存图像。这是针对单个帧执行的，因此据我所知，它不会对性能产生太大影响。分析时，您可以看到筛选器调用花费了大量时间，并且执行了多个getImageData调用。从Chrome上查看此屏幕截图您应该能够使用将Chrome连接到移动设备chrome://inspect 然后做一些分析，看看到底是什么花了这么长的时间重新绘制这个分析工具对我来说就像一个黑魔法。你能让我更深入地了解正在发生的事情吗？此外，我似乎仍然不理解过滤器调用的问题。它只在单击后调用一次，那么它对重画每个帧有什么重要性呢？