前端面试题 - 4. 虚拟Dom的原理是什么？

虚拟DOM

虚拟DOM，是一种编程策略。为了解决DOM操作引发的频繁重排重绘性能低，代码不易维护的问题，使用JS对象来模拟DOM及其上的操作，并通过DIFF算法等实现最新改动更新。

优点：

• 虚拟DOM具有批处理和高效的Diff算法
• JSX具有跨平台能力，借助babel可以编译为不同平台运行的代码。

缺点：

• 需要构建虚拟DOM，首次渲染性能慢

dom diff

• 理想的DOM diff需要O(n^3)。也就是两棵树的每个节点遍历一次，再进行增删又需要遍历一次。总的就是nnn
• 由于跨层级移动比较少，简化的DOM diff只需要按层比较。不一样就进行删除、添加和移动。时间复杂度变为O(n)。
  • vue实现
    • 从首尾两头向中间逼近，尽可能跳过首位相同的元素。新树多余的进行添加，老树多余的进行删除。减少元素的移动。
    • 如果都有剩余，那就需要用map记录老树的索引。然后遍历新树，用前面的map进行查找，没有就删除，存在的标记为0，其余的更新索引，然后按新的索引批量插入。
    • 其中都不同时进行移动可以使用保持最长子序列不变，其余节点移动。
  • React实现
    • 其他类似，移动的过程使用仅右移方案，在大部分从左往右移的业务场景中，得到了较好的性能。

参考资料：

1. 虚拟dom原理精读 zhuanlan.zhihu.com/p/362539108