Vue之虚拟Dom和Diff算法

webkit渲染引擎工作流程

二、JS操作真实DOM的代价！

用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。

三、为什么需要虚拟DOM，它有什么好处?

Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

四、实现虚拟DOM

虚拟Dom就是用js模拟Dom节点，用有规律的写法去编写代码。

真实DOM

虚拟DOM

五、替换真实Dom

虚拟的dom模拟好以后，就需要去替换真实的dom节点了，那么它是如何去替换的呢？接下来就向大家隆重介绍Diff算法啦！

六、Virtual DOM Diff算法

算法规则

1 步骤一：用JS对象模拟DOM树
2 步骤二：比较两棵虚拟DOM树的差异（切记切记切记：一层一层比）
3 步骤三：把差异应用到真正的DOM树上
4 步骤四：在页面展示

key值的重要性

无key值的替换

有key值的替换

有key值的插入

总结

遍历数据时候要绑定唯一key值 提升性能

【详情参考】https://cn.vuejs.org/

这次的内容大致就是这么多了！今天又是发现新大陆的一天！加油！

文章均来自互联网如有不妥请联系作者删除QQ:314111741 地址：http://www.mqs.net/post/15039.html