The diff algorithm

I. Traditional DIFF algorithm [DiFF algorithm in virtual DOM]

Find the difference between each node of the two trees

2. Snbbdom: The traditional DIFF algorithm is optimized according to the characteristics of DOM

1. DOM manipulation rarely involves cross-level manipulation of nodes

2. Compare nodes at the same level only

3. Snbbdom execution process: There are four cases in total when comparing the start and end nodes

1, oldStartVnode/newStartVnode (old start node/new start node)

If the old and new start nodes are sameVnode(same key and sel[tag])- call patchVnode() to compare and update the node and move the old and new start indexes oldStartIdx++ /oldEndIdx++ back

OldEndVnode /newEndVnode (old end node/new end node)

Same usage as (old start node/new start node)

3, oldStartVnode/newEndVnode (old start node/new end node)

1. Call patchVnode() to compare and update node 2 and move the DOM element corresponding to oldStartVnode to the right to update the index

4, oldEndVnode/newStartVnode (old/new start end node)

1. Call patchVnode() to compare and update node 2 and move the DOM element corresponding to oldEndVnode to the left to update the index

5, not the above four cases

6. End of loop

1, the loop ends when all children of the old node are traversed first (oldStartIdx >oldEndIdx)

If the array of the old node is traversed first, insert the remaining nodes to the right in batches.

2, all bytes of the new node are traversed first (newStartIdx > newEndIdx), and the loop ends

If the array of the new node is traversed first [Indicates that the old node has surplus, delete the remaining nodes in batches]

Key is used to compare whether vNodes are the same

If not set, the same elements will be reused, resulting in rendering errors