虚拟DOM

虚拟DOM

可以看看这个文章 如何理解虚拟DOM? - 戴嘉华的回答 - 知乎

是什么

什么是DOM?

DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容)。 DOM就是将网页转化为一个对象并提供操作这个对象接口(即操作这个对象的方法),所以可以通过DOM对网页中的元素进行操作。如对某个节点增加属性,增加孩子,删除等。 DOM就是网页里你看得见的对应的某个元素。

什么是虚拟DOM?

举例说明:如果网页中有一个表格,表头是姓名,年级,分数。如果我希望点击姓名表格就按照字典序排序,点击年级,按照年级从大到小排序等等操作,那么如果直接去操作DOM的话就很难实现。例如,我们删除了一个DOM结点,或者新增了一条数据,那么重新进行排序,就会删除所有DOM然后重新渲染一遍DOM。如果数据很多的话,就会很浪费资源,影响网页的性能,可能会卡顿。

为什么会卡顿呢?是因为一个节点元素实际上包含很多属性方法,创建一个DOM就包含上百条数据,加载上绑定的事件等。性能开销很大。 我可以根据DOM结构,然后自己创建一个数据结构,自己创建的这个DOM和真实的DOM 是一一映射的。然后我们操作的时候就操作自己的数据结构,数据量很小,不管进行排序或其他处理都会很迅速。处理好之后,再根据这个数据结构把它变为真实的DOM。 即我们用虚拟的DOM结构替换需要处理的DOM结构,对虚拟的DOM 进行操作之后再进行渲染,就成为了真实的数据。

有什么用

这样的好处是如果我们需要对DOM结点进行改变,那么我们只需要查看我们自己创建的虚拟DOM,看看其中哪条数据发生了改变,然后修改虚拟DOM,并把它渲染成真实的数据即可。例如我们本来就有500条数据,然后需要添加10条,那么我们只添加10条新的虚拟DOM,然后再把这10条虚拟DOM转化为真实的DOM即可,不需要从新吧510跳全部重新渲染一遍。这样性能会提升。

所谓的虚拟DOM实际上就是我们根据真实的DOM结构,创建一个和真实DOM映射的一个数据结构,然后对数据结构进行操作,最后把这个数据结构反映到真实的DOM中。

我们可以在逻辑上把这个数据结构渲染成真实的DOM,他在数据结构上和真实DOM是差不多的

举个例子:我们可以使用一个数据结构来映射DOM(用JS对象模拟DOM树): 我们将节点用一个对象来表示,tag属性表示他的种类,children属性表示他拥有的儿子数组。那么:

这就是虚拟的DOM,体积很轻量,没有所有的属性和接口!用来操作的时候不需要耗费很高的性能。 代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<!--   <div>
    <p><span>xiedaimala.com</span></p>
    <span>jirengu.coms</span>
  </div> -->
</body>
</html>
let nodesData = {
  tag: 'div',
  children: [
    {
      tag: 'p',
      children: [
        {
          tag: 'span',
          children: [
            {
              tag: '#text',
              text: 'xiedaimala.com'
            }
          ]
        }
      ]
    },
    {
      tag: 'span',
        children: [
          {
            tag: '#text',
            text: 'jirengu.com'
          }
        ]
    }
  ]
}

接下来我们只需要将这个虚拟的DOM渲染成真实的DOM就可以了,例如写一个函数来渲染DOM。

function createElement (data){
    
}

举例说明虚拟DOM的作用: 这时我们修改了DOM,例如我们将div中的p标签中span标签的内容由xiedaimala.com修改为baidu.com,那么我们只需要修改我们创建的数据结构中的span标签text那个属性,然后将原来内存中的nodesData与修改后的nodesData2进行比较。例如:

let nodesData2 = {
  tag: 'div',
  children: [
    {
      tag: 'p',
      children: [
        {
          tag: 'span',
          children: [
            {
              tag: '#text',
              text: 'baidu.com'//这里变了
            }
          ]
        }
      ]
    },
    {
      tag: 'span',
        children: [
          {
            tag: '#text',
            text: 'jirengu.com'
          }
        ]
    }
  ]
}

发现span标签的text内容改变了,那么我们在修改真实DOM的时候不需要把所有的真实DOM的很多属性和方法都检索一遍,然后重新渲染一遍,而只需要重新渲染在虚拟DOM中比较出来的修改的部分,即只需要重新渲染text部分就可以了。

以下为 深度剖析:如何实现一个 Virtual DOM 算法 #13文章中的一段解释

既然原来 DOM 树的信息都可以用 JavaScript 对象来表示,反过来,你就可以根据这个用 JavaScript 对象表示的树结构来构建一棵真正的DOM树。之前的章节所说的,状态变更->重新渲染整个视图的方式可以稍微修改一下:用 JavaScript 对象表示 DOM 信息和结构,当状态变更的时候重新渲染这个 JavaScript 的对象结构。当然这样做其实没什么卵用,因为真正的页面其实没有改变。 但是可以用新渲染的对象树去和旧的树进行对比,记录这两棵树差异。记录下来的不同就是我们需要对页面真正的 DOM 操作,然后把它们应用在真正的 DOM 树上,页面就变更了。这样就可以做到:视图的结构确实是整个全新渲染了,但是最后操作DOM的时候确实只变更有不同的地方

如何实现

简单实现:

虚拟DOM渲染为真实DOM

/**
 * @author ruoyu
 * @description 虚拟 DOM Demo
 * @todo 暂时不考虑复杂情况
 */

class VNode {
  constructor(tag, children, text) {
    this.tag = tag
    this.text = text
    this.children = children
  }

  render() {
    if(this.tag === '#text') {
      return document.createTextNode(this.text)
    }
    let el = document.createElement(this.tag)
    this.children.forEach(vChild => {
      el.appendChild(vChild.render())
    })
    return el
  }
}

/*以上为ES6写法,改为ES5写法为:*/
/*******
function VNode() {
    this.tag = tag
    this.text = text
    this.children = children
}
VNode.prototype.render = function() {
    if(this.tag === '#text') {
      return document.createTextNode(this.text)
    }
    let el = document.createElement(this.tag)
    this.children.forEach(vChild => {
      el.appendChild(vChild.render())//递归生成子节点
    })
    return el
}  
******
这几句代码的作用是将js对象表示的虚拟DOM渲染为真实的DOM
*/

/*这个函数的作用是传入几个参数,然后返回对象*/
function v(tag, children, text) {
  if(typeof children === 'string') {
    text = children
    children = []
  }
  return new VNode(tag, children, text)
}


/*  这里是js对象虚拟dom的数据结构

let nodesData = {
  tag: 'div',
  children: [
    {
      tag: 'p',
      children: [
        {
          tag: 'span',
          children: [
            {
              tag: '#text',
              text: 'xiedaimala.com'
            }
          ]
        }
      ]
    },
    {
      tag: 'span',
        children: [
          {
            tag: '#text',
            text: 'jirengu.com'
          }
        ]
    }
  ]
}

 */

/*使用v函数将几个参数转化为对象并返回*/
let vNodes = v('div', [
      v('p', [
        v('span', [ v('#text', 'xiedaimala.com') ] )
        ]
      ),
      v('span', [
        v('#text',  'jirengu.com')
        ])
    ]
  )
/*渲染为真实的DOM*/
console.log(vNodes) /*下方有打印的结果*/
console.log(vNodes.render())

我们看一下打印的结果


DOM数据更新

以下仅为简单实现,是为了理解原理,实际上要想做到很完美的虚拟DOM,需要考虑很多

function patchElement(parent, newVNode, oldVNode, index = 0) {
  if(!oldVNode) {//如果没有,直接创建新的DOM,例如patchElement(root, vNodes1)
    parent.appendChild(newVNode.render())
  } else if(!newVNode) {//删除DOM的操作,例如patchElement(root)
    parent.removeChild(parent.childNodes[index])
  } else if(newVNode.tag !== oldVNode.tag || newVNode.text !== oldVNode.text)//替换(修改)DOM操作,例如两个VNode比较简单,然后互相比较
 {
    parent.replaceChild(newVNode.render(), parent.childNodes[index])
  }  else {//递归替换孩子DOM,递归比较
    for(let i = 0; i < newVNode.children.length || i < oldVNode.children.length; i++) {
      patchElement(parent.childNodes[index], newVNode.children[i], oldVNode.children[i], i)
    }
  }
}



let vNodes1 = v('div', [
      v('p', [
        v('span', [ v('#text', 'xiedaimala.com') ] )
        ]
      ),
      v('span', [
        v('#text',  'jirengu.com')
        ])
    ]
  )

let vNodes2 = v('div', [
      v('p', [
        v('span', [ 
          v('#text', 'xiedaimala.com') 
          ] )
        ]
      ),
      v('span', [
        v('#text',  'jirengu.coms'),
        v('#text',  'ruoyu')
        ])
    ]
  )
const root = document.querySelector('#root')

patchElement(root, vNodes1)//创建新的DOM,
patchElement(root)//删除DOM的操作
patchElement(root, vNodes2,vNodes1)//替换(修改)DOM操作

以上只是简单实现!有很多bug

总结

问:说说虚拟DOM: 当我们修改真正的DOM树的时候,因为DOM中元素节点有许多的属性和方法,当DOM中节点过多时往往需要消耗很大的性能。 解决方法是:使用js对象来表示DOM树的信息和结构,这个js对象可以构建一个真正的DOM树。当状态变更的时候用修改后的新渲染的的js对象和旧的虚拟DOM js对象作对比,记录着两棵树的差异。把差别反映到真实的DOM 结构上最后操作真正的DOM的时候只操作有差异的部分就可以了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏javascript趣味编程

2.2.3 文档对象模型DOM及表单

文档对象模型DOM用途是什么?先从一棵树说起。下面是一棵树,由,根部、枝干、叶构成,通过根部可以访问到任何一个叶节点。

21800
来自专栏Java技术分享圈

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

D.closest()获得D所有父元素,含自己(D、B、A)与 D.parents() 对比

17220
来自专栏web前端

Vuejs --02 Vue实例

一、构造器      1、vm(view model 表示Vue实例),每个Vuejs都是通过构造函数Vue创建Vue的根实例启动 var vm = new V...

23880
来自专栏前端布道

Angular开发实践(四):组件之间的交互

在Angular应用开发中,组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法。 根据数据的传递方向,分为父组件...

52180
来自专栏郭少华

(第二季)Vue2.0-全局API

全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,说的简单些就是,在构造器外部用Vue提供给我们的API...

11910
来自专栏前端说吧

CSS3中的animation动画

31150
来自专栏软件开发

前端MVC Vue2学习总结(五)——表单输入绑定、组件

一、表单输入绑定 1.1、基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,...

507140
来自专栏AndroidTv

前端入门6-JavaScript客户端api&jQuery

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

13140
来自专栏程序员叨叨叨

Excel单元格内计算式及字符串拼接实现

&:逻辑并,用以拼接字符串 =:计算式求结果 " ":其内部放入要显示的字符串

10160
来自专栏更流畅、简洁的软件开发方式

表单控件续(1)——应用接口来简化和分散代码

上次有点仓促,有几个地方没有明确。 后者是整个流程,前者是其中的一个步骤,是一个简单的思路说明,其中前三段代码都是表单控件里面的。 2、我要写的是一个表单控...

20890

扫码关注云+社区

领取腾讯云代金券