直接和通过requestAnimationFrame设置DOM属性之间有什么区别？

Question

我正在阅读BluePrintJS源代码，并注意到它们将DOM元素属性更改逻辑放在requestAnimationFrame块中。直接或通过requestAnimationFrame设置DOM属性有什么区别？

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);
};

Answer 1

性能。 requestAnimationFrame将在渲染帧开始时运行，这有助于解决layout thrashing。

通过这样做，您可以将所有DOM更改分组到一个框架中，该框架可以一次完成，而不是将渲染逻辑分布在多个框架中，这更加昂贵（DOM工作很繁琐）。

通常的想法是，您希望对DOM写入进行分组，使其发生在DOM读取之前，而不是在写入之间散布读取-rAF通过确保写入在特定时间与其他写入一起发生来实现。