Wir haben die Einstellung und geplante Entfernung von Mutationsereignissen angekündigt und erklärt, wie Sie Ihren Code vor der Entfernung im Juli 2024 migrieren können.

Mason Freed

Mutation Events wurden in Chromium offiziell eingestellt. Die Unterstützung wird ab Version 127 entfernt, die am 23. Juli 2024 in die stabile Version übergeht. In diesem Beitrag wird erläutert, warum wir Mutationsereignisse entfernen, und es wird eine Migrationsstrategie beschrieben, die Sie vor dem Entfernen der Ereignisse 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 Teil der DOM-Level-2-Spezifikation und wurden 2011 eingestellt. Sie wurden durch die MutationObserver-Schnittstelle ersetzt, die seit 2013 in allen modernen Browsern unterstützt wird.

Verlauf von Mutationsereignissen

Mutationsereignisse haben vor langer Zeit als gute Idee gewirkt, haben sich aber als fatale Mängel erwiesen:

• 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 sind die Ursache für viele Abstürze und Sicherheitslücken in Browsern, 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 werden Mutationsereignisse entfernt?

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 Verhalten aufgrund fehlender vereinbarter Spezifikationen. Eine berechtigte Frage könnte jedoch lauten: Warum nicht einfach dort lassen, da sie „fertig“ sind und 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, dass neue APIs vorgeschlagen werden. Beispielsweise gab es schon lange eine Anfrage, <iframe>-Elemente beim Verschieben innerhalb des DOM nicht neu zu laden. 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 versuchen, die Leistungseinbußen auf Seiten zu vermeiden, auf denen keine Mutationsereignisse verwendet werden, 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.

Die Ereignisse wurden vor über 10 Jahren offiziell eingestellt und die Ersatz-API ist seit über 10 Jahren verfügbar. Es ist an der Zeit, die Mutationsereignisse endgültig aus Browsern zu entfernen.

Vorgehensweise

Verwenden Sie stattdessen MutationObserver.

Die Dokumentation für MutationObserver befindet sich auf der MDN und ist ziemlich vollständig. Wie Sie Ihre Codebasis ersetzen, 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 ganzen Baum auftreten, in einem einzigen Aufruf verarbeiten, anstatt mehrere Aufrufe des Ereignishandlers zu erfordern.

Polyfill

Es gibt eine Polyfill, die versucht, vorhandenen Code weiterhin auszuführen, 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 in Chrome 127 für alle Nutzer entfernt*, die am 23. Juli 2024 auf die stabile Version umstellen. 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 für die Migration Ihres Codes benötigen (über Juli 2024 hinaus), können Sie die Testversion zur Einstellung nutzen. Dabei werden die Ereignisse vorübergehend auf bestimmten Websites 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.