在 React 16 版本之前,Virtual DOM 的对比是通过递归实现,如果组件树嵌套很深,那性能势必降低;React 16 之后,推出 Fiber 架构,虽然省不掉必要的 render,但把递归 Diff 改为可打断的循环,并且花费精力解决任务优先级调度问题,优化了用户体验。
Virtual DOM 还有个最大的问题——额外的内存占用,以 Vue 的 Virtual DOM 对象为例,100W 个空的 Virtual DOM(Vue) 会占用 110M 内存。
我认为最重要的问题是组件状态到页面元素是有映射关系的,而是用 Virtual DOM 则丢失了这个映射关系,需要 DOM Diff 来重新构建这个关系,纯粹是多余的消耗(Pure Overhead)。