持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第6 天,点击查看活动详情
上一章中,我们提到了基本的双端比较算法的基本原理,现在我们看看它与简单diff相比有什么优势。
其实在之前的举的例子里,我们已经能发现双端比较算法比之前的简单diff算法效率高很多,但是究竟怎么高的,我们还可以再总结一下
- 简单diff算法
这个算法的思路比较简单粗暴,就是正着对比一遍,反正对比一遍,新节点对比一遍,旧节点对比一遍。在具体实现中,可以使用find,或者findIndex简化循环,但实际上循环一次没少。这种方法就是理解简单,循环次数多。
它最大的问题就是循环遍历次多,dom移动次数多,但是肯定比你清空innerHTML效率高,因此这种思路也不是不能用。
- 双端比较
双端的比较的思路,其实是把数组或者队列两头放置一个指针,然后两边同时遍历,随着遍历,两个指针会同时向内,然后当两个指针重合的时候,并且尾指针大于头指针的时候,表示对列表的遍历结束。我们可以同时遍历新节点列表和旧节点列表,进一步减少遍历的次数,同时也减少了dom移动的次数。
但是这种算法也有它自己的问题,首先,它需要定义2个变量,去存放头和尾的下表,同时遍历2个数组的话,我们就需要保存4个变量,这样会不会更占用空间呢?
其次,他的复杂度会也会更高,如果你同时对比4个队列呢?那代码量绝对杠杠的。
所以,这两种算法更有千秋,当我们使用比较简单的比较时,我们就可以直接使用简单对比算法,当我们对效率有要求的话,那么可以继续使用双端对比。但实际上,这两种都是比较的基础的diff算法,如果有兴趣的可以继续深入一下