Anunciamos la baja y la eliminación planificada de los eventos de mutación, y compartimos cómo puedes migrar tu código antes de la eliminación en julio de 2024.
Chromium dio de baja oficialmente los eventos de mutación y tiene un plan para quitar la compatibilidad a partir de la versión 127, que pasará a la versión estable el 23 de julio de 2024. En esta publicación, se explica por qué quitaremos los eventos de mutación y se proporciona una ruta para la migración antes de que se quiten del navegador.
¿Qué son los eventos de mutación?
Eventos de mutación es el nombre de la siguiente colección de eventos:
DOMNodeInsertedDOMNodeRemovedDOMSubtreeModifiedDOMCharacterDataModifiedDOMNodeInsertedIntoDocumentDOMNodeRemovedFromDocument- (No es compatible con ningún navegador moderno)
DOMAttrModified - (No es compatible con ningún navegador moderno)
DOMAttributeNameChanged - (No es compatible con ningún navegador moderno)
DOMElementNameChanged
Estos eventos son una parte muy antigua de la especificación de DOM de nivel 2 y han dejado de estar obsoletos desde 2011. Se reemplazaron por la interfaz de MutationObserver, que es compatible con todos los navegadores modernos desde 2013.
Historial de eventos de mutación
Hace mucho tiempo, los eventos de mutación parecían una buena idea, pero resultaron tener varias fallas fatales:
- Son detallados y se activan con demasiada frecuencia. Se activa un evento por cada nodo que se quita.
- Son lentas, debido a la propagación de eventos y porque impiden muchas optimizaciones del entorno de ejecución de UA.
- A menudo causan fallas. Han sido el origen de muchas fallas y errores de seguridad en los navegadores, porque los objetos de escucha de eventos pueden cambiar todo el DOM debajo de una operación de DOM en ejecución.
Debido a estas fallas, los eventos quedaron obsoletos conforme a las especificaciones en 2011 y en 2012 se construyó una API de reemplazo (MutationObserver). En la actualidad, la nueva API se ha implementado y funciona desde hace más de 10 años.
Por qué se quitarán los eventos de mutación
La compatibilidad con los eventos de mutación varía según el navegador. Algunos eventos, como DOMNodeInsertedIntoDocument y DOMNodeRemovedFromDocument, no son compatibles con todos los navegadores. Para los demás eventos, el comportamiento particular varía debido a la falta de una especificación acordada. Sin embargo, una pregunta razonable podría ser: ¿por qué no dejarlos allí, ya que están "terminados" y solo ralentizan las páginas que los usan? La respuesta viene en dos partes.
En primer lugar, estos eventos están retrasando la plataforma web. A medida que la Web evoluciona y se agregan nuevas APIs, se debe tener en cuenta la existencia de estas APIs heredadas. A veces, la simple necesidad de admitir estos eventos puede impedir que se propongan nuevas APIs. A modo de ejemplo, hubo una solicitud permanente para evitar que los elementos <iframe> se vuelvan a cargar cuando se muevan dentro del DOM. Sin embargo, debido parcialmente a la existencia de eventos de mutación, se consideró que esa iniciativa era demasiado difícil de lograr y se cerró la solicitud.
Estos eventos siguen obstaculizando la velocidad de los navegadores. Incluso con las optimizaciones que tienen los navegadores, que intentan evitar las penalizaciones de rendimiento en páginas que no usan eventos de mutación, las cosas no son perfectas. Aún se deben realizar verificaciones en muchos lugares para los objetos de escucha de eventos de mutación. De todos modos, el código debe escribirse de forma muy defensiva, ya que estos eventos pueden cambiar el DOM de maneras sorprendentes.
Ya que transcurrieron más de 10 años desde que los eventos se dieron de baja oficialmente y la API de reemplazo ha estado disponible de manera similar durante más de 10 años, llegó el momento de quitar, de una vez por todas, los eventos de mutación de los navegadores.
Cómo realizar la migración
En su lugar, usa MutationObserver.
La documentación de MutationObserver se encuentra en MDN y es bastante completa. El reemplazo de tu base de código depende de cómo se usen estos eventos, pero a modo de ejemplo:
// 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});
Si bien el código MutationObserver parece más grande que el código original del objeto de escucha de eventos DOMNodeInserted, ten en cuenta que puede controlar todas las mutaciones que ocurran en todo un árbol con una sola llamada, en lugar de requerir varias llamadas al controlador de eventos.
Polyfill
Hay un polyfill que intenta permitir que el código existente siga funcionando mientras utiliza la tecnología de MutationObserver. El polyfill se encuentra en GitHub o como un paquete de npm.
- https://github.com/mfreed7/mutation-events-polyfill#readme
- https://www.npmjs.com/package/mutation-events
Información sobre el cronograma y la prueba de baja
Se quitarán los eventos de mutación de Chrome 127 para todos los usuarios* y, a partir de la versión estable, se lanzará el 23 de julio de 2024. Como advertencia temprana, los eventos se comenzarán a quitar de los canales Canary, para desarrolladores y beta antes de ese plazo.
- Si necesitas tiempo adicional (más allá de julio de 2024) para migrar tu código, hay una prueba de baja que vuelve a habilitar los eventos temporalmente en sitios específicos. También hay una política empresarial llamada
MutationEventsEnabledque funciona de manera similar para los usuarios empresariales. Cualquiera de estas opciones ofrece aproximadamente nueve meses de tiempo adicional para migrar, de ser necesario.