Diff 算法全套面试题（真实面试向+通俗易懂答案）.docxVIP

Diff算法全套面试题（真实面试向+通俗易懂答案）

适用框架：Vue2、Vue3、React；难度分层：基础题、进阶题、深挖原理题、实战场景题，所有答案摒弃书面化套话，贴合面试口述风格

一、基础必考（初级前端必问）

1、为什么前端需要Diff算法？直接暴力更新DOM不行吗？

参考答案：

直接操作原生DOM的开销是很大的。浏览器渲染DOM，不只是单纯创建标签，还要做样式计算、布局重排、重绘一系列操作。

如果数据更新后，我们直接把旧DOM全部删掉、重新渲染新DOM，会出现两个严重问题：

第一，很多DOM节点内容根本没变化，无意义的删除和重建，浪费浏览器性能；

第二，DOM节点上绑定的事件、用户输入的表单值、焦点状态这类额外数据，会直接丢失，体验很差。

Diff算法的核心作用就是：对比新旧两份虚拟DOM，精准找出真正发生变化的节点，只更新变动的部分，最大限度复用原有DOM，减少DOM操作次数，从而提升页面渲染性能。

2、简单说下什么是虚拟DOM？Diff和虚拟DOM是什么关系？

参考答案：

虚拟DOM本质就是一个普通JS对象，用来描述真实DOM的结构，包含节点标签、属性、子节点、文本内容这些信息。相比于真实DOM，虚拟DOM没有浏览器内置的大量冗余属性，创建和对比的成本极低。

两者关系可以直白理解：

1.数据更新后，框架会生成全新的新虚拟DOM；

2.Diff算法是一套