Использование процессора продолжает расти;Есть ли способ удалить мои неиспользуемые объекты в JavaScript?

Question

Я делаю игру на HTML5 Canvas + JavaScript.Использование ЦП для этой вкладки увеличивается на пару процентов каждую секунду, пока не достигнет 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

Как я уже упоминал в своем комментарии, загрузка процессора != использование памяти.Инструменты разработчика Chrome позволяют легко профилировать ваше приложение, чтобы найти код, который потребляет все циклы ЦП.

Откройте свое приложение, откройте инструменты разработчика и перейдите на вкладку «Профили».Нажмите кнопку записи (черный круг).Он станет красным;Chrome теперь записывает использование процессора.Подождите несколько секунд и снова нажмите кнопку «Запись».Теперь вы увидите использование процессора по функциям.

В этом случае мы можем видеть, что draw_grid() потребило 92% процессорного времени - мы нашли нашего виновника!

Я внес некоторые изменения в функцию 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();
    }
}

Загрузка ЦП теперь никогда не превышает 5%.

Несколько замечаний:

• Я добавил beginPath() и closePath() и переместил stroke() в каждую итерацию цикла.
• Я изменил размер каждой строки с константы 500px, чтобы использовать соответствующую переменную.
• Вам нужно установить strokeStyle только один раз.Он остается прежним, если вы не измените его снова.
• Вы должны написать var в инициализаторе вашего цикла, чтобы ограничить область действия переменной (в данном случае i и j) локальной функцией.В противном случае вы создаете глобальную переменную, что по ряду причин является плохой идеей.

Answer 2

Вам может понадобиться удалить все свойства / методы этого объекта в дополнение к удалению указателя (переменной), но утечка памяти всегда была проблемой, которая преследует JavaScript.

Вы добавили setTimeout('',0)где-нибудь, чтобы процессор мог делать другие вещи.