Javascript中的执行时间不一致

注意：如果可以的话，我会检查Mike Brandt的答案，因为他发现了我在死/活像素比上的愚蠢错误。但肯得到了普遍好评。

我正试图用Canvas元素中的Conway生活游戏调试一些性能问题，但我遇到了一些非常奇怪的性能问题。

我得到了大约4-12 FPS，绘图功能的基准测试表明，整体性能应该能够达到60 FPS。

下面是Canvas绘图代码。updateBgCanvas被RequestAnimationFrame以大约30FPS的速度调用。整个程序正在Chrome 28.0.1500.70中运行并进行性能测试。

（我为混乱的代码道歉，我一直在把代码分成更小的子单元，以便在性能分析器中获得更大的粒度，而不太考虑良好的编码技术）

不出所料，Canvas绘图函数（fillDead和fillLive是最大的CPU消耗量，但这里有点奇怪。fillLive消耗了5-6%的CPU时间（大约是我从我所做的fillRect基准测试中所期望的），而fillDead消耗了高达36-38%的CPU时间。除了针对1或0的条件测试外，这些函数都是相同的。

我已经尝试过在父函数中交换调用顺序，以及用于fill和fillDead的颜色，调用时间始终是几乎相同的fillLive的6-7倍。我完全不知道为什么会这样。

有什么建议吗？

  window.bgVars = {
     "about": "The background is the famous Conway Game of Life",
     "_Canvas": {},
     "_Ctx": {},
     "xBlockSize": 5,
     "yBlockSize": 5,
     "xBlocks": 0,
     "yBlocks": 0,
     "bornVals": [3],
     "stayAliveVals": [2, 3],
     "cGrid": [],
     "cGrid2": [],
     "cL": 0,
     "initBgVars" : function(iCanvas, iCtx){
        console.log(this.xBlockSize);
        this._Canvas = iCanvas;
        this._Ctx = iCtx;
        this.cGrid = [];
        this.cGrid2 = [];
        this.xBlocks = Math.round(myCanvas.width/this.xBlockSize) + 1;
        this.yBlocks = Math.round(myCanvas.height/this.yBlockSize) + 1;
        for(var rep=0;rep<(this.xBlocks * this.yBlocks);rep++){
           this.cGrid.push(Math.round(Math.random()*0.8));
        }
        this.cGrid2.length = this.cGrid.length;
     },
     "cirInd": function(index){
        //returns modulus, array-wrapping value to implement circular array
        if(index<0){index+=this.cGrid.length;}
        return index%this.cGrid.length;
     },
     "calcNeighbors": function(rep){
        var foo = this.xBlocks;
        var neighbors = this.cGrid[this.cirInd(rep-foo-1)] + this.cGrid[this.cirInd(rep-foo)] + this.cGrid[this.cirInd(rep-foo+1)] + this.cGrid[this.cirInd(rep-1)] + this.cGrid[this.cirInd(rep+1)] + this.cGrid[this.cirInd(rep+foo-1)] + this.cGrid[this.cirInd(rep+foo)] + this.cGrid[this.cirInd(rep+foo+1)];
        return neighbors;
     },
     "refreshGrid": function(){
        for(var rep=0;rep<this.cGrid.length;rep++){
           if(Math.random()<0.0002){this.cGrid2[rep] = 1;}
           this.cGrid[rep] = this.cGrid2[rep];
        }
     },
     "lifeRules": function(rep, neighbors){
           if(this.cGrid[rep] == 1){  //stay alive rules
              for(var rep2=0;rep2<this.stayAliveVals.length;rep2++){
                 if(neighbors==this.stayAliveVals[rep2]){this.cGrid2[rep] = 1;}
              }
           }
           if(this.cGrid[rep] == 0){  //'born' rules
              for(var rep2=0;rep2<this.bornVals.length;rep2++){
                 if(neighbors==this.bornVals[rep2]){this.cGrid2[rep] = 1;}
              }
           }          
     },
     "fillDead": function(){
        for(var rep=0;rep<this.cGrid.length;rep++){
           if(this.cGrid[rep] == 0){
              this._Ctx.fillRect((rep%this.xBlocks)*this.xBlockSize, Math.floor(rep/this.xBlocks)*this.yBlockSize, this.xBlockSize, this.yBlockSize);
           }
        }          
     },
     "fillLive": function(){
        for(var rep=0;rep<this.cGrid.length;rep++){
           if(this.cGrid[rep] == 1){
              this._Ctx.fillRect((rep%this.xBlocks)*this.xBlockSize, Math.floor(rep/this.xBlocks)*this.yBlockSize, this.xBlockSize, this.yBlockSize);
           }
        }          
     },
     "updateBgCanvas": function(){
        //fill live squares
        this._Ctx.fillStyle = 'rgb(130, 0, 0)';
        this.fillLive();
        //fill dead squares
        this._Ctx.fillStyle = 'rgb(100, 0, 0)';
        this.fillDead();
        //calculate next generation to buffer
        for(var rep=0;rep<this.cGrid.length;rep++){
           //add up the live squares in the 8 neighbor blocks
           var neighbors = this.calcNeighbors(rep);
           this.cGrid2[rep] = 0;
           //implement GoL ruleset
           this.lifeRules(rep, neighbors);
        }
        //seed with random noise to keep dynamic and copy to display buffer
        this.refreshGrid();
     }
  }

对Ken建议的数学函数进行编辑，将父对象变量复制到本地变量，在数学函数中获得约16%的性能增益，总体上约为4%：

     "cirInd": function(index, mod){
        //returns modulus, array-wrapping value to implement circular array
        if(index<0){index+=mod;}
        return index%mod;
     },
     "calcNeighbors": function(rep){
        var foo = this.xBlocks;
        var grid = this.cGrid;
        var mod = grid.length;
        var neighbors = grid[this.cirInd(rep-foo-1, mod)] + grid[this.cirInd(rep-foo, mod)] + grid[this.cirInd(rep-foo+1, mod)] + grid[this.cirInd(rep-1, mod)] + grid[this.cirInd(rep+1, mod)] + grid[this.cirInd(rep+foo-1, mod)] + grid[this.cirInd(rep+foo, mod)] + grid[this.cirInd(rep+foo+1, mod)];
        return neighbors;
     },