虚拟dom原理流程的区分与完成
时间：2024/5/28作者：未知来源：争怎路由网人气：
- 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。本篇文章给大家带来的内容是关于虚拟dom原理流程的分析与实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
背景
大家都知道，在网页中浏览器资源开销最大便是DOM节点了，DOM很慢并且非常庞大，网页性能问题大多数都是有JavaScript修改DOM所引起的。我们使用Javascript来操纵DOM，操作效率往往很低，由于DOM被表示为树结构，每次DOM中的某些内容都会发生变化，因此对DOM的更改非常快，但更改后的元素，并且它的子项必须经过Reflow / Layout阶段，然后浏览器必须重新绘制更改，这很慢的。因此，回流/重绘的次数越多，您的应用程序就越卡顿。但是，Javascript运行速度很快，虚拟DOM是放在JS 和 HTML中间的一个层。它可以通过新旧DOM的对比，来获取对比之后的差异对象，然后有针对性的把差异部分真正地渲染到页面上，从而减少实际DOM操作，最终达到性能优化的目的。
虚拟dom原理流程
简单概括有三点：
用JavaScript模拟DOM树，并渲染这个DOM树
比较新老DOM树，得到比较的差异对象
把差异对象应用到渲染的DOM树。
下面是流程图：
下面我们用代码一步步去实现一个流程图
用JavaScript模拟DOM树并渲染到页面上
其实虚拟DOM，就是用JS对象结构的一种映射，下面我们一步步实现这个过程。
我们用JS很容易模拟一个DOM树的结构，例如用这样的一个函数createEl(tagName, props, children)来创建DOM结构。
tagName标签名、props是属性的对象、children是子节点。
然后渲染到页面上，代码如下:
const createEl = (tagName, props, children) => new CreactEl(tagName, props, children) const vdom = createEl('p', { 'id': 'box' }, [ createEl('h1', { style: 'color: pink' }, ['I am H1']), createEl('ul', {class: 'list'}, [createEl('li', ['#list1']), createEl('li', ['#list2'])]), createEl('p', ['I am p']) ]) const rootnode = vdom.render() document.body.appendChild(rootnode)通过上面的函数，调用vdom.render()这样子我们就很好的构建了如下所示的一个DOM树，然后渲染到页面上
<div id="box"> <h1 style="color: pink;">I am H1</h1> <ul class="list"> <li>#list1</li> <li>#list2</li> </ul> <p>I am p</p> </div>下面我们看看CreactEl.js代码流程：
import { setAttr } from './utils' class CreateEl { constructor (tagName, props, children) { // 当只有两个参数的时候 例如 celement(el, [123]) if (Array.isArray(props)) { children = props props = {} } // tagName, props, children数据保存到this对象上 this.tagName = tagName this.props = props关键词：虚拟dom原理流程的区分与完成