Nous allons annoncer l'abandon et la suppression planifiée des événements de mutation, et expliquer comment migrer votre code avant la suppression prévue en juillet 2024.
Chromium a officiellement abandonné les événements de mutation et prévoit de supprimer la compatibilité à partir de la version 127, qui passera en version stable le 23 juillet 2024. Cet article explique pourquoi nous supprimons les événements de mutation et fournit un chemin d'accès pour les migrer avant qu'ils ne soient supprimés du navigateur.
Que sont les événements de mutation ?
"Événements de mutation" est le nom de la collection d'événements suivante:
DOMNodeInsertedDOMNodeRemovedDOMSubtreeModifiedDOMCharacterDataModifiedDOMNodeInsertedIntoDocumentDOMNodeRemovedFromDocument- (Non compatible avec les navigateurs récents)
DOMAttrModified - (Non compatible avec les navigateurs récents)
DOMAttributeNameChanged - (Non compatible avec les navigateurs récents)
DOMElementNameChanged
Ces événements font partie intégrante des spécifications DOM de niveau 2 et sont obsolètes depuis 2011. Elles ont été remplacées par l'interface MutationObserver, compatible avec tous les navigateurs modernes depuis 2013.
Historique des événements de mutation
Il y a longtemps, les événements de mutation semblaient être une bonne idée, mais ils ont présenté plusieurs défauts fatals:
- Ils sont verbeux et se déclenchent trop souvent. Un événement est déclenché pour chaque nœud supprimé.
- Ils sont lents en raison de la propagation des événements et de nombreux problèmes d'optimisation de l'exécution UA.
- Elles provoquent souvent des plantages. Ils sont à l'origine de nombreux plantages et bugs de sécurité dans les navigateurs, car les écouteurs d'événements peuvent modifier l'intégralité du DOM sous une opération DOM en cours d'exécution.
En raison de ces failles, les événements ont été obsolètes dans la spécification en 2011 et une API de remplacement (MutationObserver) a été créée en 2012. La nouvelle API est implémentée et fonctionnelle depuis plus de 10 ans.
Pourquoi les événements de mutation sont-ils supprimés ?
La compatibilité des événements de mutation varie selon les navigateurs. Certains événements, comme DOMNodeInsertedIntoDocument et DOMNodeRemovedFromDocument, ne sont pas compatibles avec tous les navigateurs. Pour les autres événements, le comportement varie en raison de l'absence de spécification convenue. Cependant, une question raisonnable pourrait être: pourquoi ne pas les laisser là, puisqu'ils sont « terminés » et ralentissent uniquement les pages qui les utilisent ? La réponse se divise en deux parties.
Tout d'abord, ces événements bloquent la plate-forme Web. À mesure que le Web évolue et que de nouvelles API sont ajoutées, l'existence de ces anciennes API doit être prise en compte. Parfois, le simple besoin de prendre en charge ces événements peut empêcher la proposition de nouvelles API. Par exemple, une requête de longue durée empêche l'actualisation des éléments <iframe> lorsqu'ils sont déplacés dans le DOM. Cependant, en partie en raison de la présence d'événements de mutation, cet effort a été considéré comme trop difficile à réaliser et la demande a été clôturée.
Ces événements continuent de nuire à la rapidité des navigateurs. Malgré les optimisations appliquées par les navigateurs, qui tentent d'éviter les problèmes de performances sur les pages qui n'utilisent pas d'événements de mutation, tout n'est pas parfait. Des vérifications doivent encore être effectuées à de nombreux endroits pour les écouteurs d'événements de mutation. Le code doit tout de même être écrit de manière très défensive, car ces événements peuvent modifier le DOM de manière surprenante.
Comme il y a plus de 10 ans que ces événements ont été officiellement abandonnés, et que l'API de remplacement est disponible depuis plus de 10 ans, le moment est venu de supprimer définitivement les événements de mutation des navigateurs.
Comment procéder ?
Utiliser plutôt MutationObserver
La documentation sur MutationObserver se trouve sur MDN, et elle est assez complète. Le remplacement de votre codebase dépend de la manière dont ces événements sont utilisés, mais à titre d'exemple:
// 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});
Bien que le code MutationObserver semble plus volumineux que le code d'origine de l'écouteur d'événements DOMNodeInserted, notez qu'il peut gérer toutes les mutations qui se produisent sur une arborescence entière en un seul appel, au lieu de devoir appeler plusieurs appels au gestionnaire d'événements.
Polyfill
Un polyfill tente de permettre au code existant de continuer à fonctionner, tout en étant alimenté par MutationObserver. Le polyfill se trouve sur GitHub ou en tant que package npm.
- https://github.com/mfreed7/mutation-events-polyfill#readme
- https://www.npmjs.com/package/mutation-events
Calendrier et informations sur l'évaluation avant arrêt
Les événements de mutation seront supprimés de Chrome 127 pour tous les utilisateurs* et seront transférés vers la version stable le 23 juillet 2024. Ces événements commenceront à être supprimés des versions Canary, en développement et bêta plus tôt, en tant qu'avertissement précoce.
- Si vous avez besoin de plus de temps (après juillet 2024) pour migrer votre code, un essai avant arrêt permet de réactiver temporairement les événements sur les sites spécifiés. Il existe également une règle d'entreprise appelée
MutationEventsEnabled, qui fonctionne de la même manière pour les utilisateurs de la version Enterprise. Chacune de ces options laisse environ neuf mois de temps supplémentaire pour effectuer la migration, si nécessaire.