window.observeDom = (element, callback, config) => {
let conf = config || { childList: true };
const observer = new MutationObserver(callback.bind(element));
observer.observe(element, conf);
return observer;
};
Altho私は、元のAPIを介してこの機能10倍を好むが、私はまだ、実際の測定可能なパフォーマンスの差があるかどうかを疑問に思いますインスタンスを再利用して、異なるDOMノードを観察します。説明できますか？
私はあなたの要点は分かりませんが、DOM内の複数の異なるスレッドを観察するために単一のコールバックを使用する場合、このアーキテクチャはおそらくこのようなスレッドごとに別のMutationObserverインスタンスを持つよりも便利です。
共通パターンを使用してページ上のすべての要素を観察することを検討してください。したがって、これらの要素のいずれかに変更を加えるための単一の機能が必要です。 <body>要素を観察し、実際に関心のある要素<a>に何らかの突然変異が影響しているかどうかを判断するためにコールバックに複雑さを移すかもしれませんが、その決定論理はブラウザでネイティブに実行されるのではなく、Javascriptで実装されます。私はこれがパフォーマンスに影響を与えていると思います。
代わりに、それぞれ<a>という要素が表示されることがあります。あなたのラッパーは、文書内にある<a>要素と同じくらい多くのオブザーバーインスタンスを作成しています。それは記憶に影響します。また、ブラウザは多くのオブザーバに対して反復処理を実行し、観察者の単一項目のオブザーバ・ノードのリストを繰り返し処理する必要があります。これはパフォーマンスにわずかな影響があります。さらに、すべての観測でノードにコールバックをバインドすることで、実際に文書内にある要素の数が<a>であるのと同じ数のコールバックインスタンスが作成されます。それだけでなく、メモリを無駄にしています。
この方法で1000 <a>の要素を観察すると、ブラウザで管理される1000のオブザーバインスタンスがあり、それぞれが異なるバインドされた実際に機能するインスタンスのうちの1つにバインドされます。各オブザーバは、観察するノードの1項目のリストを制御しています。
等価に処理されるレコードの束を観察するために登録される非常に同じコールバックを使用することは、それほど複雑ではありません。期待される突然変異のみを処理するために、唯一のコールバックを減らすことができます。どんな要素が変異しているのか、それがあなたのケースで面白いかどうかをDOMが調べる必要はありません（DOMへのアクセスは常にパフォーマンス上のボトルネックとみなされます）。
アドバイスされたAPIを使用して同じセットの1000 <a>要素を観察するには、1つのオブザーバインスタンス、1つの関数インスタンス、および観察されるノード上の1000個の参照を含む単一のリストが必要です。したがって、この場合、メモリ内で1000回管理されるものは1つだけであり、それは実際のオブザーバで観察されるノードの関連付けです。
結論として、APIは、Javascriptで時間とメモリを浪費することなく、ドキュメント上に広がっている多くのノードの観察に適しています。私はこれがあなたの非常に特定のユースケースで十分であるにもかかわらず、シンプルなAPIを持つよりも有益だと考えています。