Annuncio del ritiro e della rimozione pianificata degli eventi di mutazione e condivisione delle modalità di migrazione del codice prima della rimozione a luglio 2024.
Chromium ha ufficialmente ritirato gli eventi di mutazione e prevede di rimuoverne il supporto a partire dalla versione 127, che verrà rilasciata in versione 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.
Che cosa sono gli eventi di mutazione?
Eventi di mutazione è il nome della seguente raccolta di eventi:
DOMNodeInsertedDOMNodeRemovedDOMSubtreeModifiedDOMCharacterDataModifiedDOMNodeInsertedIntoDocumentDOMNodeRemovedFromDocument- (non supportato da nessun browser moderno)
DOMAttrModified - (Non supportato da alcun browser moderno)
DOMAttributeNameChanged - (non supportato da nessun browser moderno)
DOMElementNameChanged
Questi eventi fanno parte di una parte molto vecchia della specifica DOM di livello 2 e sono stati ritirtati 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 avere diversi difetti fatali:
- Sono troppo verbosi e vengono eseguiti 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 UA.
- Spesso causano 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 ritirtati dalle specifiche nel 2011 e nel 2012 è stata creata un'API sostitutiva (MutationObserver). La nuova API è stata implementata e funzionante da oltre 10 anni.
Perché gli eventi di mutazione vengono rimossi
Il supporto degli eventi di mutazione varia in base al browser. 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 una specifica concordata. Tuttavia, una domanda ragionevole potrebbe essere: perché non lasciarli lì, dato che sono "completi" e rallentano solo le pagine che li utilizzano? La risposta è composta da due parti.
Innanzitutto, questi eventi stanno frenando la piattaforma web. Con l'evoluzione del web e l'aggiunta di nuove API, è necessario tenere conto dell'esistenza di queste API precedenti. 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 gli ascoltatori di eventi di mutazione devono ancora essere eseguiti controlli in molti punti. Il codice deve comunque essere scritto in modo molto sicuro, poiché questi eventi possono modificare 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
Utilizza MutationObserver
La documentazione di MutationObserver è disponibile su MDN ed è abbastanza completa. La sostituzione della base di codice dipende dal modo in cui 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 è 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
Esiste 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 tempistiche e sulla prova del ritiro
Gli eventi di mutazione verranno rimossi da Chrome 127 per tutti gli utenti* che passeranno alla versione stabile il 23 luglio 2024. Gli eventi inizieranno a essere rimossi dai canali Canary, Dev e Beta prima di questa data, come avviso in anteprima.
- Se hai bisogno di più tempo (oltre a luglio 2024) per eseguire la migrazione del codice, è disponibile una prova di ritiro che riattiva temporaneamente gli eventi su siti specifici. Esiste anche un criterio aziendale denominato
MutationEventsEnabledche funziona in modo simile per gli utenti aziendali. Entrambe le opzioni offrono circa nove mesi di tempo in più per la migrazione, se necessario.