简单几句话，知道啥是回流重绘、vue虚拟dom、diff算法和key

Posted 2023-03-13

参考技术A

1.什么是vue虚拟dom。先知道什么是dom树。
众所周知，一个页面形成的流程。（顺便聊一下回流和重绘）
（1） 解析 html===>生成DOM树
（2） 解析CSS===>生成CSSDOM树
（3） Render Tree ===> 从Dom树的根节点开始遍历每个可见的节点（因为这里面有display：none、scrpi等的，不被遍历。）
对于每个可见的节点，找到其对应的CSSDOM规则，并且应用。
生成Render Tree 。
fine，问题来了，什么是回流呢？就是在生成render Tree 的时候，有的CSS涉及到了HTML的尺寸（width/height）、布局改变、隐藏等。详细的可以去搜一下怎么会造成回流。<h3>所有的页面都至少会有一次回流，因为第一次生成render tree一定会回流</h3>
Render Tree生成后，layout（布局）就完成了开始绘制（添加属性，类似于颜色啊，大小啊之类的不会影响布局的属性）。如果说不出意外你不去改的话这辈子和个Render Tree就永远是这个树了。HTML页面就渲染结束了。
但是如果你想改。好嘛，我们就要开始判断你改的是什么了。如果说是影响布局的，那就是回流===>重绘
如果说你只想改个颜色啥的那就直接是重绘，没有回流。
<h3>杰伦：回流必然会带来重绘，但是重绘不一定会回流</h3>
关于如何优化，可以搜索回流和重绘
参考图：

好了，简单的理解了一些html解析和dom树的生成流程。就可以解释什么是虚拟dom了。
虚拟dom也还是那个dom。那为啥不用真实的dom呢？因为真实的DOM你一操作，它立马给你回流重绘，可能你有10个事件在等着干，一个个都要回流重绘一遍太影响性能了。
（高光打过来！）虚拟dom就站出来了。
虚拟dom：如果有10次更新dom的动作，虚拟dom不会立即操作dom，而是将这10次更新的内容储存起来，通过diff算法，把新的dom（vue刚构造的虚拟dom）和旧的dom（可能是页面上现在显示的真实的dom）进行对比。然后渲染对比完的DOM。
问题来了：什么是diff呢？这是一个算法，有兴趣的可以自己搜一下详细了解诶。我这里只是简单的介绍说这个东西就是 ：头头对比。肚子肚子对比。脚脚对比。同级对比，不会跨级对比。就是我的新头和我的旧头对比。我的新肚子和我的旧肚子对比。对比完了去页面上生成一个新的我。

上面提到了patch阶段，顺便说一下key diff算法会通过key可以判断这两个虚拟dom是不是同一个dom，所以我们key尽量都要写上，并且尽量不要使用索引作为key。可以使用 \'xx-index\' 方式写key。方便你我它~~

好了。本文over _{以上都是自己复习的时候总结的内容，如果有问题请留言} Thanks♪(･ω･)ﾉ