虚拟DOM和真实DOM
目录
一:什么是DOM?
二:什么是虚拟DOM?
三:虚拟DOM 的工作过程?
四:虚拟DOM的优点?缺点?
五:真实dom和虚拟dom的区别?
一:什么是DOM?
DOM就是文档对象模型,HTML的文档document页面时一切的基础,没有它dom就无从谈起。
当我们创建好一个页面并加载到浏览器的时候,DOM就悄然而生,它会把网页文档转换为一个文档对象,主要功能就是处理网页内容。在这个文档给对象里,所有元素呈现出一种层次,就是除了顶级元素html外,其他元素都被包含在另外的元素中。
文档对象模型就是一个节点树。
二:什么是虚拟DOM?
虚拟DOM是一个轻量级的JavaScript对象,它原本是真实dom的副本,是一个节点树,它将元素,它们的属性和内容作为对象及属性。渲染页面时会创建一个节点树,然后响应数据模型中的变化来更新该树,该变化是用户或系统完成的各种动作引起的。
三:虚拟DOM 的工作过程?
1:首先根据数据创建虚拟dom,它反映真实DOM的结构,然后由虚拟dom创建真实的dom树,真实dom树生成之后,在渲染到页面上。
2:如果数据发生改变,创建新的虚拟dom树,比较两个树的区别,调整虚拟dom的内部状态
3:在虚拟dom收集到足够的改变时,再一次性应用到真实dom上,渲染到页面。
四:虚拟DOM的优点?缺点?
优点:
①:保证性能下限
②:无须手动操作dom
③:跨平台
缺点:
①:无进行极致优化
②:首次渲染大量DOM时,由于多了一层dom计算会比innerHTMl插入慢
五:真实dom和虚拟dom的区别?
1:虚拟dom不会进行排版与重绘操作,虚拟dom就是把真实DOM转换为javaScript代码
2:虚拟dom进行频繁修改,然后一次性比较并修改真实DOM中需要修改的部分,最后真实DOM进行排版重绘,减少节点排版与重绘损耗
虚拟DOM和真实DOM相关推荐
- reactjs虚拟DOM与真实DOM
关于虚拟DOM: 1.本质是Object类型的对象(一般对象) 2.虚拟DOM比较"轻",真实DOM比较"重",因为虚拟DOM是React内部在用,无需真实DO ...
- 虚拟DOM和真实DOM的区别和联系
介绍一下虚拟dom和真实dom吧 一.DOM DOM是文档对象模型(Document Object Model),它是一个结构化文本的抽象. 二.虚拟DOM 虚拟DOM只是js模拟的DOM结构,是对真 ...
- 虚拟DOM和真实DOM的区别
DOM DOM意思是文档对象模型(Dcoument Object Model),它是一个结构化文本的抽象 操作DOM 所以,只要我们想要动态修改网页的内容的时候,我们就修改DOM. var item ...
- virtual DOM和真实DOM的区别_让虚拟DOM和DOMdiff不再成为你的绊脚石
来源 | https://juejin.im/post/5c8e5e4951882545c109ae9c Keep Moving 时至今日,前端对于知识的考量是越来越有水平了,逼格高大上了 各类框架大 ...
- 传递HTML字符串virtual,理解Virtual DOM(1) 真实DOM和虚拟DOM的映射
什么是Virtual DOM? 所谓virtual,指的是对真实DOM的一种模拟.相对于直接操作真实的DOM结构,我们构建一棵虚拟的树,将各种数据和操作直接应用在这棵虚拟的树上,然后再将对虚拟的树的修 ...
- Vue 原理解析(五)之 虚拟Dom 到真实Dom的转换过程
上一篇 vue 原理解析(四): 虚拟Dom 是怎么生成的 再有一颗树形结构的Javascript对象后, 我们需要做的就是讲这棵树跟真实Dom树形成映射关系.我们先回顾之前的mountComponn ...
- React--虚拟DOM和真实DOM
学习资源推荐 真实dom <div className="foo"><h1>Hello React</h1> </div> 虚拟do ...
- 前端学习(3196):虚拟dom和真实dom
- 前端学习(3104):react-hello-虚拟dom和真实dom
- vue核心之虚拟DOM(vdom)与真实DOM页面渲染过程
一.真实DOM和其解析流程? 浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树--创建StyleRules--创建Render树--布局Layout--绘制Painting 第一步,用HTM ...
最新文章
- python毕业设计开题报告-基于Python的教学互动系统的设计与实现开题报告
- 学校管理系统逻辑关系
- win7右键在桌面上转圈圈的解决办法
- 开源HTTP解析器---http-parser和fast-http
- MySQL入门 (一) : 资料库概论与MySQL的安装
- 博客园博客转至个人网站博客声明
- for循环提高内存访问效率的做法
- 【专题】CSDN下载频道5月热门资源top100汇总
- c语言同余法随机数,线性同余法取随机数
- 手把手教你搭建用户标签体系
- 【图像去噪】基于matlab小波变换图像去噪(MSE和SNR)【含Matlab源码 2192期】
- python 爬取google总结
- 中科大一所学校撑起中国人工智能半壁江山
- 硬盘MBR格式转换GPT,简单方法,你会吗?
- python抢课_一个用python实现的东方时尚(驾校)抢课程序
- python随机森林预测案例_Random Forest算法 python实现案例分析
- DNF的SPK文件解析笔记
- bed格式转vcf格式
- beautifulsoup+requests链家(深圳)爬取及可视化分析
- Swin-Unet跑自己的数据集(Transformer用于语义分割)
热门文章
- Android JSON:Gson,FastJson解析库的使用和对比分析
- 关于抢火车票的那些事儿(一)
- python ttk.notebook_python – 删除Ttk Notebook标签虚线
- 算法设计技巧: Primal-Dual
- 马未都说收藏:陶瓷篇(18、19)五彩瓷、斗彩
- 无需开发!阿里大于推出全新短信群发助手
- linux将汇编转为机器码,如何将汇编语言转化为机器码
- 手机网页版微信分享以及微信授权
- 蜀门一直显示连接服务器,蜀门自身状态增加不召唤仙宠BUG玩法全解 利用的服务器自身...
- Java小白 学习笔记(二)——2020版Java语言基础