zoukankan      html  css  js  c++  java
  • Vue Virtual Dom 和 Diff原理

    虚拟Dom即vdom  

    对复杂的文档DOM结构,提供一种方便的工具,进行最小化的DOM操作。

    虚拟DOM不是真实的DOM,而是一个JS对象。它的作用是判断DOM是否改变、  哪些部分需要被重新渲染。

    vdom完全是用js去实现,和宿主浏览器没有任何联系,此外得益于js的执行速度,将原本需要在真实dom进行的

    创建节点,删除节点,添加节点等一系列复杂的dom操作全部放到vdom中进行,这样就通过操作vdom来提高

    直接操作的dom的效率和性能。

    作用: 用来高效的渲染页面,减少不必要的DOM操作 提高渲染效率

    1、虚拟 DOM 的最终目标是将虚拟节点渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话,会有很多不必要的 DOM 操作。

    例如,一个 ul 标签下很多个 li 标签,其中只有一个 li 有变化,这种情况下如果使用新的 ul 去替代旧的 ul,因为这些不必要的 DOM 操作而造成了性能上的浪费。

    为了避免不必要的DOM 操作,虚拟 DOM 在虚拟节点映射到视图的过程中, 将虚拟节点与上一次渲染视图所使用的旧虚拟节点(oldVnode)做对比,

    找出真正需要更新的节点来进行 DOM 操作,从而避免操作其他无需改动的 DOM。

    简而言之主要做了两件事:

    提供与真实DOM 节点所对应的虚拟节点 vnode ,将虚拟节点vnode 和旧虚拟节点 oldVnode 进行对比,然后更新视图

    2、diff 算法包括几个步骤:哪一块改变了就去更新哪一块

    1. JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中
    2. 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
    3. 把所记录的差异应用到所构建的真正的 DOM 树上,视图就更新了 
  • 相关阅读:
    怎么样下载安装 pyinstaller
    怎样给python编译成dll文件
    解决jmeter报connection reset 错误的方法
    redis使用jmeter测试
    前端性能测试ShowSlow+Yslow
    性能测试工具curl-loader(linux)
    Js 数组返回去重后的数据
    批量处理sql 数据存入xml类型列
    SQL Server游标(转)
    SQL中varchar和nvarchar的区别
  • 原文地址:https://www.cnblogs.com/swjRH/p/13703163.html
Copyright © 2011-2022 走看看