为什么需要虚拟DOM

Posted fan-1994716

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为什么需要虚拟DOM相关的知识,希望对你有一定的参考价值。

DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的。如果对前端工作进行抽象的话,主要就是维护状态和更新视图;而更新视图和维护状态都需要DOM操作。其实近年来,前端的框架主要发展方向就是解放DOM操作的复杂性。
更新DOM是非常昂贵的操作
当我们使用javascript来修改我们的页面,浏览器已经做了一些工作,以找到DOM节点进行更改,例如:
document.getElementById(‘myId‘).appendChild(myNewNode);1
 
理解虚拟DOM
虚拟的DOM的核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。这句话,也许过于抽象,却基本概况了虚拟DOM的设计思想
我们可以用JavaScript对象来代替DOM节点
DOM节点在html文档中的表现通常是这样的:
 
<ul id=‘myId‘>
  <li>Item 1</li>
  <li>Item 2</li>
<ul>1234
DOM节点也可以表示为一个JavaScript对象,就像这样:
 
//用Javascript代码表示DOM节点的伪代码
Let domNode =
  tag: ‘ul‘
  attributes: id: ‘myId‘
  children: [
//这里是 li
  ]
;12345678
这就是虚拟的DOM节点,很好理解吧。
引入虚拟DOM,这不仅仅是一种性能增强,这同时意味着更多的功能。
例如,可以在虚拟DOM中的 render() 方法直接创建新的节点:
 
new Vue(
  el: ‘#app‘,
  data:
   message: ‘hello world‘
  ,
  render()
    var node = this.$createElement;
    return node(
      ‘div‘,
      attrs: id: ‘myId‘ ,
       this.message
    );
 
);1234567891011121314
输出:
 
<div id=‘app‘>
  <div id=‘myId‘>hello world</div>
</div>123
为什么这样做?你可以用全编程语言JavaScript编程,您可以创建工厂式的功能来建立虚拟节点

以上是关于为什么需要虚拟DOM的主要内容,如果未能解决你的问题,请参考以下文章

React虚拟DOM浅析

React虚拟DOM浅析

理解虚拟DOM,自己实现虚拟DOM

虚拟DOM(Virtual DOM)

为什么需要虚拟DOM?

React篇(010)-为什么虚拟 dom 会提高性能?