html-next/smoke-and-mirrors

[META] `vertical-collection` DOM Recycling

runspired opened this issue · 3 comments

runspired commented

Note: See #98 for Implementation Progress

The vertical-collection is currently fast enough that the initial render improvements in glimmer 2 should put an end to any noticeable lags.

Even still, we always want to push faster and support more features such as #52 (dynamic height insertions).

This ticket is a ROADMAP that takes the collection through 3 internal revisions.

Revision 1

  • Fix issue with <pre-render> returning parent dimensions instead of child dimensions.
  • Allow <pre-render> to accept a style object to render into instead of requiring an explicit parent.
  • Allow <pre-render> to pre-render multiple items at once.
  • Pre-render items in the collection (#52).
  • Adjust the scroll position as necessary when inserting an item to preserve scroll position.
  • Ensure that margin is accounted for in a vertical-item's Geography

Revision 2

  • Create a virtual-item
    • A virtual item needs a model property
    • A virtual item needs Geography
    • A virtual item should act as a Satellite
    • A virtual item needs it's index
  • Cycle through virtual-item instead of vertical-item, will require linking the two

Revision 3

  • Replace (most) vertical-items with virtual-items only
    • vertical-item should not output DOM within the collection, but essentially be a tagless pre-render.
    • The collection should only add vertical-items for virtual-items that are on screen.
    • The collection should add a padding div above and below the vertical-items to match the height of remaining virtual-items
  • Ensure we reuse existing vertical-items where possible, but don't rely on pre-calculating the number needed, just use what we have + create new / remove if more items become visible than we had before.
mrinterweb commented

I'm excited for DOM recycling. An instance where DOM recycling would be helpful, such as is my case, is where you are loading images from server that does not have expiration headers set correctly and so the web browser is trying to rerequest the images in the list as the list is scrolled back and forth.

I am not familiar with the terms Geography and Satellite in this context. Is Geography data about where in the list the DOM node should exist, and Satellite that these DOM nodes should be off screen?

runspired commented

Satellite: https://github.com/runspired/smoke-and-mirrors/blob/master/addon/models/satellite.js
Geography: https://github.com/runspired/smoke-and-mirrors/blob/master/addon/models/geography.js

A write up of the analogy in use is going to happen once I fix one of the terminology issues (sky and skyline need reversed from what they currently are in Radar).

The TL;DR version is that Geography is an element's position and dimensions, cached in a manner that they can be manipulated without new calls to getBoundingClientRect. A Satellite is an object with Geography that is being tracked by Radar

mrinterweb commented

Good use of metaphor.