Hago pruebas A / B en nuestro sitio y hago la mayor parte de mi trabajo en un archivo JS que se carga en la parte superior de la página antes de que se muestre cualquier otra cosa, pero después de que se haya cargado jQuery, lo cual es útil a veces.

Tomando un ejemplo muy simple de cambiar una etiqueta H1, normalmente inyectaría un estilo en la cabeza para establecer la opacidad H1 en 0 y luego en DOMContentLoaded, manipularía el contenido H1 y luego establecería la opacidad en 1. La razón de esto es evitar un destello del contenido anterior antes de que se produzca el cambio; ocultar todo el objeto es más agradable a la vista.

Empecé a mirar la API MutationObserver. Lo he usado antes al cambiar el contenido en un cuadro de diálogo de superposición que el usuario podría abrir, lo que parece ser un enfoque bastante bueno y me pregunto si alguien ha logrado usar un MutationObserver para escuchar el documento cuando se está cargando por primera vez / analizar y realizar cambios en el documento antes del primer procesamiento y antes de DOMContentLoaded?

Este enfoque me permitiría cambiar el contenido de H1 sin tener que ocultarlo, cambiarlo y luego mostrarlo.

He intentado pero he fallado hasta ahora y acabo de leer sobre los eventos de mutación que deben ser obsoletos y me pregunto si estoy tratando de hacer algo que simplemente no es posible. Sin embargo, (no yo) hemos logrado poner un robot en Marte, así que espero poder resolver esto.

Entonces, ¿es posible usar MutationObservers para cambiar el contenido HTML sobre la marcha mientras se carga / analiza la página?

Gracias por cualquier ayuda o cualquier puntero.

Saludos, Nick