Wir kündigen die Einstellung und die geplante Entfernung von Mutationsereignissen an und erläutern, wie Sie Ihren Code vor der Entfernung im Juli 2024 migrieren können.
Chromium hat Mutationsereignisse offiziell eingestellt und plant, ab Version 127 die Unterstützung zu entfernen, die am 23. Juli 2024 als stabile Version veröffentlicht wird. In diesem Post wird erläutert, warum wir Mutationsereignisse entfernen, und einen Weg für die Migration vor, bevor sie aus dem Browser entfernt werden.
Was sind Mutationsereignisse?
„Mutation Events“ ist der Name für die folgende Ereignissammlung:
DOMNodeInsertedDOMNodeRemovedDOMSubtreeModifiedDOMCharacterDataModifiedDOMNodeInsertedIntoDocumentDOMNodeRemovedFromDocument- (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 alter Bestandteil der Spezifikation für DOM-Ebene 2 und wurden seit 2011 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 nach einer guten Idee, wiesen aber mehrere schwerwiegende Fehler auf:
- Sie sind ausführlich und werden zu oft ausgelöst. Für jeden entfernten Knoten wird ein Ereignis ausgelöst.
- Sie sind langsam, da Ereignisse weitergegeben werden und viele UA-Laufzeitoptimierungen verhindert werden.
- Sie verursachen häufig Abstürze. Sie verursachen 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 eingestellt und 2012 eine Ersatz-API (MutationObserver) erstellt. Die neue API ist bereits seit über 10 Jahren in Betrieb und implementiert.
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 aufgrund fehlender vereinbarter Spezifikationen. Eine vernünftige Frage könnte jedoch lauten: Warum lassen Sie sie nicht einfach dort, denn sie sind fertig und verlangsamen nur die Seiten, auf denen sie verwendet werden? Die Antwort erfolgt in zwei Teilen.
Erstens stellen diese Ereignisse ein Hindernis für die Webplattform dar. Im Zuge der Weiterentwicklung des Webs und der Einführung neuer APIs muss die Existenz dieser Legacy-APIs berücksichtigt werden. Manchmal kann allein die Unterstützung dieser Ereignisse verhindern, dass neue APIs vorgeschlagen werden. Beispielsweise gibt es eine langjährige Anfrage, um zu verhindern, dass <iframe>-Elemente neu geladen werden, wenn sie innerhalb des DOM verschoben werden. Teilweise aufgrund der Existenz von Mutationsereignissen galt dieser Aufwand jedoch als zu schwierig und die Anfrage wurde geschlossen.
Diese Ereignisse tragen immer wieder dazu bei, die Browsergeschwindigkeit zu erhöhen. Selbst mit den Optimierungen von Browsern, mit denen Leistungseinbußen auf Seiten vermieden werden sollen, die keine Mutationsereignisse verwenden, sind die Dinge nicht perfekt. An vielen Stellen müssen noch Prüfungen auf Mutationsereignis-Listener durchgeführt werden. Code muss immer noch sehr defensiv geschrieben werden, da diese Ereignisse das DOM auf überraschende Weise ändern können.
Da die Ereignisse vor über 10 Jahren offiziell eingestellt wurden und das Ersatz-API in ähnlicher Weise seit über 10 Jahren verfügbar ist, ist es an der Zeit, die Mutationsereignisse ein für alle Mal aus Browsern zu entfernen.
Vorgehensweise
Stattdessen MutationObserver verwenden
Die Dokumentation für MutationObserver findest du auf der MDN und ist ziemlich vollständig. Der Austausch Ihrer Codebasis 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});
Obwohl der MutationObserver-Code größer erscheint als der ursprüngliche DOMNodeInserted-Event-Listener-Code, kann er alle Mutationen verarbeiten, die in einer ganzen Baumstruktur in einem Aufruf erfolgen, anstatt mehrere Aufrufe des Event-Handlers zu erfordern.
Polyfill
Es gibt einen Polyfill, der vorhandenen Code weiterhin durch MutationObserver unterstützt. Der Polyfill befindet sich auf GitHub oder als npm-Paket.
- https://github.com/mfreed7/mutation-events-polyfill#readme
- https://www.npmjs.com/package/mutation-events
Informationen zum Zeitplan und zum Einstellungstest
Mutationsereignisse werden aus Chrome 127 für alle Nutzer* entfernt. Sie werden am 23. Juli 2024 auf eine stabile Version umgestellt. Als frühzeitige Warnung werden die Ereignisse schon früher von den Canary-, Entwickler- und Betaversionen entfernt.
- Wenn Sie mehr Zeit (nach Juli 2024) benötigen, um Ihren Code zu migrieren, können Sie einen Test zur Einstellung von Produkten durchführen, bei dem die Ereignisse auf bestimmten Websites vorübergehend wieder aktiviert werden. Außerdem gibt es die Unternehmensrichtlinie
MutationEventsEnabled, die für Unternehmensnutzer ähnlich funktioniert. Mit beiden Optionen bleibt bei Bedarf ungefähr neun Monate länger für die Migration.