Diff algorithm in virtual DOM

Xiaobai Mengjiu 2021-09-15 09:08:59

fictitious Dom It is made by ordinary people JS Object to describe DOM object

  • fictitious DOM You can maintain the status of the program , Track last status
  • Update the real status by comparing the difference between the two previous status DOM

fictitious DOM The role and Virtual Library

effect :

  • Maintain the relationship between state and view

  • Improve rendering performance in complex views

  • Cross platform

    • Browser platform rendering DOM
    • Server rendering SSR(Nuxt.js/Next.js)
    • Native applications (Weex/ReactNative)
    • Applet (mpvue/uniapp)

fictitious DOM Medium diff Algorithm

  • Find the difference between each node of the two trees

  • Snabbdom Yes diff Algorithm optimization

    • DOM When operating, it is rare to operate nodes across levels

    • Only compare nodes of the same level

    • Execution process

      • oldStartVnode/newStartVnode( The old start node / New start node )
      • oldEndVnode/newEndVnode( Old end node / New end node )
      • oldStartVnode/newEndVnode( The old start node / New end node )
      • oldEndVnode/newStartVnode( Old end node / New start node )

The old start node / New start node if the old and new nodes are sameVnode(key and sel identical )

  • call patchVnode() Compare and update nodes
  • Move the old start and the new start back oldStartIdx++/oldEndIdx++

Old end node / New end node if the old and new nodes are not sameVnode, Will compare from back to front , Compare whether the old end node and the new end node are sameVnode

  • call patchVnode() Compare and update nodes
  • Move the old end and the new end forward oldStartIdx--/oldEndIdx--

yes sameVnode call patchVnode() Compare the difference between the two nodes ( Text content / Subelement ), Update reality dom

yes sameVnode The corresponding of the old node will be reused dom Elements , Text content / Child elements do not dom operation ,

The old start node / The new end node is sameVnode

  • call patchVnode() Compare and update nodes
  • hold oldStartVnode Corresponding dom Elements , Move to the right , Update index

Old end node / The new start node is sameVnode

  • call patchVnode() Compare and update nodes
  • hold oldEndVnode Corresponding dom Elements , Move to the left , Update index oldEndIdx--/newStartIdx++

Are not satisfied , Find out whether there are the same nodes in turn

  • Traverse the new start node to find whether there are the same nodes in the old node array key The value of the node , If a new start node cannot be found, it is a new node , establish dom Insert the element to the front
  • find key Same value nodes , Judge sel Are they the same? , Different creation dom Insert the element to the front , The same node is assigned to elemToMove,
  • call patchVnode() Compare and update nodes
  • elemToMove Corresponding dom Move the element to the front

The loop ends

  • When the old child node traverses first (oldStartIdx>oldEndIdx)

    • It indicates that the new node has remaining , Insert the remaining nodes in batch to the right
  • When the new child node traverses first (newStartIdx>newEndIdx)

    • It indicates that the old node has a surplus , Delete the remaining nodes in batch
Please bring the original link to reprint ,thank
Similar articles

2021-09-15

2021-09-15