feer.cc

V1

2022/11/14阅读:18主题:全栈蓝

虚拟dom是什么?「前端每日一题v22.11.14」

虚拟dom是什么?「前端每日一题v22.11.14」

什么是虚拟dom

虚拟dom这个词大家都不陌生,对于习惯使用框架的我们来说,Vue和React当中都有对于虚拟dom的使用和说明。经常会有面试官问你,虚拟dom是什么,有什么优势,为什么会存在虚拟dom

虚拟dom实际是真实dom的映射,真实的dom就是平时存在于浏览器当中的dom节点。虚拟dom本质来说是一个js对象,包含了type(组件还是元素)style,class,children,data等,树的形式不断延伸

为什么要有虚拟dom

在虚拟dom出现之前,我们是如何更新我们的页面的呢?在jquery那个年代,更新dom的操作基本上就是替换,把旧的dom替换成更新后的dom,基本上就完成了交互,但是这个过程也比较繁琐,比如我们必须要先找到对应的dom,然后写新的dom,然后再替换

人们就在想有没有什么好的方式,就是只要我们的数据变化了,那dom自然就变化了,答案是肯定的,那就是后面出现的模版引擎,学过服务端的同学对模版引擎有所了解,模版引擎开了个好头,让我们只关注于数据的变化,但是模版引擎并没有dom的对比操作,比如我想渲染一个列表,那模版引擎就会替换整个列表,不管是不是列表当中就一个字段发生变换

这种操作无疑是非常耗费性能的

于是,就有大神们想要优化这种操作,如何优化,就是想要在更新dom这个环节

对比一下模版引擎和虚拟dom的更新区别

模板引擎:数据 + 模板 --> 直接渲染为真实 DOM --> 挂载至页面

虚拟dom:数据 + 模板 --> 虚拟DOM --> 真实DOM --> 挂载至页面

既然操作大量的dom非常消耗性能,那我们就操作少量的dom就可以了,如何减少操作呢?就是在操作dom之前,我们先对比一下到底哪些dom需要更新,而不是全量更新,减少dom操作,新旧虚拟dom做一个diff操作,只更新想要的

但是仅仅这样就会变快么?其实不然,因为中间多了dom对比的操作,有可能这个对比操作也会比较耗性能,就会导致本质并不会快多少,所以虚拟dom一定会比dom直接操作快是错误的说法,只能说有可能,或者说分场景,比如在一个巨大的列表下,你只是更新了一个字段,那虚拟dom肯定胜出。如果在一个简单的dom下,那模版引擎少了dom diff,就会更快一些

那为什么还要虚拟dom呢?其实还有一个重要的点,虚拟dom是一层抽象的描绘,那就表明这一层是可以用在多端,这是极为重要的一点

虚拟dom对象

那虚拟dom中是如何做对应的描述的?对应的js对象是一个什么样的内容?

const vnode = {
  type'div',
  props: {
    id'hello'
  },
  children: [
    /* 更多 vnode */
  ]
}

这里借用vue中的虚拟dom的节点说明,上面描述的是一个div节点,它还可以包含更多的节点,放在children中,运行框架的时候,框架会遍历整个虚拟dom节点,以此来建立真实的dom树,可以将这个过程称为挂载,挂载完成之后,新旧dom对比,将发生变化的节点进行更新,这个过程可以称为diff,或者更新

整个过程如下

这就是整个虚拟dom相关内容,整体来看,虚拟dom的利远远大于弊端,这使得它在大型框架面前称为标配,对于工具的学习不能仅仅只是停留在表面,还要尽量了解它的发展历程,形成一种工具思维

分类:

前端

标签:

前端

作者介绍

feer.cc
V1

微信公众号:FE情报局