Уничтожить созданный HTMLElement, который не был добавлен в DOM

Question

В настоящее время я работаю над игрой с использованием pixi. js. Я реализовал вспомогательные функции, например, для переноса строк или измерения длины текста самой длинной строки для использования на HTMLCanvasElement. Вот пример getLongestWidth:

static getLongestWidth(lines: string[]): number {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const longestLine = lines.reduce((a, b) => a.length > b.length ? a : b, '');
  return context.measureText(longestLine).width;
}

Я хочу, чтобы основные функции холста оставались независимыми (context.measureText в этом примере), так что вы даже можете использовать их без предоставления CanvasRenderingContext2D каждый раз ,

Поскольку производительность - вещь, я задаюсь вопросом, должен ли я / как уничтожить созданный холст. Я предполагаю, что после завершения функции, по крайней мере, ссылка, указывающая на нее, будет уничтожена, а объекты без ссылки будут удалены? Но часть createElement меня отталкивает. Я попробовал document.removeChild(canvas), что, конечно, не помогло, поскольку оно никогда активно не добавлялось в DOM, но я не уверен, что происходит в фоновом режиме. Не удалось найти ничего в документах или в Google, и я боюсь, что тысячи сирот HTMLCanvasElements плавают в фоновом режиме.

Извините, если это супер-базовый c вопрос :) Предложения по улучшению приветствуются.

Answer 1

Нет способа активно удалить объект из памяти. G C будет собирать его, когда для этого объекта не осталось ссылок.

Таким образом, вы можете разыменовать объект, установив canvas = null;.

Вы также можете использовать объект класса stati c, чтобы отслеживать холст и удалять его, когда закончите. Технически это то же самое, что разыменование. ref

class Test {
    private static test: any = 'test';
    public static testFunc() {
        console.log(`deleting: ${Test.test}`);
        delete Test.test;
        console.log(`done deleting: ${Test.test}`);
    }
}

Test.testFunc();

Во всех случаях G C будет собирать его из памяти в следующем цикле.

Answer 2

Утилизировать тот же объект?

class test {
    static getLongestWidth(lines) {
      const context = this.ctx;
      const longestLine = lines.slice().sort((a,b)=>a.length - b.length)[0];
      return context.measureText(longestLine).width;
    }
}
test.ctx = document.createElement("canvas").getContext("2d");
test.getLongestWidth(["aa","b"]); //5.5615234375