销毁创建的未添加到 DOM 的 HTMLElement

Question

Currently I'm working on a game using pixi.js. I implemented utility functions for eg wrapping lines or measure the text length of the longest line to use on a HTMLCanvasElement . Here's an example of the 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;
}

I want to keep the 'core' canvas functions independet ( context.measureText in this example) so you can even use them without providing a CanvasRenderingContext2D everytime.

Since performance is a thing I wonder whether/how I should destroy the created canvas. I'm guessing that after the function has finished at least the reference pointing to it will be destroyed and objects without reference will be garbage collected? But the createElement part throws me off. I tried document.removeChild(canvas) which of course fails since it was never actively added to the DOM but I'm not sure what's happening in the background. Couldn't find anything in the docs or with Google and I'm kinda afraid of thousands orphan HTMLCanvasElements floating around in the background.

I'm sorry if this a super basic question:) Suggestions for improvements are welcome.

Answer 1

Recycle the same object?

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

Answer 2

There is no way to actively remove an object from memory. GC will collect it when there are no references left for that object.

So you can dereference the object by setting, canvas = null; .

You can also use a static class object to keep track of the canvas and delete it when done. It's technically the same thing as dereferencing. 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();

In all cases, the GC will collect it from memory in the next cycle.