Aankondiging van de beëindiging en geplande verwijdering van mutatiegebeurtenissen, en delen hoe u uw code kunt migreren vóór de verwijdering in juli 2024.

Mason Freed

Chromium heeft mutatiegebeurtenissen officieel beëindigd en heeft een plan om de ondersteuning te verwijderen vanaf versie 127 , die op 23 juli 2024 naar een stabiele release gaat. Dit bericht legt uit waarom we mutatiegebeurtenissen verwijderen en biedt een pad voor migratie voordat ze uit de browser worden verwijderd.

Wat zijn mutatiegebeurtenissen?

Mutatiegebeurtenissen is de naam voor de volgende verzameling gebeurtenissen:

• DOMNodeInserted
• DOMNodeRemoved
• DOMSubtreeModified
• DOMCharacterDataModified
• DOMNodeInsertedIntoDocument
• DOMNodeRemovedFromDocument
• (Niet ondersteund door een moderne browser) DOMAttrModified
• (Niet ondersteund door een moderne browser) DOMAttributeNameChanged
• (Niet ondersteund door een moderne browser) DOMElementNameChanged

Deze gebeurtenissen vormen een zeer oud onderdeel van de DOM niveau 2-specificatie en zijn sinds 2011 verouderd . Ze werden vervangen door de MutationObserver-interface , die sinds 2013 in alle moderne browsers wordt ondersteund .

Geschiedenis van mutatiegebeurtenissen

Mutatiegebeurtenissen klonken lang geleden als een goed idee, maar bleken een aantal fatale tekortkomingen te hebben:

• Ze zijn uitgebreid en schieten te vaak. Voor elk knooppunt dat wordt verwijderd, wordt een gebeurtenis geactiveerd.
• Ze zijn traag vanwege de voortplanting van gebeurtenissen en omdat ze veel UA-runtime-optimalisaties voorkomen.
• Ze veroorzaken vaak crashes. Ze zijn de bron geweest van veel crashes en beveiligingsfouten in browsers, omdat gebeurtenislisteners de volledige DOM kunnen wijzigen onder een actieve DOM-bewerking.

Vanwege deze tekortkomingen werden de gebeurtenissen in 2011 uit de specificatie gehaald en werd in 2012 een vervangende API ( MutationObserver ) gebouwd. De nieuwe API is op dit moment al meer dan 10 jaar geïmplementeerd en functioneel.

Waarom mutatiegebeurtenissen worden verwijderd

Ondersteuning voor mutatiegebeurtenissen varieert per browser. Sommige gebeurtenissen, bijvoorbeeld DOMNodeInsertedIntoDocument en DOMNodeRemovedFromDocument , worden niet in alle browsers ondersteund. Voor de andere evenementen varieert het specifieke gedrag vanwege het ontbreken van een overeengekomen specificatie. Een redelijke vraag zou echter kunnen zijn: waarom laten we ze daar niet gewoon staan, aangezien ze "klaar" zijn en ze alleen de pagina's vertragen die ze gebruiken? Het antwoord bestaat uit twee delen.

Ten eerste houden deze gebeurtenissen het webplatform tegen. Naarmate het web evolueert en er nieuwe API’s worden toegevoegd, moet er rekening worden gehouden met het bestaan ​​van deze verouderde API’s. Soms kan alleen al de noodzaak om deze gebeurtenissen te ondersteunen ervoor zorgen dat er geen nieuwe API’s worden voorgesteld. Er bestaat bijvoorbeeld al lang een verzoek om te voorkomen dat <iframe> -elementen opnieuw worden geladen wanneer ze binnen de DOM worden verplaatst. Gedeeltelijk vanwege het bestaan ​​van mutatiegebeurtenissen werd die inspanning echter te moeilijk geacht om te verwezenlijken en werd het verzoek gesloten.

Deze gebeurtenissen blijven het sneller maken van browsers in de weg staan. Zelfs met de optimalisaties die browsers hebben, die proberen de prestatieboetes op pagina's die geen mutatiegebeurtenissen gebruiken te vermijden, zijn de zaken niet perfect. Op veel plaatsen moeten er nog controles worden uitgevoerd op Mutation Event-listeners. Code moet nog steeds zeer defensief worden geschreven, omdat deze gebeurtenissen de DOM op verrassende manieren kunnen veranderen.

Omdat het meer dan 10 jaar geleden is dat de gebeurtenissen officieel zijn beëindigd, en de vervangende API eveneens al meer dan 10 jaar beschikbaar is, is de tijd gekomen om de mutatiegebeurtenissen eindelijk voor eens en voor altijd uit browsers te verwijderen.

Hoe te migreren

Gebruik in plaats daarvan MutationObserver

De documentatie voor MutationObserver bevindt zich op MDN en is redelijk compleet. Vervanging voor uw codebase hangt af van hoe deze gebeurtenissen worden gebruikt, maar als voorbeeld:

// 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});  

Hoewel de MutationObserver -code groter lijkt dan de originele DOMNodeInserted gebeurtenislistenercode, merkt u dat deze alle mutaties die in een hele boom plaatsvinden in één aanroep kan afhandelen, in plaats van dat er meerdere aanroepen naar de gebeurtenishandler nodig zijn.

Polyvulling

Er is een polyfill die probeert bestaande code te laten blijven functioneren, terwijl deze wordt aangedreven door MutationObserver . De polyfill bevindt zich op GitHub of als een npm-pakket.

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

Tijdlijn en informatie over de beëindiging van de proefperiode

Mutatiegebeurtenissen worden voor alle gebruikers* verwijderd uit Chrome 127, dat op 23 juli 2024 naar de stabiele release gaat. Als vroege waarschuwing worden de gebeurtenissen al eerder verwijderd uit de Canary-, Dev- en Bèta-kanalen.

• Als u extra tijd nodig heeft (na juli 2024) om uw code te migreren, is er een beëindigingsproef waarbij de gebeurtenissen tijdelijk opnieuw worden ingeschakeld op bepaalde sites. Er is ook een ondernemingsbeleid met de naam MutationEventsEnabled dat op een vergelijkbare manier functioneert voor zakelijke gebruikers. Elk van deze opties geeft ongeveer negen maanden extra tijd om te migreren, indien nodig.