虚拟DOM以及diff算法

1、什么是虚拟DOM：

虚拟dom是一种用于提成web应用性能的技术，最初由react引入，现已被多种前端框架（vue,preact等）采用，它的核心思想是通过一个轻量级的JavaScript对象(虚拟树也叫AST抽象语法树)，来模拟真是的DOM结构，并在数据变化时，高效的更新DOM。

  • 虚拟DOM是一个JavaScript对象。
    它是对真是DOM的抽象表示，包含标签（tag），属性（props）， 子节点（children）等信息。
// 真实 DOM
<div id="app"><h1>Hello</h1></div>

// 对应的虚拟 DOM
{
 tag: 'div',
 props: { id: 'app' },
 children: [{ tag: 'h1', children: 'Hello' }]
}

2、diff算法

  • 层级比较
    同层级比较
    递归子树比较
    节点属性比较
    元素类型比较
  • key的作用
    提升比较效率
    形成复用

算法时间复杂度O(n)

3、面试回答术语：

虚拟DOM解决dom 频繁 reflow问题
diff算法解决复用和操作问题

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容