Annuncio del ritiro e della rimozione pianificata degli eventi di mutazione e della condivisione del modo in cui è possibile eseguire la migrazione del codice prima della rimozione a luglio 2024.
Chromium ha ufficialmente ritirato gli eventi di mutazione e ha in programma di rimuovere il supporto a partire dalla versione 127, che diventerà stabile il 23 luglio 2024. Questo post spiega perché stiamo rimuovendo gli eventi di 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- (Funzionalità non supportata da alcun browser moderno)
DOMAttrModified - (Funzionalità non supportata da alcun browser moderno)
DOMAttributeNameChanged - (Funzionalità non supportata da alcun browser moderno)
DOMElementNameChanged
Questi eventi sono una parte molto vecchia della specifica di livello 2 del DOM e sono stati ritirati dal 2011. Sono stati sostituiti dall'interfaccia Mutation Analyzer, che è 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 troppo prolissi e sparati troppo spesso. Viene attivato un evento per ogni nodo rimosso.
- Sono lenti, a causa della propagazione degli eventi e perché impediscono molte ottimizzazioni di runtime UA.
- Causano spesso arresti anomali. Hanno causato molti arresti anomali e bug di sicurezza nei browser, in quanto 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 creata un'API sostitutiva (MutationObserver). 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 un browser all'altro. Alcuni eventi, ad esempio DOMNodeInsertedIntoDocument e DOMNodeRemovedFromDocument, non sono supportati in tutti i browser. Per gli altri eventi, il comportamento specifico varia a causa della mancanza di specifiche concordate. Tuttavia, una domanda ragionevole potrebbe essere: perché non lasciarli lì, visto che hanno "finito" e rallentano solo le pagine che li utilizzano? La risposta viene suddivisa in due parti.
In primo luogo, questi eventi ostacolano la piattaforma web. Man mano che il web si evolve e vengono aggiunte nuove API, occorre prendere in considerazione l'esistenza di queste API legacy. A volte, la sola necessità di supportare questi eventi può impedire la proposta di nuove API. Ad esempio, è presente 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 di cui dispongono i browser, che cercano di evitare le penalizzazioni delle prestazioni nelle pagine che non utilizzano eventi di mutazione, le cose non sono perfette. È ancora necessario effettuare controlli in molte sezioni per i listener di eventi di mutazione. 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 allo stesso modo da oltre 10 anni, è giunto il momento di rimuovere finalmente gli eventi di mutazione dai browser una volta per tutte.
Come eseguire la migrazione
Usa invece MutationObserver
La documentazione per MutationObserver si trova su MDN ed è abbastanza completa. La sostituzione del codebase dipende da come vengono utilizzati questi eventi, ma ad esempio:
// 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 sembra più grande del codice del listener di eventi DOMNodeInserted originale, puoi notare che è in grado di gestire tutte le mutazioni che si verificano in un intero albero in 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 utilizzando 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 tempistiche e sulla prova relativa al ritiro
Gli eventi di mutazione verranno rimossi da Chrome 127 per tutti gli utenti,* che andranno nella release stabile il 23 luglio 2024. Gli eventi inizieranno a essere rimossi dai canali Canary, Dev e beta prima di quel giorno, come preavviso.
- Se hai bisogno di più tempo (dopo luglio 2024) per eseguire la migrazione del codice, è disponibile una prova del ritiro che riattiva temporaneamente gli eventi sui siti specificati. Esiste anche un criterio aziendale chiamato
MutationEventsEnabledche funziona in modo simile per gli utenti aziendali. Ognuna di queste opzioni concede circa nove mesi di tempo in più per eseguire la migrazione, se necessario.