javascript - CPU 使用率不断增长；有没有办法在 JavaScript 中删除我未使用的对象？

Question

我正在使用 HTML5 的 Canvas + JavaScript 制作游戏。我对选项卡的 CPU 使用每秒增长几个百分点，直到达到 50%(所有一个内核)。我成功地从对象数组中删除了我的对象，但对象本身似乎仍然存在。我在几个地方尝试过“删除 obj”和“obj = null”，但没有成功。

有什么想法吗？

var falling_blocks = setInterval(add_falling_block, 1000);

...

function add_falling_block(){
    b = new Object();
    b.x = (randFromTo(0,sq) * scale) - boff;
    b.y = -scale + boff;
    b.color = "#f00";
    b.moving = true;
    b.number = f.length;
    f.push(b);
}

function draw_falling_blocks(){
    var db = new Array()
    for(i = 0; i < f.length; i++){
        var ba = f[i];
        if(ba.y < (bottom + scale)){
            ba.y += scale;
            draw_block(ba.x,ba.y,"#f00");
        }
        else if(ba.y = (bottom + scale)){
            db.push(i);
            console.log(f.length);
        }
    }
    for(i = 0; i < db.length; i++){
        f.splice(db[i],1);
    }
}

Answer 1

正如我在评论中提到的，CPU 使用率 != 内存使用率。使用 Chrome 的开发人员工具，可以轻松地分析您的应用程序，以便找到消耗所有 CPU 周期的代码。

打开您的应用，打开开发工具，然后转到“配置文件”选项卡。单击录制按钮(黑色圆圈)。它会变成红色； Chrome 现在正在记录 CPU 使用率。让它录制几秒钟，然后再次单击“录制”按钮。您现在将按功能查看 CPU 使用情况。

在这种情况下，我们可以看到 draw_grid() 消耗了 92% 的 CPU 时间——我们找到了罪魁祸首!

我made some changes到 draw_grid 函数:

function draw_grid(){
    c.strokeStyle = '#333';
    for (var i = poff; i < w; i += scale) {
      c.beginPath();
      c.moveTo(0, i);
      c.lineTo(w, i);
      c.closePath();
      c.stroke();
    }
    for (var j = poff; j < h; j += scale) {
      c.beginPath();
      c.moveTo(j, 0);
      c.lineTo(j, h);
      c.closePath();
      c.stroke();
    }
}

CPU 使用率现在从未超过 5%。

一些注意事项:

• 我添加了 beginPath() 和 closePath() 并将 stroke() 移动到每个循环迭代中。
• 我将每行的大小从恒定的 500 像素更改为使用适当的变量。
• 您只需设置一次strokeStyle。除非您再次更改它，否则它会保持不变。
• 您应该在循环的初始值设定项中编写 var 以将变量(在本例中为 i 和 j)范围限制在本地函数中.否则，您将创建一个全局变量，出于各种原因，这不是一个好主意。