前端面试（四）vdom（virtual dom）

什么是vdom,为何要用vdom

• 什么是vdom

（1）virtual dom , 虚拟DOM

（2）用JS模拟DOM结构

（3）DOM变化的对比，放在JS层来做（JS是图灵完备的语言，能实现算法、递归等）

（4）提高重绘性能

// 实际DOM 结构
"list">
    
"item">item 1
    
"item">item 2


// JS虚拟DOM 
{
  tag: 'ul',
  attrs: {
    id: 'list'
  },
  children: [
    {
      tag: 'li',
      attrs: { className: 'item' },
      children: ['Item 1']
    }, {
      tag: 'li',
      attrs: { className: 'item' },
      children: ['Item 2']
    }
  ]
}复制代码

• 设计一个需求场景

    "UTF-8">
    


    
"container">
    "btn-change">change

    
    

复制代码

• 用jQuery实现
• 遇到的问题

（1）DOM操作是“昂贵的”， js运行效率高

（2）尽量减少DOM操作，而不是“推到重来”

（3）项目越复杂，影响就月严重

（4）vdom

vdom如何使用，核心函数有哪些

• snabbdom
• 重做之前的dom
• 核心API

diff算法

• 什么是diff算法
• 去繁就简
• vdom为何用diff算法
• diff算法的核心流程