04-26 笔记

虚拟 DOM 是什么? 有什么优缺点?

虚拟dom本质上就是 一个普通的JS对象,用于描述视图的界面结构 。
由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 所以在vue中将真实的DOM节点抽离成⼀个虚拟的DOM树,这个虚拟的DOM树就是虚拟DOM.

优点：

• 保证性能下限： 框架的虚拟 DOM 需要适配任何上层 API 可能产⽣的操作，它的⼀些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是⽐起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM ⾄少可以保证在你不需要⼿动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；
• ⽆需⼿动操作 DOM： 我们不再需要⼿动去操作DOM只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的⽅式更新视图，极⼤提⾼我们的开发效率；
• 跨平台： 虚拟 DOM 本质上是 JavaScript 对象,⽽ DOM 与平台强相关，相⽐之下虚拟 DOM 可以进⾏更⽅便地跨平台操作，例如服务器渲染、weex 开发等等。

缺点：

• ⽆法进⾏极致优化： 虽然虚拟 DOM + 合理的优化，⾜以应对绝⼤部分应⽤的性能需求，但在⼀些性能要求极⾼的应⽤中虚拟DOM ⽆法进⾏针对性的极致优化。
• ⾸次渲染⼤量 DOM 时，由于多了⼀层虚拟 DOM 的计算，会⽐ innerHTML 插⼊慢

Vue的diff算法原理是什么？

Vue的diff算法是平级⽐较，不考虑跨级⽐较的情况。内部采⽤深度递归的⽅式+双指针⽅式⽐较

• 先⽐较两个节点是不是相同节点
• 相同节点⽐较属性，复⽤⽼节点
• 先⽐较⼉⼦节点，考虑⽼节点和新节点⼉⼦的情况
• 优化⽐较：头头、尾尾、头尾、尾头
• ⽐对查找，进⾏复⽤