CPU使用率持续增长;有没有办法在JavaScript中删除我未使用的对象？

2019年8月3日 193次阅读

我正在使用
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);
    }
}

最佳答案 正如我在评论中提到的,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()移动到每个循环迭代中.
>我将每行的大小从常量500px更改为使用适当的变量.
>您只需要设置一次strokeStyle.除非您再次更改它,否则它将保持不变.
>您应该在循环的初始化程序中编写var,以将变量(在本例中为i和j)范围限制为本地函数.否则,你正在创建一个全局变量,出于各种原因这是一个坏主意.

点赞