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

Memory leak from creation of MutationObserver in Custom Element constructor?

本文关键字：内存 泄漏 MutationObserver 创建 自定义 元素 构造函数      更新时间：2023-09-26

我有一个自定义元素类，在它的createdCallback中创建一个突变观察者。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) {
        // ...
    }
}

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

无论如何，你总是可以在detachedCallback()方法中调用observer.disconnect()。在这种情况下，使用this.observer而不是const observer来保持引用

相关文章：