javascript - 在自定义元素构造函数中创建 MutationObserver 导致内存泄漏？

Question

我有一个自定义元素类，它在其 createCallback 中创建一个突变观察者。任何时候都不会调用observer.disconnect()。这会导致内存泄漏吗？如果是这样，您建议如何处理？

这是一个基本示例:

class SomeElement extends HTMLElement {
    createdCallback() {
        // Observe nodes in the future.
        const observer = new MutationObserver(changes => {
            for (let change of changes) {
                if (change.type != 'childList') continue

                for (let node of change.addedNodes)
                    this.childConnectedCallback(node)

                for (let node of change.removedNodes)
                    this.childDisconnectedCallback(node)
            }
        })
        observer.observe(this, { childList: true })
    }

    childConnectedCallback(node) {
        // ...
    }

    childDisconnectedCallback(node) {
        // ...
    }
}

Answer 1

如果垃圾收集器设计良好，它就不应该出现内存泄漏。当自定义元素本身被删除时，突变观察器将被释放。

无论如何，您始终可以在 detachedCallback() 方法中调用 observer.disconnect() 。在这种情况下，使用 this.observer 而不是 constobserver 来保留引用。