Eu faço o teste A / B em nosso site e faço a maior parte do meu trabalho em um arquivo JS carregado na parte superior da página antes que qualquer outra coisa seja renderizada, mas depois que o jQuery é carregado, o que é útil às vezes.

Tomando um exemplo muito simples de alterar uma tag H1, normalmente eu injetava um estilo na cabeça para definir a opacidade H1 como 0 e, em DOMContentLoaded, manipulava o conteúdo H1 e depois definia a opacidade para 1. A razão disso é evitar um flash do conteúdo antigo antes que a alteração ocorra - ocultar todo o objeto é mais gracioso aos olhos.

Comecei a olhar para a API MutationObserver. Eu já usei isso antes ao alterar o conteúdo em uma caixa de diálogo de sobreposição que o usuário pode abrir, o que parece ser uma abordagem bastante interessante, e me pergunto se alguém conseguiu usar um MutationObserver para ouvir o documento quando ele carrega / analisar e fazer alterações no documento antes da primeira renderização e antes do DOMContentLoaded?

Essa abordagem me permitia alterar o conteúdo H1 sem precisar ocultá-lo, alterá-lo e mostrá-lo.

Eu tentei, mas não consegui até agora, e acabei de ler sobre os Eventos de Mutação que estão obsoletos e me pergunto se estou tentando fazer algo que simplesmente não é possível. No entanto, nós (não eu) conseguimos colocar um robô em Marte, então espero poder resolver isso.

Portanto, é possível usar o MutationObservers para alterar o conteúdo HTML rapidamente, à medida que a página está sendo carregada / analisada?

Obrigado por qualquer ajuda ou quaisquer sugestões.

Atenciosamente, Nick