欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【前端知识体系-JS相关】虚拟DOM和Diff算法

程序员文章站 2022-05-22 20:07:45
介绍一下vdom?Snabbdom是虚拟DOM实现的一个基础库,通过该库可以构建一个虚拟DOM树,并高效地完成数据的同步和更新。 ......

1.介绍一下vdom?

  1. virtual dom, 虚拟dom
  2. 使用js来模拟dom结构
  3. dom变化的对比,放在js层来做(图灵完备语言),提高效率
  4. dom操作非常昂贵(消耗性能)

2.snabbdom的使用

var snabbdom = window.snabbdom;
// 定义patch
var patch = snabbdom.init([
    snabbdom_class,
    snabbdom_props,
    snabbdom_style,
    snabbdom_eventlisteners
])

// 定义h
var h = snabbdom.h;

var container = document.getelementbyid('container');
// 生成vnode
var vnode = h('ul#list', {}, [
    h('li.item', {}, 'item 1'),
    h('li.item', {}, 'item 2'),
]);

patch(container, vnode)


// 修改dom内容
document.getelementbyid('btn-change').addeventlistener('click', function () {
    // 生成newvnode
    var newvnode = h('ul#list', {}, [
        h('li.item', {}, 'item 1'),
        // dom节点中不同的地方
        h('li.item', {}, 'item b'),
        h('li.item', {}, 'item 3'),
    ]);
    patch(vnode, newvnode)
})

[!note]
核心api总结:

  1. h('', { 属性 }, [子元素])标签名称>
  2. h('', {属性}, ‘...’)标签名>
  3. patch(container, vnode)
  4. patch(vnode, newnode)

3.介绍一下diff算法?

3.1 diff算法是什么

  1. linux中: diff 文件1.txt 文件2.txt
  2. git中: git diff
  3. 在线比对工具

3.2 去繁就简

  1. diff算法实现非常复杂,实现难度很大,源码量很大
  2. 去繁就简,讲明白核心流程,不关心细节(非常高效的手段)
  3. 面试官也大部分不清楚细节,但是很关系核心流程的实现

3.3 vdom为何使用diff算法?

  1. dom操作是昂贵的,因此要尽量减少dom的操作
  2. 找出本次dom必须更新的节点来更新,其他的不更新
  3. 这个找出的过程,就需要使用diff算法(找出两个虚拟dom的差异)