Mutation Event から Mutation Observers へ

“Detect DOM changes with Mutation Observers” で紹介されているように、DOM4 では Mutation Observers という新しいインタフェイス群が定義されました。これらを用いると、DOM2 Events で定義された Mutation Event を置きかえることができます。

Mutation Event は数々の問題点を抱えていることが明らかになっています（策定中の DOM3 Events では該当箇所に警告文が記述されているほどです）。例えばパフォーマンスに関わる問題があります。Mutation Event では子ノードだけでなく、すべての子孫ノードからイベントが発送されます。よって、子孫ノード数が多く、ルートノードに近いノードでは、場合にもよりますが膨大な数のイベントを拾ってしまいがちになります。それらをいちいちイベントリスナ内でチェックする必要があるため、その処理だけで時間がかかりがちです。また、すべて同期（Sync）イベントでもあります。複雑な Web アプリケーションではノード数も多くなりがちなので、よりパフォーマンスに与える影響が大きくなります。

Mutation Observers は、こうした Mutation Event の問題点を解決、もしくは軽減するために定義されたといっても過言ではないでしょう。Mutation Observers は様々なオプションを与えて「どの範囲の何を対象にするか」を決定することができます。

例えば、先程問題点として挙げたすべての子孫ノードからイベントが発送されうる問題も、オプションを { childList : true } とすれば対象を子ノードに限定することが可能であるため、簡単に回避することができます（子孫ノードをすべて対象にしたいなら { childList : true, subtree : true } とする）。

本エントリの執筆時点では、WebKit のみベンダー接頭辞つきで実装されています（が、完全ではありません）。Gecko (Mozilla) はベンダー接頭辞つきで実装している途中です。Presto (Opera) は 12.00 Build 1272 時点では未サポートです。Trident (IE) は IE10 PP (10.0.8103.0) 時点では未サポートです。