我的编程空间,编程开发者的网络收藏夹
学习永远不晚

javascript的虚拟DOM怎么进化为真实DOM

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

javascript的虚拟DOM怎么进化为真实DOM

本篇内容主要讲解“javascript的虚拟DOM怎么进化为真实DOM”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript的虚拟DOM怎么进化为真实DOM”吧!

前言

Vue和React的Render函数中都涉及到了Virtual DOM的概念,Virtual  DOM也是性能优化上的重要一环,同时突破了直接操作真实DOM的瓶颈,本文带着以下几个问题来阐述Virtual DOM。

1.为什么要操作虚拟 DOM?

2.什么是虚拟 DOM?

3.手把手教你实现虚拟 DOM 渲染真实 DOM

希望阅读本文之后,能够让你深入的了解虚拟 DOM并且在开发和面试中收益。

为什么要操作虚拟 DOM

为了帮助我们更好的理解为什么要操作虚拟 DOM,我们先从浏览器渲染[1]一个 HTML 文件需要做哪些事情说起:

javascript的虚拟DOM怎么进化为真实DOM

浏览器渲染机制大致可以分为以下 5 步走:

1.创建 DOM tree

2.创建 Style Rules

3.构建 Render tree

4.布局 Layout

5.绘制 Painting

我们过去使用原生JavaScript和jquery去操作真实DOM的时候,浏览器会从构建 DOM? 开始从头到尾的执行一遍渲染的流程。

在一次开发中,假如产品告诉你一个需求,你需要在一次操作中更新10个DOM节点,理想状态是浏览器一次性构建完DOM树,再执行后续操作。但浏览器没这么智能,收到第一个更新  DOM 请求后,并不知道后续还有9次更新操作,因此会马上执行流程,最终执行 10 次流程。

过了一会产品经理把你叫过去和你说把需求改一下,此时你又需要操作一次 DOM 的更新,那么这个时候之前做的 10 次 DOM  操作就是白白浪费性能,浪费感情。

即使计算机硬件一直在更新迭代,但是操作DOM的代价仍旧是昂贵的,频繁操作 DOM 还是会出现页面卡顿,影响用户的体验。真实的 DOM  节点,哪怕一个最简单的 div 也包含着很多属性,可以打印出来直观感受一下:

javascript的虚拟DOM怎么进化为真实DOM

如此多的属性,如果每次对 DOM 结构都进行更新,一次,两次,三次...一百次....一千次...,可想而知,是多么庞大的数据量。

因此虚拟DOM就是为了解决这个浏览器性能问题而被设计出来的。例如前面的例子,假如一次操作中有 10 次更新 DOM  的动作,虚拟DOM不会立即操作DOM,而是将这 10 次更新 DOM  的动作通过Diff算法最终生成一个js对象,然后通知浏览器去执行一次绘制工作,这样可以避免大量的无谓的计算量。

什么是虚拟 DOM

虚拟 DOM[2]就是我们上面所说的js对象。

其本质上就是在JS和DOM之间做了一个缓存。可以类比 CPU 和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存:既然 DOM 这么慢,我们就在它们 JS  和 DOM 之间加个缓存。CPU(JS)只操作内存(Virtual DOM),最后的时候再把变更写入硬盘(DOM),直接操作内存中的 JS  对象的速度显然要更快。

function vnode(tag, data, key, children, text) {     return {         tag,         data,         key,         children,         text     } }

举个栗子:

假如我们有这样的一个 DOM 树

<ul class="list">   <li class="item">前端简报</li>   <li>vue</li> </ul>

那么,我们怎么用 js 的对象来对应到这个树呢?

{     tag: 'ul',        // 元素标签     data: {           // 属性         class: 'list'     },     key: '',     text: '',  // 文本内容     children: [         {             tag: "li",             data: {                 class: "item"             },             key: '',             text: '',             children: [                 {                     tag: undefined,                     data: undefined,                     key: undefined,                     text: '前端简报',                     children: []                 }             ]         },         {             tag: "li",             data: "",             key: '',             text: '',             children: [                 {                     tag: undefined,                     data: undefined,                     key: undefined,                     text: 'vue',                     children: []                 }             ]         }     ]       // 子元素 }

由此可知:DOM tree的信息都可以用JavaScript对象来表示,反过来,我们也可以用  JavaScript对象表示的树结构来构建一棵真正的DOM树。

实现虚拟 DOM 渲染真实 DOM

有了JavaScript对象之后如何转化为真实的 DOM 树结构呢?

ul 和 li 在 js 对象中,页面上并没有此结构,所以我们需要把ul和li转化为和

标签

而文本标签我们定义 Vnode 为:

{    tag: undefined,    data: undefined,    key: undefined,    text: 'vue',    children: [] }

故可以判断tag的类型来确定创建元素的类型.

function createElm(vnode) {     let { tag, data, children, key, text } = vnode;      if (typeof tag == "string") {         vnode.el = document.createElement(tag);  //创建元素放到vnode.el上         children.forEach(child => {             vnode.el.appendChild(createElm(child))         })     } else {         vnode.el = document.createTextNode(text);  //创建文本     }     return vnode.el }

如果子节点存在并且也是虚拟DOM的话,我们通过递归调用创建子节点。

javascript的虚拟DOM怎么进化为真实DOM

创建 DOM 树结构之后我们需要设置节点的属性,即处理虚拟 DOM 中的data属性。

function updateProperties(vnode) {     let el = vnode.el;     let newProps = vnode.data || {};     for (let key in newProps) {         if (key == "style") {             for (let styleName in newProps.style) {                 el.style[styleName] = newProps.style[styleName];             }         } else if (key == "class") {             el.className = newProps.class;         } else {             el.setAttribute(key, newProps[key]);         }     } }

在我们创建元素标签之后调用updateProperties方法即可

javascript的虚拟DOM怎么进化为真实DOM

把上面创建出来的真实 DOM 结构 vnode.el 添加到文档当中即可呈现出我们需要的真实 DOM 结构

let parentElm = document.getElementById("app").parentNode; 获取之前app的父亲body parentElm.insertBefore(createElm(vnode), document.getElementById("app").nextSibling); //body里在老的app后面插入真实dom parentElm.removeChild(document.getElementById("app")); //删除老的节点

 javascript的虚拟DOM怎么进化为真实DOM

总结

以上就是本文的全部内容,我想我们现在应该了解什么是虚拟DOM的概念了以及虚拟DOM是如何实现真实DOM渲染的。其中用到了主要用到了子节点的递归。

到此,相信大家对“javascript的虚拟DOM怎么进化为真实DOM”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

javascript的虚拟DOM怎么进化为真实DOM

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

虚拟DOM如何进化为真实DOM

Vue和React的Render函数中都涉及到了Virtual DOM的概念,Virtual DOM也是性能优化上的重要一环,同时突破了直接操作真实DOM的瓶颈,本文带着以下几个问题来阐述Virtual DOM。

Vue虚拟Dom到真实Dom的转换方法

这篇文章主要介绍“Vue虚拟Dom到真实Dom的转换方法”,在日常操作中,相信很多人在Vue虚拟Dom到真实Dom的转换方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue虚拟Dom到真实Dom的转换方法
2023-06-20

React vs Svelte:虚拟和真实DOM之间的战争

在本文中,我将比较Svelte与对React以及它们在幕后彼此的技术。

怎么在Vue中实现一个虚拟dom

怎么在Vue中实现一个虚拟dom?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、什么是虚拟dom?虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构在vue中
2023-06-14

怎么在react中实现一个虚拟dom和diff算法

这篇文章将为大家详细讲解有关怎么在react中实现一个虚拟dom和diff算法,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。虚拟DOM,见名知意,就是假的DOM,我们真实的DOM挂载在页面上
2023-06-14

Linux中的虚拟化技术怎么实现

Linux中常用的虚拟化技术有KVM(Kernel-based Virtual Machine)、Xen、Docker等。KVM是一种基于Linux内核的开源虚拟化技术,它利用Linux内核中的虚拟化扩展来实现虚拟机的创建和管理。KVM通
Linux中的虚拟化技术怎么实现
2024-04-09

后 OpenStack 时代,以容器为代表的虚拟化技术将有怎样的演进?

随着人工智能、大数据等创新技术席卷大多数行业和地域,疫情防护常态化暴露出来的企业“数字缺陷”加快了数字化转型速度。
大数据技术2024-12-01

Bokeh怎么可视化虚拟现实环境中的数据

在虚拟现实环境中,Bokeh可以通过以下方法来可视化数据:使用虚拟现实技术创建3D场景:首先,利用虚拟现实技术(如Unity、Unreal Engine等)创建一个3D场景,可以是一个虚拟环境、虚拟地图或者其他的3D空间。将数据转换为3D模
Bokeh怎么可视化虚拟现实环境中的数据
2024-05-21

OpenStack架构中的网络功能虚拟化怎么实现

OpenStack架构中的网络功能虚拟化是通过Neutron服务来实现的。Neutron是OpenStack的网络服务,它提供了网络虚拟化和管理功能,允许用户创建和管理虚拟网络,子网,路由和防火墙等网络功能。网络功能虚拟化是通过将网络功能
OpenStack架构中的网络功能虚拟化怎么实现
2024-04-09

为什么成功的数据网格实施需要数据虚拟化?

数据虚拟化是一个建立在组织内不同数据源之上的企业范围的层。要在不同数据源之间进行查询时,数据使用者只需查询数据虚拟化层,然后该层便会检索所需数据,让使用者不必受困于访问的复杂性。

怎么用C#+Selenium+ChromeDriver爬取网页,模拟真实的用户浏览行为

本篇内容介绍了“怎么用C#+Selenium+ChromeDriver爬取网页,模拟真实的用户浏览行为”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学
2023-06-15

编程热搜

目录