Anunciamos la baja y la eliminación planificada de eventos de mutación, además de información para compartir 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 previsto 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 realizar la migración antes de que se quiten del navegador.
¿Qué son los eventos de mutación?
Eventos de mutación es el nombre del siguiente conjunto 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 nivel 2 de DOM y se dieron de baja desde 2011. Se reemplazaron por la interfaz 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 muy detalladas 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 evitan muchas optimizaciones en tiempo de ejecución de UA.
- Suelen causar fallas. Han sido el origen de muchas fallas y errores de seguridad en los navegadores, debido a que 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 de la especificación en 2011 y se construyó una API de reemplazo (MutationObserver) en 2012. La nueva API está implementada y funciona desde hace más de 10 años.
Por qué se quitan 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 otros 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 solo dejarlos allí, ya que están "terminados" y solo ralentizan las páginas que los utilizan? La respuesta tiene 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, solo la necesidad de admitir estos eventos puede impedir que se propongan nuevas APIs. Por ejemplo, hubo una solicitud recurrente para evitar que los elementos <iframe> se vuelvan a cargar cuando se muevan dentro del DOM. Sin embargo, parcialmente debido a la existencia de eventos de mutación, se consideró que ese esfuerzo era demasiado difícil de realizar y se cerró la solicitud.
Estos eventos continúan impidiendo que los navegadores sean más rápidos. Incluso con las optimizaciones de los navegadores, que intentan evitar las penalizaciones de rendimiento en las páginas que no utilizan 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. Aún es necesario escribir el código de manera muy defensiva, ya que estos eventos pueden cambiar el DOM de maneras sorprendentes.
Como pasaron más de 10 años desde que los eventos dejaron de estar disponibles oficialmente, y la API de reemplazo ha estado disponible de manera similar durante más de 10 años, llegó el momento de quitar finalmente los eventos de mutación de los navegadores de una vez por todas.
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 ser más grande que el código original de objeto de escucha de eventos DOMNodeInserted, ten en cuenta que puede manejar todas las mutaciones que ocurren en un árbol completo en 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 usa la tecnología de MutationObserver. El polyfill se encuentra en GitHub o como un paquete npm.
- https://github.com/mfreed7/mutation-events-polyfill#readme
- https://www.npmjs.com/package/mutation-events
Información sobre el cronograma y las pruebas de baja
Los eventos de mutación se quitarán de Chrome 127 para todos los usuarios* que pasarán a la versión estable el 23 de julio de 2024. Como advertencia temprana, los eventos comenzarán a quitarse de los canales Canary, beta y para desarrolladores antes de esa fecha.
- Si necesitas más tiempo (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 te proporciona aproximadamente nueve meses adicionales para la migración, si es necesario.