销毁未添加到DOM中的HTMLElement

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。

对不起，这是一个非常基本的问题：)欢迎提出改进建议。

Answer 1

回收同一对象？

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

无法从内存中主动删除对象。当该对象没有引用时，GC将收集它。

因此您可以通过设置canvas = null;取消引用对象。

您还可以使用静态类对象来跟踪画布，并在完成后将其删除。从技术上讲，它与取消引用是相同的。 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();

在所有情况下，GC都会在下一个周期从内存中收集它。