Annuncio del ritiro e della rimozione pianificata degli eventi Mutazione e spiegazione di come eseguire la migrazione del codice prima della rimozione a luglio 2024.
Chromium ha ufficialmente ritirato gli eventi Mutazione e ha in programma di rimuovere il supporto a partire dalla versione 127, che passerà alla release stabile il 23 luglio 2024. Questo post spiega perché stiamo rimuovendo gli eventi Mutazione e fornisce un percorso per la migrazione prima che vengano rimossi dal browser.
Cosa sono gli eventi di mutazione?
Eventi di mutazione è il nome della seguente raccolta di eventi:
DOMNodeInsertedDOMNodeRemovedDOMSubtreeModifiedDOMCharacterDataModifiedDOMNodeInsertedIntoDocumentDOMNodeRemovedFromDocument- (Non supportato da alcun browser moderno)
DOMAttrModified - (Non supportato da alcun browser moderno)
DOMAttributeNameChanged - (Non supportato da alcun browser moderno)
DOMElementNameChanged
Questi eventi sono una parte molto vecchia della specifica DOM livello 2 e sono stati ritirati dal 2011. Sono stati sostituiti dall'interfaccia MuutationObserver, supportata in tutti i browser moderni dal 2013.
Cronologia degli eventi di mutazione
Gli eventi di mutazione sembravano una buona idea molto tempo fa, ma si sono rivelati diversi difetti fatali:
- Sono prolissi e sparano troppo spesso. Viene attivato un evento per ogni nodo rimosso.
- Sono lenti a causa della propagazione degli eventi e perché impediscono molte ottimizzazioni del tempo di esecuzione di UA.
- Cadono spesso arresti anomali. Sono stati la fonte di molti arresti anomali e bug di sicurezza nei browser, perché i listener di eventi possono modificare l'intero DOM in un'operazione DOM in esecuzione.
A causa di questi difetti, gli eventi sono stati ritirati dalla specifica nel 2011 e nel 2012 è stata costruita un'API sostitutiva (MutationObserver). A questo punto, la nuova API è implementata e funzionante da oltre 10 anni.
Perché gli eventi di mutazione vengono rimossi
Il supporto per gli eventi di mutazione varia da browser a browser. Alcuni eventi, ad esempio DOMNodeInsertedIntoDocument e DOMNodeRemovedFromDocument, non sono supportati in tutti i browser. Per gli altri eventi, il comportamento particolare varia a causa della mancanza di specifiche concordate. Tuttavia, una domanda plausibile potrebbe essere: perché non lasciarli lì, visto che sono stati completati? ma rallentano solo le pagine che li usano? La risposta è suddivisa in due parti.
In primo luogo, questi eventi stanno bloccando la piattaforma web. Man mano che il web si evolve e vengono aggiunte nuove API, è necessario prendere in considerazione l'esistenza di queste API legacy. A volte, solo la necessità di supportare questi eventi può impedire che vengano proposte nuove API. Ad esempio, esiste una richiesta di lunga data per impedire il ricaricamento degli elementi <iframe> quando vengono spostati all'interno del DOM. Tuttavia, in parte a causa dell'esistenza di eventi di mutazione, questo sforzo è stato ritenuto troppo difficile da realizzare e la richiesta è stata chiusa.
Questi eventi continuano a ostacolare la velocità dei browser. Anche con le ottimizzazioni dei browser, che tentano di evitare penalità di prestazioni sulle pagine che non utilizzano eventi di mutazione, il risultato non è perfetto. Per i listener di eventi Mutazione è comunque necessario effettuare i controlli in molte posizioni. Il codice deve comunque essere scritto in modo molto difensivo, poiché questi eventi possono cambiare il DOM in modi sorprendenti.
Dato che sono trascorsi più di 10 anni da quando gli eventi sono stati ufficialmente deprecati e l'API sostitutiva è disponibile da oltre 10 anni, è giunto il momento di rimuovere definitivamente gli eventi di mutazione dai browser una volta per tutte.
Come eseguire la migrazione
Usa invece MutationObserver
La documentazione relativa a MutationObserver si trova su MDN ed è relativamente completa. La sostituzione del codebase dipende da come vengono utilizzati questi eventi, ma a titolo esemplificativo:
// 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});
Anche se il codice MutationObserver è più grande del codice listener di eventi originale di DOMNodeInserted, tieni presente che è in grado di gestire tutte le mutazioni che si verificano in un intero albero con una sola chiamata, anziché richiedere più chiamate al gestore di eventi.
Polyfill
È presente un polyfill che tenta di consentire al codice esistente di continuare a funzionare, pur essendo basato su MutationObserver. Il polyfill si trova su GitHub o come pacchetto npm.
- https://github.com/mfreed7/mutation-events-polyfill#readme
- https://www.npmjs.com/package/mutation-events
Informazioni sulle prove relative a tempistiche e ritiro
Gli eventi di mutazione verranno rimossi da Chrome 127 per tutti gli utenti* e passeranno alla release stabile il 23 luglio 2024. Come preavviso, gli eventi inizieranno a essere rimossi dai canali Canary, Dev e Beta prima della data indicata.
- Se hai bisogno di più tempo (oltre luglio 2024) per eseguire la migrazione del codice, è disponibile una prova relativa al ritiro che riattiva temporaneamente gli eventi su siti specificati. Esiste anche un criterio aziendale chiamato
MutationEventsEnabled, che funziona in modo simile per gli utenti aziendali. Entrambe le opzioni offrono circa nove mesi di tempo in più per la migrazione, se necessario.