Algorithmes (animations)Fonctionne dans votre navigateurVérifié le 1 octobre 2026

Virtual DOM Diff (Keys) : animation

Virtual DOM Diff (Keys) : animation. Algorithmes animés pour le front-end : tri, recherche, debounce et throttle, boucle d’événements, DOM virtuel, caches, trie et recherche de chemin. Rapide, privé et facile à utiliser dans votre navigateur.

Localprivé par défautRapidesans inscription

Les commandes de l’outil ci-dessous sont pour l’instant en anglais.

Browser and DOMTime: O(n)Space: O(n)

List before (keys)List after (keys)Matching strategy

<ul>

DOM operations: 0

empty

Step 1 / 8

Each item has a key. React/Vue use keys to recognise the same item even when it moves, so unchanged DOM nodes are reused.

JavaScript

1function reconcileKeyed(oldList, newList) {
2  const oldPos = new Map(oldList.map((n, i) => [n.key, i]));
3  const newKeys = new Set(newList.map((n) => n.key));
4  let lastIndex = 0;
5  for (const next of newList) {
6    const i = oldPos.get(next.key);
7    if (i === undefined) insert(next);
8    else if (i < lastIndex) move(next);
9    else lastIndex = i;
10  }
11  for (const old of oldList) {
12    if (!newKeys.has(old.key)) remove(old);
13  }
14}

Tip: use the arrow keys to step and the space bar to play or pause.

Loading animation...