虚拟DOM与Diff算法

版权声明:本文章可转载,转载请注明本文地址,谢谢~ https://blog.csdn.net/weixin_43307658/article/details/86650737

欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~

虚拟DOM(Virtual Document Object Model)的模拟DOM树操作需要用到DIff算法,推荐先看这句话下面的文章内容

1 DOM的本质

浏览器中的概念,用JS对象来表示 页面上的元素,并提供了操作 DOM 对象的API

2 React中的虚拟DOM

框架中的概念,是程序员 用JS对象来模拟 页面上的 DOM 和 DOM嵌套

3 实现虚拟DOM的目的

为了实现页面中, DOM 元素的高效更新

4 DOM和虚拟DOM的区别

  • DOM:浏览器中,提供的概念;用JS对象,表示页面上的元素,并提供了操作元素的API
  • 虚拟DOM:是框架中的概念;而是开发框架的程序员,手动用JS对象来模拟DOM元素和嵌套关系
    • 本质: 用JS对象,来模拟DOM元素和嵌套关系
    • 目的:就是为了实现页面元素的高效更新

5 如何实现页面元素的高效更新

利用虚拟DOM可以实现页面元素的高效更新,那么如何实现页面元素的高效更新呢?

虚拟DOM表格排序案例

假如我有一个需求:点击列头,实现表格数据顺序的排序

  1. 数据来源:表格中的数据从数据库查询而来
  2. 存储:这些查询到的数据以数组的形式,存放到了浏览器的内存中
  3. 渲染
    1. 方案一:手动for循环整个数据,手动拼接字符串str += '<tr>123<tr>'
    2. 方案二:使用模板引擎,类似art-template,比手动更方便点,其内部本质也是拼接了字符串
  4. 思考:对于上述方案,思考其缺陷和解决方案
    1. 如果用户点击了时间,想要按照时间从大到小的排序,其流程应当是:
      1. 触发点击事件,在事件中,把内存中的对象数组,重新排序
      2. 当排序完成之后,页面时旧的,但是内存中的顺序是最新的
      3. 把最新的数据顺序渲染到页面上
    2. 上述方案只是实现了把数据渲染到页面中,但是并没有把性能做到最优,这里的第三步,完全可以按需渲染页面(只重新渲染排序中需要更新的数据所对应的页面元素),以提高性能
  5. DOM树实现按需渲染
    1. 什么是DOM树
      1. DOM结构,类似下图1中的结构
      2. 一个网页的呈现过程
        1. 浏览器请求服务器获取HTML代码
        2. 浏览器在内存中,解析DOM结构, 并在浏览器中内存中渲染出一棵DOM
        3. 浏览器把DOM树呈现到页面上
      3. 怎么按需更新:获取内存中新旧两棵DOM树,得到需要被按需更新得DOM树
      4. 如何获取到新旧两棵DOM树:
        1. 浏览器并没有直接提供获取DOM树的相关API,因此无法拿到内存中的DOM树
        2. 可以自己手动模拟新旧两棵DOM树
        3. 那么怎么去模拟DOM树呢
          1. 模拟一个DOM元素,假如网页上有一个div元素,怎么模拟呢?用js以字面量赋值的形式进行模拟,看下图模拟DOM元素
          2. 当旧的DOM发生改变,对比两棵DOM树的标签和值,如果都相等,则不变,如果标签相同,值不同,则修改,这样的新旧两棵树就是模拟DOM树
  6. 总结什么是虚拟DOM
    1. 用JS对象的形式,来模拟页面上的DOM嵌套关系,即虚拟DOM是以JS对象的形式存在的
    2. React中虚拟DOM对象的本质和目的
      1. 本质:用JS对象来模拟DOM元素的嵌套关系
      2. 目的:实现页面元素的高效更新

DOM树

模拟DOM树

6 Diff算法

Diff算法

6.1 tree diff

上图中新旧两棵DOM树每一层对比的过程叫做tree diff,当整棵DOM树逐层对比完毕,则所有的按需更新的元素必然能够找到

6.2 component diff

在进行tree diff的时候,每一层中组件级别的对比,叫做component diff

如果对比前后,组件类型相同,则暂时认为不需要更新组件

如果对比前后,组件类型不同,则需要暂时移除旧组件,创建新组件,追加到页面上

6.3 element diff

在进行组件对比的时候,如果两个组件类型相同,需要进行元素级别的对比,这叫做element diff

展开阅读全文

没有更多推荐了,返回首页