草庐IT

虚拟DOM

不见水星记 2023-03-28 原文

一、对虚拟DOM的理解

虚拟DOM就是用来描述真实DOM的javaScript对象，可以将多次修改的DOM一次性渲染到页面上，减少页面的重排重绘，提高渲染性能

  • 虚拟DOM就是用来描述真实DOM的javaScript对象，可以将多次修改的DOM一次性渲染到页面上，减少页面的重排重绘，提高渲染性能。 在代码渲染到页面之前，vue会把代码转换成一个对象（虚拟 DOM）。在每次数据发生变化前，虚拟DOM都会缓存一份，变化之时，现在的虚拟DOM会与缓存的虚拟DOM进行比较。在vue内部封装了diff算法，通过这个算法来进行比较，渲染时修改改变的变化，原先没有发生改变的通过原先的数据进行渲染。

二、虚拟DOM的解析过程

  1. 首先对将要插入到文档中的 DOM 树结构进行分析，使用 js 对象将其表示出来并将这个 js 对象树给保存下来，最后再将 DOM 片段插入到文档中。
  2. 当页面的状态发生改变，需要对页面的 DOM 的结构进行调整的时候，首先根据变更的状态，重新构建起一棵对象树，然后将这棵新的对象树和旧的对象树进行比较，记录下两棵树的的差异。
  3. 最后将记录的有差异的地方应用到真正的 DOM 树中去，这样视图就更新了。

三、使用虚拟DOM的原因

  • 跨平台
    • Virtual DOM本质上是JavaScript的对象，它可以很方便的跨平台操作，比如服务端渲染、uniapp等。
  • 提高渲染性能
    • 页面渲染的流程
      • 解析HTML -> 生成DOM -> 生成 CSSOM -> Layout -> Paint -> Compiler
    • 对比修改DOM时真实DOM操作和虚拟DOM的过程
      • 真实DOM∶ 生成HTML字符串＋重建所有的DOM元素
      • 虚拟DOM∶ 生成vNode+ DOMDiff＋必要的dom更新（vNODE:虚拟节点；vDOM:虚拟DOM，虚拟DOM是由多个虚拟节点构成的）

四、虚拟DOM是否真的比真实DOM性能好

  • 首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。
  • 正如它能保证性能下限，在真实DOM操作的时候进行针对性的优化时，还是更快的。

五、DIFF算法的原理

Diff 的对象是虚拟DOM（virtual dom），更新真实 DOM 是 Diff 算法的结果

  • 首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换。
  • 如果为相同节点，进行patchVnode，判断如何对该节点的子节点进行处理，先判断一方有子节点一方没有子节点的情况(如果新的没有子节点，将旧的子节点移除)。
  • 比较如果都有子节点，则进行updateChildren，判断如何对这些新老节点的子节点进行操作（diff核心）。
  • 匹配时，找到相同的子节点，递归比较子节点。
  • 更新差异，复用节点。

六、Vue中key的作用

  • 第一种情况是 v-if 中使用 key。由于 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。因此当使用 v-if 来实现元素切换的时候，如果切换前后含有相同类型的元素，那么这个元素就会被复用。如果是相同的 input 元素，那么切换前后用户的输入不会被清除掉，这样是不符合需求的。因此可以通过使用 key 来唯一的标识一个元素，这个情况下，使用 key 的元素不会被复用。这个时候 key 的作用是用来标识一个独立的元素。
  • 第二种情况是 v-for 中使用 key。用 v-for 更新已渲染过的元素列表时，它默认使用“就地复用”的策略。如果数据项的顺序发生了改变，Vue 不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处的每个元素。因此通过为每个列表项提供一个 key 值，来以便 Vue 跟踪元素的身份，从而高效的实现复用。这个时候 key 的作用是为了高效的更新渲染虚拟 DOM。
  • 总结：
    • vue为了更高效的渲染元素，会尽可能的复用元素，而非从头渲染，key可以为节点打标记，而非简单的复用节点。当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则。
      • 旧虚拟DOM中找到了与新虚拟DOM相同的key
        • 若虚拟DOM中内容没变, 直接使用之前的真实DOM
        • 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
      • 旧虚拟DOM中未找到与新虚拟DOM相同的key
        • 创建新的真实DOM，随后渲染到到页面

七、不建议用index作为key的原因

后续操作不破坏原来数据顺序的话，使用index作为key也没有任何问题

  • 若对数据进行：逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
  • 如果逆序添加、逆序删除等破坏顺序的操作且结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。

八、真实DOM

DOM虚拟li的Vue

有关虚拟DOM的更多相关文章

  1. 在VMware16虚拟机安装Ubuntu详细教程 - 2

    在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网，点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows，点击立即下载。3.下载完成，文件大小615MB，如下图：4.鼠标右击，以管理员身份运行。5.点击下一步6.勾选条款，点击下一步7.先勾选，再点击下一步8.去掉勾选，点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证，复制填入，然后点击输入即可，亲测有效。13.点击完成14.重启系统，点击是15.双击VMwareWorkstationPro图标，进入虚拟机主

  2. kvm虚拟机安装centos7基于ubuntu20.04系统 - 2

    需求：要创建虚拟机，就需要给他提供一个虚拟的磁盘，我们就在/opt目录下创建一个10G大小的raw格式的虚拟磁盘CentOS-7-x86_64.raw命令格式：qemu-imgcreate-f磁盘格式磁盘名称磁盘大小qemu-imgcreate-f磁盘格式-o?1.创建磁盘qemu-imgcreate-fraw/opt/CentOS-7-x86_64.raw10G执行效果#ls/opt/CentOS-7-x86_64.raw2.安装虚拟机使用virt-install命令，基于我们提供的系统镜像和虚拟磁盘来创建一个虚拟机，另外在创建虚拟机之前，提前打开vnc客户端，在创建虚拟机的时候，通过vnc

  3. ruby-on-rails - Rails 验证虚拟属性 - 2

    我这个模型:classBunny每当我提交一个表单来创建这个模型时，我都会收到以下错误:#的未定义方法“number_before_type_cast” 最佳答案 我通过将此方法添加到我的Bunny模型中解决了这个问题:defnumber_before_type_castnumberend我不喜欢它，但我想在有人发布更好的解决方案之前它会起作用。 关于ruby-on-rails-Rails验证虚拟属性，我们在StackOverflow上找到一个类似的问题： h

  4. ruby - Watir 无法找到我在 Chrome 的 DOM 检查器中看到的元素 - 2

    这是一个研究案例:......我正在尝试使用WatirRuby的API引用名为“bar”的嵌入元素。该元素由Chrome的DOM检查器显示，但我无法使用Watir的任何查找方法找到它:browser.embeds()#onlyisfoundbrowser.html.include?'bar'#=>false为什么会这样？为什么Watir不显示完整的HTML？如果我有不同框架中的元素或由Javascript初始化函数动态插入的元素，是否可以使用Watir访问它们？谢谢 最佳答案 如果元素在框架中，你必须使用这样的东西:browser.

  5. 【云计算】私有云在VMware下虚拟机的创建与配置（图文教程） - 2

    【适用平台】私有云   说明：完成私有云部分是需要两台虚拟机的，分别为controller、compute两个节点，但我们只需配置一台，然后克隆就方便多啦！需要用到的映射文件：关于vm的安装我就不介绍的，毕竟挺简单的，下面让我们看看基于私有云模块中，虚拟机的搭建吧。1、创建新的虚拟机，这里一般我会选择自定义，毕竟后面的配置都要根据私有云相关来进行搭建，会比较复杂。（如果是基础的可以选择典型，典型的满足一般虚拟机的配置） 2、选择稍后安装操作系统会比较方便后续的选择，这里你也可以自己选择自己的映像文件（但不建议）  3、我们是基于Linux下操作的，所以选择Linux客户机操作系统，版本选择自己

  6. ruby - 使用 Mechanize gem 根据链接在 DOM 中的位置返回链接集合 - 2

    我正在为Mechanize而苦苦挣扎。我希望“单击”一组只能通过其位置(div#content中的所有链接)或其href来识别的链接。以上两种识别方法我都试过了，都没有成功。从文档中，我无法弄清楚如何根据链接在DOM中的位置而不是直接通过链接上的属性返回一组链接(用于单击)。其次，documentation建议你可以使用:href来匹配部分href，page=agent.get('http://foo.com/').links_with(:href=>"/something")但我让它返回链接的唯一方法是传递一个完全限定的URL，例如page=agent.get('http://foo

  7. VMware虚拟机与本地主机进行磁盘共享(详解) - 2

    VMware虚拟机与本地主机进行磁盘共享前提虚拟机版本为Windows10（专业版，不是可能有问题）本地主机为家庭版或学生版(此版本会有问题，但有替代方式)最好是专业版VMware操作1.关闭防火墙，全部关闭。2.打开电脑属性3.点击共享-》高级共享-》权限4.如果没有everyone，就添加权限选择完全控制，然后应用确定。5.打开cmd输入lusrmgr.msc(只有专业版可以打开)如果不是专业版，可以跳过这一步。点击用户-》administrator密码要复杂密码，否则不行。推荐admaiN@1234类型的密码。设置完密码，点击属性，将禁用解开。6.如果虚拟机的windows不是专业版，可

  8. 虚拟机上进行java项目部署 - 2

    🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀虚拟机上进行java项目部署，自己的一点总结，一起学习，一起进步，一起成长！🛸🛸🛸🛸🛸🛸🛸🛸🛸🛸目录文章目录虚拟机上进行java项目部署1.JDK安装2.TOMCAT安装3.DOCKER1、YUM安装2、docker部署java4、最后 【yzh2022.9】1.JDK安装1、我们安装VM的时候,使用命令java-version查看 java-version这里显示JDK的信息是openjdkversion"1.8.0_262",我们会发现这个JDK是VM自带的当然你也可以通过命令rpm-qa|grepjava来查看相关的java信息 rpm-qa|grepjava【如果不

  9. 【操作系统实验】Ubuntu Linux 虚拟机用户管理 - 2

    文章目录一、用户二、用户分类1、普通用户2、超级用户3、系统用户三、用户相关文件1、/etc/passwd文件2、/etc/shadow文件四、用户管理命令1、useradd2、adduser3、passwd4、usermod5、userdel一、用户Linux系统是一个多用户多任务的分时操作系统，任何一个要使用系统资源的用户都必须先向系统管理员申请一个账号，然后以这个账号的身份进入系统。在Linux系统中，任何文件都属于某一特定用户，而任何用户都隶属于至少一个用户组。用户名（username）：每个用户账号都拥有一个惟一的用户名和各自的口令。用户在登录时键入正确的用户名和口令后，就能够进入系

  10. Conda虚拟环境的复制和迁移 - 2

    Conda虚拟环境的复制和迁移在本机复制Conda虚拟环境condacreate--namesnapshot--clonemyenv相同操作系统之间复制环境方法一：requirements.txt这个方法不推荐，因为只会导出你使用pip安装的依赖包，不会导出虚拟环境所依赖的包，并不适用于虚拟环境的迁移的应用场景。事实上，此方法比较适用于，已经明确知道依赖哪些包，我们只需要package信息的情况，如写项目文档，告诉别人运行我这个系统必须安装哪些依赖包。而忽略虚拟环境本身的依赖环境。pipfreeze>requirements.txt#生成requirements.txtpipinstall-r

随机推荐