Diff究竟是怎麼更新的？這個小玩具將Diff的過程可視化了出來

原由

事情的原由是這樣的。以前12月參加了一場面試。面試官問我，當一個由數組的渲染的列表，當數組的首尾顛倒，DOM是如何變化的？

我當時回答的不是特別好，因此後來專門上網研究了一下。

網上有許多介紹diff算法的文章，可是一大坨文字配上大量源碼，讓人實在沒有看下去的慾望。因而乎，我作了這個小工具，但願你們能夠輕鬆瞭解Diff更新的過程。

如何展示

舊的dom

新的dom

這個工具會逐步將Diff更新的過程，可視化的展示出來

地址

• Diff Steps
• 源碼地址

實現原理

實現的原理很簡單，我本身動手實現了一個基於純js對象的diff算法（不須要映射到瀏覽器的dom），diff算法會將更新中的每個步驟的結果，保存到一個快照數組中，最後遍歷這個快照數組便可。

將來

• 添加動畫
• 可供網友自定義輸入新舊dom的功能