Mutationsereignisse werden aus Chrome entfernt

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
Mason Freed
X GitHub

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. Außerdem wird ein Pfad für die Migration beschrieben, bevor sie aus dem Browser entfernt werden.

Was sind Mutationsereignisse?

„Mutation Events“ ist der Name der folgenden Ereignissammlung:

  • 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-Oberfläche ersetzt, die seit 2013 in allen modernen Browsern unterstützt wird.

Verlauf der Mutationsereignisse

Mutationsereignisse klangen schon lange nach einer guten Idee, aber es stellten sich mehrere schwerwiegende Fehler heraus:

  • Sie sind verbose und feuern zu oft. Für jeden entfernten Knoten wird ein Ereignis ausgelöst.
  • Sie sind langsam, da Ereignisse weitergegeben werden und viele 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 eingestellt und 2012 wurde eine Ersatz-API (MutationObserver) erstellt. Die neue API ist jetzt 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 verlangsamen sie nur die Seiten, auf denen sie genutzt werden? Die Antwort besteht aus zwei Teilen.

Erstens bremsen diese Ereignisse die Webplattform. Im Zuge der Weiterentwicklung des Webs und der Einführung neuer APIs muss die Existenz dieser Legacy-APIs berücksichtigt werden. Manchmal verhindert die notwendige Unterstützung dieser Ereignisse, dass neue APIs vorgeschlagen werden. Es gibt beispielsweise eine seit Lange Zeit, um zu verhindern, dass <iframe>-Elemente neu geladen werden, wenn sie innerhalb des DOMs verschoben werden. Da jedoch zum Teil Mutationsereignisse vorhanden waren, wurde dieser Aufwand als zu schwierig erachtet und die Anfrage wurde geschlossen.

Diese Ereignisse beeinträchtigen die Geschwindigkeit von Browsern. Selbst mit den Optimierungen der Browser, mit denen die Leistungseinbußen auf Seiten ohne Mutationsereignisse vermieden werden sollen, sind die Ergebnisse nicht perfekt. Für Mutationsereignis-Listener müssen an vielen Stellen noch Prüfungen durchgeführt werden. Code muss dennoch sehr defensiv geschrieben werden, da diese Ereignisse das DOM auf überraschende Weise ä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

Stattdessen MutationObserver verwenden

Die Dokumentation zu MutationObserver findest du auf 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});

Obwohl der MutationObserver-Code größer als der ursprüngliche DOMNodeInserted-Event-Listener-Code ist, kann er alle Mutationen verarbeiten, die in einem einzigen Aufruf an der gesamten Baumstruktur vorgenommen werden. So sind nicht mehrere Aufrufe des Event-Handlers erforderlich.

Polyfill

Mit einem Polyfill wird versucht, zu ermöglichen, dass vorhandener Code weiterhin funktioniert, während er von MutationObserver unterstützt wird. Der Polyfill befindet sich auf GitHub oder als npm-Paket.

Informationen zum Zeitplan und zur Einstellung des Testzeitraums

Mutationsereignisse werden für alle Nutzer* aus Chrome 127 entfernt und am 23. Juli 2024 in die stabile Version übertragen. Wir beginnen damit, die Ereignisse als Frühwarnsystem aus den Canary-, Entwickler- und Betakanälen zu entfernen.

  • 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. Bei beiden Optionen bleibt die Migration bei Bedarf um etwa neun Monate länger.