Ankündigung der Einstellung und geplanten Entfernung von Mutationsereignissen und Informationen dazu, wie Sie Ihren Code vor der Entfernung im Juli 2024 migrieren können

Mason Freed

Mutationsereignisse wurden für Chromium offiziell eingestellt. Wir planen, die Unterstützung ab Version 127 einzustellen, die am 23. Juli 2024 in der stabilen Version veröffentlicht wird. In diesem Beitrag wird erläutert, warum wir Mutationsereignisse entfernen, und es wird eine Migrationsstrategie beschrieben, die Sie vor dem Entfernen aus dem Browser umsetzen können.

Was sind Mutationsereignisse?

Mutationsereignisse ist der Name für die folgenden Ereignisse:

• DOMNodeInserted
• DOMNodeRemoved
• DOMSubtreeModified
• DOMCharacterDataModified
• DOMNodeInsertedIntoDocument
• DOMNodeRemovedFromDocument
• (Wird von keinem modernen Browser unterstützt) DOMAttrModified
• (Wird von keinem modernen Browser unterstützt) DOMAttributeNameChanged
• (wird von keinem modernen Browser unterstützt) DOMElementNameChanged

Diese Ereignisse sind ein sehr alter Bestandteil der Spezifikation für DOM-Ebene 2 und seit 2011 wurden sie eingestellt. Sie wurden durch die MutationObserver-Schnittstelle ersetzt, die seit 2013 in allen modernen Browsern unterstützt wird.

Verlauf von Mutationsereignissen

Mutationsereignisse klangen vor langer Zeit wie eine gute Idee, erwiesen sich aber als fataler Fehler:

• Sie sind zu ausschweifend und werden zu oft ausgelöst. Für jeden entfernten Knoten wird ein Ereignis ausgelöst.
• Sie sind langsam, da die Ereignisweitergabe und die vielen UA-Laufzeitoptimierungen verhindert werden.
• Sie führen häufig zu Abstürzen. Sie haben viele Abstürze und Sicherheitslücken in Browsern verursacht, da Ereignis-Listener das gesamte DOM unter einem laufenden DOM-Vorgang ändern können.

Aufgrund dieser Mängel wurden die Ereignisse 2011 aus der Spezifikation entfernt und 2012 wurde eine Ersatz-API (MutationObserver) entwickelt. Die neue API ist seit über 10 Jahren implementiert und funktionsfähig.

Warum Mutationsereignisse entfernt werden

Die Unterstützung für Mutationsereignisse variiert je nach Browser. Einige Ereignisse, z. B. DOMNodeInsertedIntoDocument und DOMNodeRemovedFromDocument, werden nicht in allen Browsern unterstützt. Bei den anderen Ereignissen variiert das jeweilige Verhalten, da keine vereinbarte Spezifikation vorhanden ist. Eine plausible Frage könnte jedoch lauten: Warum lassen sie nicht einfach dort, da sie schon fertig sind und sie nur die Seiten verlangsamen, auf denen sie verwendet werden? Die Antwort besteht aus zwei Teilen.

Erstens: Diese Ereignisse beeinträchtigen die Webplattform. Da sich das Web weiterentwickelt und neue APIs hinzukommen, müssen diese älteren APIs berücksichtigt werden. Manchmal verhindert schon die Notwendigkeit, diese Ereignisse zu unterstützen, die Entwicklung neuer APIs. Es gibt beispielsweise eine seit Lange Zeit, um zu verhindern, dass <iframe>-Elemente neu geladen werden, wenn sie innerhalb des DOMs verschoben werden. Aufgrund von Mutationsereignissen wurde diese Aufgabe jedoch als zu schwierig eingestuft und der Antrag wurde geschlossen.

Diese Ereignisse behindern weiterhin die Bemühungen, Browser schneller zu machen. Auch mit den Optimierungen von Browsern, die Leistungseinbußen auf Seiten ohne Mutationsereignisse vermeiden sollen, ist die Situation nicht perfekt. Für Mutation Event-Listener müssen noch an vielen Stellen Prüfungen durchgeführt werden. Der Code muss weiterhin sehr defensiv geschrieben werden, da diese Ereignisse das DOM auf überraschende Weise verändern können.

Da die offiziellen Ereignisse vor mehr als 10 Jahren offiziell eingestellt wurden und die Ersatz-API bereits seit über 10 Jahren verfügbar ist, ist es an der Zeit, die Mutationsereignisse ein für alle Mal aus den Browsern zu entfernen.

Vorgehensweise

Verwenden Sie stattdessen MutationObserver.

Die Dokumentation für MutationObserver befindet sich auf der MDN und ist ziemlich vollständig. Ob Ihre Codebasis ersetzt werden kann, hängt davon ab, wie diese Ereignisse verwendet werden. Hier ein Beispiel:

// Old mutation event usage:  
target.addEventListener('DOMNodeInserted',event => doSomething(event.target));

// Replacement mutation observer code:  
const observer = new MutationObserver(mutationList =>  
  mutationList.filter(m => m.type === 'childList').forEach(m => {  
    m.addedNodes.forEach(doSomething);  
  }));  
observer.observe(target,{childList: true, subtree: true});  

Der MutationObserver-Code ist zwar größer als der ursprüngliche DOMNodeInserted-Ereignislistener-Code, aber er kann alle Mutationen, die in einem gesamten Baum auftreten, in einem einzigen Aufruf verarbeiten, anstatt mehrere Aufrufe des Ereignishandlers zu erfordern.

Polyfill

Es gibt eine Polyfill, die versucht, vorhandenen Code weiterhin zu ermöglichen, während er von MutationObserver unterstützt wird. Die polyfill befindet sich auf GitHub oder als npm-Paket.

• https://github.com/mfreed7/mutation-events-polyfill#readme
• https://www.npmjs.com/package/mutation-events

Zeitplan und Informationen zum Testen der Einstellung

Mutationsereignisse werden für alle Nutzer* aus Chrome 127 entfernt und am 23. Juli 2024 in die stabile Version übertragen. Die Ereignisse werden schon früher aus den Canary-, Dev- und Beta-Kanälen entfernt, um Sie frühzeitig zu informieren.

• Wenn Sie mehr Zeit (über Juli 2024) benötigen, um Ihren Code zu migrieren, können Sie einen Test zur Einstellung nutzen. Dadurch werden die Ereignisse auf bestimmten Websites vorübergehend wieder aktiviert. Es gibt auch eine Unternehmensrichtlinie namens MutationEventsEnabled, die für Unternehmensnutzer ähnlich funktioniert. Mit beiden Optionen haben Sie bei Bedarf etwa neun Monate mehr Zeit für die Migration.