Clarification - how does overscan reduce DOM operations?

[omriyariv]

Is it my understanding from reading the code that overscan will "align" the {startIndex, endIndex} to modulo overscan. However, I can't really see how this reduces any work in the DOM - if a continuous scroll operation results in adding 10 rows, sync mode would add them one by one (in the worst case) and overscan mode would add something like 10 rows in one operations. That sounds to me like the same "amortized" amount of work. Could you please elaborate on why this approach is more performant in terms of DOM operations?

Note: I do see an obvious perf optimization in not reconciling the entire visible viewport on each scroll event - but if I understand it correctly that is only VDOM work.

[developit]

Each time the DOM is mutated, the browser has to perform relayout (an is expensive operation). Overscroll pays a slightly higher relayout cost due to rendering more rows, but pays that cost much less often when scrolling. This allows the main thread and compositor breathing room when scrolling, rather than triggering relayout on every pixel scroll offset change.