O que acontece se nós manipular o DOM no requestAnimationFrame?

sempre que há alguma manipulação do DOM, como a inserção de um elemento DOM provocaria um refluxo e, provavelmente, seguido por um redesenho

A pintura de ação ocorre de forma assíncrona, para "disparar" deve ser entendido dessa forma. O seu primeiro código JavaScript irá terminar antes que realmente acontece.

se nós, de alguma forma, conseguem fazer uma manipulação do DOM dentro deste rAF (edit: e também a fila de outro rAF no final), que provoca um refluxo de cada vez e, assim, um redesenho, nós estaria preso em um loop infinito sem realmente prestação de nada na tela.

As necessidades para redesenhar se acumulam e não são de forma síncrona cumprida. Primeiro, o seu código tem a completar até a chamada pilha está vazia. Portanto, não há loop infinito aqui.

Ou é o caso que, uma vez que o navegador tinha decidido fazer um redesenho, ele vai ficar com ela e aplique todas as atualizações que aconteceu na RAF de retorno no redesenho próximo?

Sim. Quando a RAF de retorno de chamada é chamada, o código fica uma última chance de fazer atualizações para o DOM, que pode acumular-se mais com as necessidades para a pintura. Se no retorno de chamada você também registrar outro chamada de retorno no RAF, ele não será executado no momento, mas mais tarde: na próxima vez que o navegador irá preparar a sua tarefa de redesenhar -- então não é a atual.

Exemplo simplificado

Vamos dizer que você tem esse código:

requestAnimationFrame(update);

myElement.style.backgroundColor = "silver"; // This queues a need for repaint

function update() {
    // This queues a need for repaint
    myElement.style.width = Math.floor(Math.random() * 100) + "px";
    requestAnimationFrame(update);
}

Quando este executa, temos a seguinte seqüência:

1. update é registado como de chamada de retorno
2. O fundo de alteração de horários de uma necessidade de repintura
3. A pilha de chamadas, torna-se vazia
4. O navegador inicia sua redesenhar trabalho, mas leva em conta que há um retorno de chamada registrado. Então ele remove esse registro (porque ele deve ser executado somente uma vez) e executa update antes de fazer qualquer outra coisa.
5. A largura mudanças de horários de uma necessidade de repintura. A lista de alterações agora inclui a alteração do plano de fundo e este largura alterar e qualquer efeito cascata que tenha sido calculado. (Como isso é representado é um browser dependentes)
6. O update a função é registado como retorno de chamada novamente.
7. O navegador agora verifica o que ele precisa fazer, como parte deste trabalho de redesenhar e executa tudo o que é necessário para visualizar os efeitos do plano de fundo e as alterações de largura.
8. O trabalho de pintura termina. Tudo o que resta é registrado update de retorno de chamada.
9. Quando o navegador executa sua próxima pintura ciclo, comece novamente a partir do passo 4, mas agora não há fila de espera de fundo-alterar mais. Para o resto vai ser o mesmo processo.