面试题

Question

老师请问如果面试官问什么是虚拟DOM和diff算法，应该说些什么呀？
我的第一反映就是说:
" 由于DOM操作比较耗时，所以虚拟DOM技术的出现，减少了DOM的操作次数，提升了浏览器的性能。所谓的虚拟DOM就是使用JS对象来模拟DOM，当js程序中需要对DOM进行操作时，首先会修改虚拟DOM，然后通过diff算法对比新旧虚拟DOM，最终浏览器可以通过最少的DOM操作，完成页面的更新。
而diff算法就是虚拟DOM的核心，对比新旧DOM时，有三个原则：第一，只进行同一层级的虚拟DOM对比，不会跨级对比；第二、如果新旧虚拟DOM的标签不一样，那么直接不在进行深层次的对比，将来直接按照新的虚拟DOM进行渲染；第三、当新旧DOM的标签相同，并且key也相同的时候，那么则认为这两个虚拟DOM相同，不在对这两个虚拟DOM进行深层次的对比。也正是由于这三条原则，使得diff算法的时间复杂度为O（N）"

以上就是我对这个问题的解答，不知道这样回答行不行。还有，如果真要讲到源码层面的话，回答的使用怎么引出那些关键的API？

Answer 1

双越 2022-03-21 08:30:09

你这个样说没问题的。因为这个问题就是一个自由发挥的问题，他并没有问一个具体的问题点。

所以，你先大概说明 VDOM 和 diff 的概念，这样就可以了。如果面试官还有其他问题，那他会继续追问你的。

• 提问者 慕丝1117639 #1

  如果继续追问到源码层级，我只学了react，这个源码上面就知道一个React.createElement()创建vDOM，但是diff算法中的patch这个，是snabbdom中的API，那如果是追问详细讲一下diff算法，那我这时候应该咋说?

• 双越 回复 提问者 慕丝1117639 #2

  理想情况下，我们当然都希望自己学会所有的技能，然后去吊打面试官。所以，如果你时间允许的话，你可以去专门学习 React 或者 Vue 的源码，详细学习，肯定能学到很多细节。但如果你时间不允许，没学会 diff 算法的细节，你就可以很诚实的说不会细节，只知道流程。这其实没太大关系，如果你是面试官，你会只挑选哪些会算法细节的候选人吗？这样的人能有几个。