Perf(renderer): Cache binding plan per-AST#223
Conversation
Hoist the per-clone marker-discovery work in `bindMarkers` onto the
existing `buildStringCache` WeakMap. First call walks the cloned
fragment once, records a plan of `{kind, nodeIndex, ...payload}`
entries in walker order, dispatches the bindings, and caches the plan;
later calls replay it against a fresh clone — no per-attribute string
scan, no per-comment marker-text re-parse, no `processedAttrIDs` Set,
no `commentsToProcess` array. lit-html `Template.parts` /
`TemplateInstance._clone` pattern, adapted to SUI's marker layout.
Closes the long-standing asymmetry where `entry.attributeParts` is
already precomputed at build time but the render path was rebuilding it
per clone.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🟡 Mixed (mostly faster) for
|
| metric | Improvement |
|---|---|
renderer-micros:dom-walker-1000x15 |
-30% (15ms) ⭐ |
krausest:remove-row-middle-20 |
-26% (2ms) ⭐ |
krausest:remove-row-front-20 |
-19% (2ms) ⭐ |
krausest:append-1k |
-18% (19ms) ⭐ |
krausest:replace-1k |
-15% (16ms) ⭐ |
krausest:update-10th-50 |
-10% (3ms) |
krausest:create-10k |
-10% (76ms) |
krausest:create-1k |
-9% (8ms) |
krausest:swap-rows-20 |
-6% (1ms) |
krausest:clear-10k |
-6% (4ms) |
todo:bulk-add-500 |
-6% (13ms) |
todo:filter-cycle-20 |
-6% (11ms) |
hydrate:each-100 |
-5% (5ms) |
todo:add-20 |
-4% (0ms) |
template:subtemplate-helpers-heavy-100x500 |
-3% (1ms) |
❌ Slower (3)
Metrics where this PR confidently regressed performance compared to main.
| metric | Regression |
|---|---|
todo:remove-middle-100 |
+12% (1ms) |
todo:remove-last-100 |
+9% (1ms) |
todo:remove-first-100 |
+7% (1ms) |
📜 Regressions from peak (8)
These metrics were faster on an earlier push to this PR. The most recent candidate is usually where to look.
| metric | regression | prior peak | likely candidates |
|---|---|---|---|
todo:clear-completed-250 |
16% | 2dbd69b |
59ac334, 4a4233f |
krausest:create-1k |
10% | 56712c5 |
59ac334, 4a4233f, 2dbd69b |
todo:remove-middle-100 |
10% | 56712c5 |
59ac334, 4a4233f, 2dbd69b |
todo:add-20 |
6% | 56712c5 |
59ac334, 4a4233f, 2dbd69b |
todo:remove-50-front |
6% | 56712c5 |
59ac334, 4a4233f, 2dbd69b |
template:each-mount-1000 |
5% | 56712c5 |
59ac334, 4a4233f, 2dbd69b |
renderer-micros:dom-walker-1000x15 |
4% | 2dbd69b |
59ac334, 4a4233f |
krausest:replace-1k |
3% | 2dbd69b |
59ac334, 4a4233f |
⚪ No Change (10)
Metrics where this PR measured within ±2% of main — no meaningful performance change detected.
| metric | Change |
|---|---|
renderer-micros:build-html-string-10k |
-1.6% – +0.8% |
hydrate:each-100-mount |
-0.5% – +0.8% |
template:each-mount-1000 |
-1.9% – -0.1% |
renderer-micros:expr-js-10k |
-0.9% – +1.7% |
renderer-micros:expr-lisp-50k |
-1.3% – +0.7% |
renderer-micros:expr-simple-100k |
-0.2% – +1.9% |
template:subtemplate-data-blob-100 |
-1.5% – +0.3% |
template:subtemplate-reactive-data-100x500 |
-0.8% – +1.8% |
template:subtemplate-shorthand-props-100x500 |
-0.8% – +1.9% |
todo:toggle-all-200 |
-0.9% – +0.9% |
🔍 Unsure (21)
Too Fast to Measure Precisely (21)
On benches this short, OS jitter, GC, and JIT pauses drown out anything under 4%. Bigger changes than that still show up.
| metric | Change | Test Time | Expected Noise |
|---|---|---|---|
template:active-indicator-200 |
-2.8% – +2.4% | ~36ms | ±8% |
template:active-indicator-nested-200 |
-3.6% – +1.9% | ~20ms | ±8% |
todo:clear-completed-250 |
-2.1% – +0.7% | ~40ms | ±4% |
todo:edit-cycle-5 |
-0.6% – +2.6% | ~54ms | ±4% |
todo:edit-start-10 |
-2.0% – -0.1% | ~57ms | ±2% |
hydrate:helper-100-mount |
-2.2% – -0.2% | ~46ms | ±6% |
hydrate:helper-100-state-change-1k |
-1.5% – +2.3% | ~3ms | ±9% |
todo:remove-50-back |
-8.3% – -1.7% | ~4ms | ±4% |
todo:remove-50-front |
-0.3% – +5.9% | ~5ms | ±5% |
todo:remove-50-middle |
-11.5% – -1.3% | ~6ms | ±10% |
krausest:remove-row-back-100 |
-6.0% – +1.0% | ~24ms | ±9% |
todo:rename-500 |
-6.7% – +0.6% | ~15ms | ±10% |
krausest:select-40 |
-3.4% – -1.6% | ~51ms | ±2% |
template:snippet-args-per-key-100x500 |
-0.8% – +2.2% | ~34ms | ±5% |
template:snippet-in-subtemplate-100x1k |
-2.9% – +1.8% | ~23ms | ±7% |
template:stable-ref-mutate-500 |
-3.8% – +2.1% | ~14ms | ±9% |
template:subtemplate-helpers-light-100x500 |
-2.1% – +0.1% | ~73ms | ±4% |
todo:toggle-100 |
-5.0% – +2.6% | ~9ms | ±9% |
todo:toggle-first-100 |
-6.9% – +0.1% | ~9ms | ±10% |
todo:toggle-last-100 |
+1.8% – +7.5% | ~9ms | ±7% |
todo:toggle-middle-100 |
-0.7% – +2.9% | ~7ms | ±4% |
📖 Bench glossary (49 metrics)
| metric | what it tests |
|---|---|
hydrate:each-100 |
Reassigns the items of a hydrated 1000-item list to a fresh array with the same keys and data. |
hydrate:each-100-mount |
Hydrates a server-rendered 1000-item list and waits for it to become interactive without re-rendering. |
hydrate:helper-100-mount |
Hydrates a 1000-item list where each item calls a helper that reads state shared across the list. |
hydrate:helper-100-state-change-1k |
Walks the shared activeID across every item in a hydrated 1000-item list so two items repaint per cycle. |
krausest:append-1k |
Appends 1000 new rows onto an existing 1000-row table. |
krausest:clear-10k |
Clears a 10000-row table back to empty in a single operation. |
krausest:create-10k |
Renders a fresh 10000-row table into an empty parent at ten times the create-1k scale. |
krausest:create-1k |
Renders a fresh 1000-row table into an empty parent. |
krausest:remove-row-back-100 |
Removes the last row 100 times from a 1000-row table, with no other rows needing to move. |
krausest:remove-row-front-20 |
Removes the first row 20 times from a 1000-row table, with all remaining rows sliding up each time. |
krausest:remove-row-middle-20 |
Removes the middle row 20 times from a 1000-row table, with the rows below it sliding up each time. |
krausest:replace-1k |
Replaces 1000 rows with a fresh 1000-row set, diffing the keyed list against a populated table. |
krausest:select-40 |
Highlights one row at a time across 40 rows so only the previous and newly highlighted rows update. |
krausest:swap-rows-20 |
Swaps the second and second-to-last rows in a 1000-row table, repeated 20 times. |
krausest:update-10th-50 |
Updates the label on every tenth row of a 1000-row table, looped 50 times to lift the work above noise. |
renderer-micros:build-html-string-10k |
Builds the HTML string for a realistic card AST 10000 times. Raw assembly throughput. |
renderer-micros:dom-walker-1000x15 |
Runs bindMarkers across a 1000-node card fragment 15 times. TreeWalker pass and binding dispatch. |
renderer-micros:expr-js-10k |
Evaluates one arithmetic expression and one ternary 10000 times each. JS-eval hot path. |
renderer-micros:expr-lisp-50k |
Evaluates one Lisp-style helper call 50000 times. Parse-cache lookup and helper dispatch. |
renderer-micros:expr-simple-100k |
Evaluates one simple identifier and one dotted path 100000 times each. Property-lookup hot path. |
template:active-indicator-200 |
Cycles selectedId across 200 list items. Only the previously and newly active items update their class. |
template:active-indicator-nested-200 |
Cycles currentUrl through 50 leaf urls in a 5×10×4 nav. Only the previously and newly active leaves should update their… |
template:each-mount-1000 |
Mounts a fresh 1000-item each block with five-field items so per-record allocation cost dominates the wall clock. |
template:snippet-args-per-key-100x500 |
Mutates one snippet arg's source across 100 invocations, 500 cycles. Adjacent no-signal expressions stay quiet. |
template:snippet-in-subtemplate-100x1k |
Mutates one subtemplate prop's source across 25 cards each invoking 4 inner snippets, 1000 cycles. Snippet bodies shoul… |
template:stable-ref-mutate-500 |
Replaces one item by index in a 500-item list across 100 cycles. Only that item's expressions re-render. |
template:subtemplate-data-blob-100 |
Mutates one field inside data=expression on 100 children. Every child re-renders by design. |
template:subtemplate-helpers-heavy-100x500 |
100 subtemplates, 4 inner bindings where three call helpers shaped like userland reality — Intl.NumberFormat, Array.fin… |
template:subtemplate-helpers-light-100x500 |
100 subtemplates, 4 inner bindings each calling formatDate / classIf / capitalize, 500 cycles. Mutates one source signa… |
template:subtemplate-reactive-data-100x500 |
Mutates one verbose reactiveData field across 100 child subtemplates, 500 cycles. Only the changed field re-evaluates. |
template:subtemplate-shorthand-props-100x500 |
Mutates one shorthand prop's source across 100 child subtemplates, 500 cycles. Only that prop re-evaluates. |
todo:add-20 |
Appends 20 todo items one at a time, like a user typing entries in a row. |
todo:bulk-add-500 |
Renders 500 todo items added at once from a single data load. |
todo:clear-completed-250 |
Clears 250 completed items from a 500-item list in one action, like clicking clear completed. |
todo:edit-cycle-5 |
Runs 5 full edit-then-save cycles on different items, like editing a row and saving it. |
todo:edit-start-10 |
Enters edit mode on 10 different items in a row, like double-clicking each one. |
todo:filter-cycle-20 |
Cycles through active, completed, and all filters 20 times on a 100-item list. |
todo:remove-50-back |
Deletes 50 items from the end of a 100-item list, one click at a time. |
todo:remove-50-front |
Deletes 50 items from the front of a 100-item list, one click at a time. |
todo:remove-50-middle |
Deletes 50 items from the middle of a 100-item list, one click at a time. |
todo:remove-first-100 |
Deletes the first item 100 times from a 200-item list, with remaining items moving up each time. |
todo:remove-last-100 |
Deletes the last item 100 times from a 200-item list, with no other items needing to move. |
todo:remove-middle-100 |
Deletes the middle item 100 times from a 200-item list, walking halfway through to find each target. |
todo:rename-500 |
Renames items in a 100-item list 500 times via single-field setProperty without editingId co-fires. |
todo:toggle-100 |
Cycles through the first 10 items 10 times each, like a user toggling items repeatedly down a list. |
todo:toggle-all-200 |
Toggles all 100 items completed and back across 200 cycles via the master checkbox. |
todo:toggle-first-100 |
Toggles the first item in a 100-item list 100 times, alternating completed on and off. |
todo:toggle-last-100 |
Toggles the last item in a 100-item list 100 times, alternating completed on and off. |
todo:toggle-middle-100 |
Toggles a middle item in a 100-item list 100 times, alternating completed on and off. |
Sample size: 80 floor / 270 max · Noise floor: ±2% · Timeout: 3min · Wall-clock: 10m19s
This improves performance on binding for the n+1 case by recording a plan and then replaying it.
The plan kicks in on the second replay, as recording a binding plan is actually slower than just binding blindly, so we skip it on first render of a subtree.