Por que requestAnimationFrame é melhor que setInterval ou setTimeout

Embora setInterval e setTimeout possam ser usados ​​para tarefas de animação, requestAnimationFrame é geralmente considerado uma escolha melhor por vários motivos.

1. Sincronização com taxa de atualização de exibição

requestAnimationFrame sincroniza seus retornos de chamada com a taxa de atualização de exibição do dispositivo, normalmente 60 Hz. Isso significa que a animação é atualizada em uma taxa de quadros consistente, eliminando instabilidade e instabilidade que podem ocorrer com setInterval ou setTimeout.

2. Consumo reduzido de recursos

setInterval e setTimeout chamam seus retornos de chamada em intervalos especificados, mesmo se o navegador não estiver renderizando ativamente. Isso pode levar ao uso desnecessário da CPU e ao consumo da bateria. requestAnimationFrame, por outro lado, só chama seu retorno de chamada quando o navegador está prestes a exibir um novo quadro, economizando recursos.

3. Experiência do usuário aprimorada

As animações desenvolvidas por requestAnimationFrame parecem mais suaves e responsivas em comparação com aquelas que usam setInterval ou setTimeout. Isso ocorre porque requestAnimationFrame leva em consideração a taxa de atualização do dispositivo e garante que a animação seja executada em um ritmo consistente e visualmente agradável.

4. A disponibilidade de Timestamp

requestAnimationFrame fornece um parâmetro de carimbo de data/hora para seu retorno de chamada, que representa o horário em que o quadro está programado para ser exibido. Esse carimbo de data/hora pode ser usado para calcular o tempo decorrido desde o quadro anterior, permitindo um controle de animação mais preciso e transições suaves.

5. A eliminação de cisalhamento e cintilação

requestAnimationFrame resolve problemas como cisalhamento (posições de animação incompatíveis) e cintilação (exibição de um quadro incompleto) que podem ocorrer com setInterval ou setTimeout. Isso ocorre porque ele agenda a renderização do próximo quadro somente quando o quadro atual tiver sido totalmente apresentado na tela.

Em resumo, requestAnimationFrame é a escolha preferida para tarefas de animação devido à sua sincronização com a taxa de atualização de exibição, reduzida consumo de recursos, experiência aprimorada do usuário, disponibilidade de carimbos de data/hora e eliminação de cisalhamento e oscilação.