Reducing 'forced reflow' / client-side render time of massive pages ('JIT' sectionals)

Not going to lie, this is going into the woods and browsers should natively do something equivalent... ugh!

Currently when a user switches to a DOM heavy page, a warning appears in console:

[Violation] Forced reflow while executing JavaScript took n ms.

Guestimated approach

  1. Section by 'natural' breaks in content - headers (H1, H2 ...), section, article, ...
  2. Pre-calculate all content height somehow without interrupting client/view. Guestimate? (gross). Tricky for remote items, maybe pre-calc as part of build?
  3. Render in-view first, then prev/next (toggle display and/or other related CSS props)
  4. Render upcoming on demand, maintain scroll bar sizing.

Other solutions / alternatives

I'm not a proponent for virtual DOM under most circumstances... however this type of off-screen optimization is brilliant for large lists/tables. Or one could just do standard pagination and it would work just as well, if not better?

Edited by Lorin Halpert