fw-05 step 01 — VNode renderer and keyed diff, measured

Goal

Build the renderer, then measure the algorithmic difference between naive and optimal keyed diffing rather than accepting it.

Tasks

  1. VNodes and h(); render(vnode, container) for mount.
  2. patch(oldVNode, newVNode): props, attributes, events, children.
  3. Naive keyed diff: map old children by key, move as needed. Measure DOM operations on a full reversal of 200 items.
  4. Two-ended diff, then the longest-increasing-subsequence approach for the unmatched middle. Measure the same reversal.
  5. Explain the LIS insight: after key matching, elements already in relative order need no move; the LIS is the largest set you can leave alone.
  6. Decide honestly when the complexity is worth it — and when it is noise.

Done when

  • DOM-move counts for naive vs two-ended vs LIS on the same reorder
  • The LIS insight stated in your own words
  • A judgement recorded about when to bother