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/
这次的内容大致就是这么多了！今天又是发现新大陆的一天！加油！
