Я читаю исходный код BluePrintJS и заметил, что они поместили логику изменения атрибутов элементов DOM в блок requestAnimationFrame. В чем разница между установкой атрибута DOM напрямую и через requestAnimationFrame?
private handlePopoverClosing = (node: HTMLElement) => {
// restore focus to saved element.
// timeout allows popover to begin closing and remove focus handlers beforehand.
requestAnimationFrame(() => {
if (this.previousFocusedElement !== undefined) {
this.previousFocusedElement.focus();
this.previousFocusedElement = undefined;
}
});
const { popoverProps = {} } = this.props;
Utils.safeInvoke(popoverProps.onClosing, node);
};



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Представление. requestAnimationFrame будет запущен в начале кадра рендеринга, что помогает с чем-то известным как макетирование.
Делая это, вы группируете все изменения DOM в один кадр, который выполняется сразу, вместо того, чтобы распределять логику рендеринга по нескольким кадрам, что дороже (работа с DOM не выполняется).
Общая идея состоит в том, что вы хотите сгруппировать записи DOM так, чтобы они происходили до чтения DOM, а не перемежали чтения между записями - rAF делает это, гарантируя, что запись происходит в определенное время с другими записями.