CPU使用量持续增长;有没有一种方法可以在JavaScript中删除我未使用的对象

CPU use keeps growing; is there a way to delete my unused objects in JavaScript?

本文关键字：JavaScript 删除 对象 未使用 方法 有没有 持续增长 使用量 一种 CPU      更新时间：2023-09-26

我正在用HTML5的Canvas+JavaScript制作一个游戏。我在选项卡上的CPU使用量每秒都会增长几个百分点，直到达到50%（全部为一个核心）。我成功地从对象数组中删除了我的对象，但对象本身似乎仍然存在。我在一些地方尝试过"delete obj"answers"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);
    }
}

正如我在评论中提到的，CPU使用!=内存使用。使用Chrome的开发工具，可以很容易地对应用程序进行评测，以定位消耗所有CPU周期的代码。

打开您的应用程序，打开开发工具，然后转到Profiles选项卡。单击Record按钮（黑圈）。它会变成红色；Chrome现在正在记录CPU使用情况。让它记录几秒钟，然后再次单击"记录"按钮。现在，您将看到按功能划分的CPU使用情况。

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

我对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()移动到每个循环迭代中
  • 我将每行的大小从常量500px更改为使用适当的变量
  • 您只需要设置strokeStyle一次。除非您再次更改，否则它将保持不变
  • 您应该在循环的初始值设定项中写入var，以将变量（在本例中为i和j）的作用域限制为本地函数。否则，您将创建一个全局变量，这是一个坏主意，原因多种多样

除了删除指针（变量）外，您可能还需要删除该对象的所有属性/方法，但内存泄漏一直是困扰JavaScript的问题。

您是否将setTimeout('',0)放入任何位置，以允许处理器执行其他操作。

相关文章：