时间戳

首页 > 解决方案 > 销毁创建的未添加到 DOM 的 HTMLElement

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

问题描述

目前我正在使用 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 中，但我不确定后台发生了什么。在文档或谷歌中找不到任何东西，我有点害怕成千上万的孤HTMLCanvasElements​​儿在后台漂浮。

如果这是一个超级基本的问题，我很抱歉:) 欢迎提出改进建议。

标签： javascripthtmltypescriptdom

解决方案

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

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

您还可以使用静态类对象来跟踪画布并在完成后将其删除。从技术上讲，这与取消引用相同。参考

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 都会在下一个周期从内存中收集它。

推荐阅读