The cause of

How does the DOM change when a list is rendered by an array, when the array ends upside down?

I didn’t answer that well, so I did some research on the Internet.

There are many articles on the Internet to introduce the Diff algorithm, but a large pile of text with a large amount of source code, so that people really do not want to see. So, I created this little tool to make it easy for you to follow the Diff update process.

How to show

The old dom

The new dom

This tool will gradually visualize the process of Diff updates

address

  • Diff Steps
  • The source address

Realize the principle of

The implementation principle is very simple, I started to implement a pure JS object based diff algorithm (do not need to map to the browser DOM), the diFF algorithm will update the results of each step, save to a snapshot array, the last traversal of the snapshot array.

In the future

  • Add animation
  • For users to customize the new and old DOM input function