Event Delegation & DOM Performance

Compare per-node listeners vs one delegated handler, then measure DOM batching and layout thrashing with live timing.

1 — Event delegation

Direct listeners

one per item

Delegated listeners

on parent only

List items

DOM nodes

Last click

—

handler fired

Direct listeners 0 listeners

Each row has its own click listener — memory grows with N.

Delegated (closest) 1 listener

One listener on parent; new rows work without rebinding.

Nodes to insert

500

Naive append

—

ms (one-by-one)

Fragment + rAF

—

ms (batched)

Speedup

—

batch vs naive

— ms

appendChild in loop; browser may layout after each insert.

— ms

Build DocumentFragment, append once inside requestAnimationFrame.

— ms

Read getBoundingClientRect + write in same loop (forced sync layout).