前端Diff算法面试题及详细答案（真实面试版）.docxVIP

前端Diff算法面试题及详细答案（真实面试版）

一、基础认知题（必问入门）

1.说说你对Diff算法的理解？它解决了什么问题？

答案：

前端页面渲染中，数据更新后如果直接清空DOM重新渲染，性能开销极大，DOM操作是浏览器最耗性能的操作。

Diff算法是Vue/React等框架的虚拟DOM对比策略。核心作用是：对比新旧虚拟DOM树的差异，只更新真实DOM变化的部分，不改动无变化的DOM，最大限度减少DOM操作。

简单说：不重新渲染整个页面，只改变了的地方，大幅提升页面更新性能。

2.什么是虚拟DOM？为什么Diff要基于虚拟DOM做？

答案：

虚拟DOM就是用JS对象来描述真实DOM的结构、属性、内容，是真实DOM的内存映射。

优势：

JS操作对象速度极快，比操作真实DOM快几个数量级

可以完整对比前后状态差异，精准定位修改点

实现跨平台，可渲染到浏览器、小程序、SSR等场景

Diff不能直接操作真实DOM，就是因为真实DOM属性太多、太重，对比成本极高，虚拟DOM轻量化，适合做差异对比。

3.Diff算法的对比策略是什么？为什么不是逐层全量递归对比？

答案：

框架Diff采用同层对比策略：只对比同一层级的节点，不会跨层级对比。

原因：

前端页面的DOM结构，层级变动概率极低，大部分更新都是同层级节点的增删改、内容、属性变化。如果进行全量树递归对比，时间复杂度是O(n3)，