为什么需要虚拟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
<li>Item 1</li>
<li>Item 2</li>
<ul>1234
DOM节点也可以表示为一个JavaScript对象,就像这样:
//用Javascript代码表示DOM节点的伪代码
Let domNode =
tag: ‘ul‘
attributes: id: ‘myId‘
children: [
//这里是 li
]
;12345678
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
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
<div id=‘myId‘>hello world</div>
</div>123
为什么这样做?你可以用全编程语言JavaScript编程,您可以创建工厂式的功能来建立虚拟节点
以上是关于为什么需要虚拟DOM的主要内容,如果未能解决你的问题,请参考以下文章