传递HTML字符串virtual,理解Virtual DOM(1) 真实DOM和虚拟DOM的映射

什么是Virtual DOM？

所谓virtual，指的是对真实DOM的一种模拟。相对于直接操作真实的DOM结构，我们构建一棵虚拟的树，将各种数据和操作直接应用在这棵虚拟的树上，然后再将对虚拟的树的修改应用到真实的DOM结构上。

这样有以下好处：可能会减少DOM操作次数，带来性能上的提升，即使我们频繁操作虚拟DOM，我们只需要一定时刻一次性同步修改到真实DOM上即可

真实的HTML节点有两百多个属性和方法，使用虚拟节点，能在数据结构上节省内存。

虚拟DOM不依赖浏览器环境，能在node环境实现，可以使用虚拟DOM生成html字符串，实现SSR

使用新的数据结构表示HTML节点

尝试在控制台打印一个HTML节点的所有属性和方法，我们会发现HTML节点是一个非常巨大的数据结构。

HTMLElement由两百多个属性和方法

而90%以上的属性和方法我们并不关心。

对Element节点的表示

所以我们可以尝试用下面的结构表示Element节点。export default class VNode {

constructor(tagName, attrs, children) {

this.tagName = tagName

this.attributes = attrs

this.children = children

}

那么对于：

我们就能用VNode('div', {class: 'container'}, [])来表示了。

然后我们为VNode添加render方法，实现向真实节点的转换。class VNode {

constructor(tagName, attrs, children) {

this.tagName = tagName

this.attributes = attrs

this.children = children

}

render() {

let element = document.createElement(this.tagName)

Object.keys(this.attributes).forEach(key => {

element.setAttribute(key, this.attributes[key])

})

this.children.forEach(child => {

element.appendChild(child.render())

})

return element

}

对于Text节点的表示

对于text节点，暂时只关心文本内容class TextNode {

constructor(content) {

this.content = content

}

render() {

return document.createTextNode(this.content)

}

在对上面两种节点的改造下，我们尝试表示一下html:

image.pnglet virtualDom = new VNode('div', {class: 'container'}, [

new TextNode('some content'),

new VNode('span', {}, [

new TextNode('other content')

])

作者：浩神

来源：简书

传递HTML字符串virtual,理解Virtual DOM(1) 真实DOM和虚拟DOM的映射相关推荐

virtual DOM和真实DOM的区别_让虚拟DOM和DOMdiff不再成为你的绊脚石
来源 | https://juejin.im/post/5c8e5e4951882545c109ae9c Keep Moving 时至今日,前端对于知识的考量是越来越有水平了,逼格高大上了各类框架大 ...
面试官：什么是虚拟DOM？如何实现一个虚拟DOM？
故心故心故心故心小故冲啊文章目录一.什么是虚拟DOM 二.为什么需要虚拟DOM 三.如何实现虚拟DOM 小结参考文献一.什么是虚拟DOM 虚拟 DOM (Virtual DOM )这个概念相信 ...
说说真实dom和虚拟dom有什么区别，虚拟dom的优势是什么？
区别:虚拟dom不会进行排版与重绘操作,而真实dom会频繁的排版+重绘,而虚拟dom的总损耗是虚拟dom+真实dom的增删改+排版重绘,而真实dom的总损耗是dom的完全增删改+排版重绘虚拟dom的 ...
深入理解React（一）JSX与虚拟DOM
初衷使用 React 有一段时间了, 一直想找个时间写一个 React 的系列文章.忙里抽闲,完成了第一篇.写这系列文章的初衷是总结这段时间的技术学习,以及给那些想学习 React 的同学们一点帮助 ...
Vue进阶之Virtual DOM(虚拟DOM) 实现原理
Vue进阶之Virtual DOM(虚拟DOM) 实现原理 Virtual DOM(虚拟 DOM),是由普通的 JS 对象来描述 DOM 对象,因为不是真实的 DOM 对象,所以叫 Virtual D ...
Vue 源码学习—Virtual DOM(虚拟 DOM)
Virtual DOM Virtual DOM是什么真实DOM成员引入原因作用 Virtual DOM是什么定义: 普通的js对象来描述DOM对象,不是真实的DOM,顾名思义,称为虚拟DOM ...
虚拟dom (virtual dom)(vnode)
1.什么是虚拟 DOM (vdom) 起源虚拟dom最先是由facebook团队提出的,最先运用在react中,之后在vue2.0版本中引入了虚拟DOM的概念是什么虚拟 dom 是相对于浏览器所 ...
第九篇：真正理解虚拟 DOM：React 选它，真的是为了性能吗？
在过去的十年里,前端技术日新月异.从最早的纯静态页面,到 jQuery 一统江湖,再到近几年大火的 MVVM 框架--研发模式升级这件事情对于前端来说,好像成了某种常态.其实研发模式不断演进的背后,恰 ...
React：真正理解虚拟DOM
在mvvm这个框架领域,到现在仍然存在一个及其热门的面试问题:为什么要使用虚拟DOM? 一般的回答如下: 本文将通过另一个视角,给出不同的答案,本文不局限于点对点看待问题本硕本身,而是放在一个足够长的 ...

传递HTML字符串virtual,理解Virtual DOM(1) 真实DOM和虚拟DOM的映射

传递HTML字符串virtual,理解Virtual DOM(1) 真实DOM和虚拟DOM的映射相关推荐

最新文章

热门文章