老师,虚拟DOM原理中,DocumentFragment属于文档碎片的JS对象,怎么和一个html文档(并非对象)对比呢?

Question

老师, DocumentFragment属于文档碎片的JS对象,怎么和一个html文档(并非对象)对比呢? 再者, state变化后,生成新的DOM文档(也并非对象),那这个DocumentFragment对象是什么时候生成的呢?

Answer 1

提问者 一天宏图 2020-12-07 11:08:55

我再详细说下我理解中的问题，先说理解：

1.虚拟DOM和state变化后的虚拟DOM进行对比,diff后只更新变化的那一小部分页面DOM

2.虚拟DOM 避免了把真实DOM对象全部信息更新全部html元素的“回流和重绘"，所以更快

我的问题是:我的问题是:   是拿DocumentFragment对象和虚拟DOM比效率

 2.1 JQuery3.3后使用DocumentFragment对象渲染过程

    1.页面加载,会获取到JS-DOM对象

    2.页面数据发生变化  然后比较新旧DOM 

    3.两个JS-->DOM对象比较后生成的 DocumentFragment对象, 

       DocumentFragment对象也是记录了差异部分的对象,

    4.然后再去渲染页面变化了部分

 2.2 React虚拟DOM比较如下：

   1.页面加载,会生成虚拟DOM

    2.页面数据发生变化  生成新的虚拟DOM,然后比较新旧虚拟DOM 

    3.DIFF比较虚拟DOM的差异部分,只去渲染页面变化了的部分数据

问题：2.1 和2.2 都是对象比较差异后 渲染页面  2.2比2.1快是不是仅仅只是快在虚拟DOM的同层比较Diff算法上呢?

      

Answer 2

Dell 2020-12-05 18:20:37

1. 不会用js对象和html比，而是两个js对象比，比较晚之后再生成DocumentFragment

• 提问者 一天宏图 #1

  我再详细说下我理解中的问题，先说理解：
  
  1.虚拟DOM和state变化后的虚拟DOM进行对比,diff后只更新变化的那一小部分页面DOM
  
  2.虚拟DOM 避免了把真实DOM对象全部信息更新全部html元素的“回流和重绘"，所以更快
  
  我的问题是:我的问题是:   是拿DocumentFragment对象和虚拟DOM比效率
  
   2.1 JQuery3.3后使用DocumentFragment对象渲染过程
  
      1.页面加载,会获取到JS-DOM对象
  
      2.页面数据发生变化  然后比较新旧DOM 
  
      3.两个JS-->DOM对象比较后生成的 DocumentFragment对象, 
  
         DocumentFragment对象也是记录了差异部分的对象,
  
      4.然后再去渲染页面变化了部分
  
   2.2 React虚拟DOM比较如下：
  
     1.页面加载,会生成虚拟DOM
  
      2.页面数据发生变化  生成新的虚拟DOM,然后比较新旧虚拟DOM 
  
      3.DIFF比较虚拟DOM的差异部分,只去渲染页面变化了的部分数据
  
  
  
  问题：2.1 和2.2 都是对象比较差异后 渲染页面  2.2比2.1快是不是仅仅只是快在虚拟DOM的同层比较Diff算法上呢?

Answer 3

_Jack_Han_ 2020-12-05 17:52:53

个人理解：

1. Dom对象也是对象，也拥有属性名称和值，以及子元素，获取到DOM元素后可以拿来和虚拟DOM对象做比对；

2. 在state或者props更新后，render函数会再次执行，render函数的返回值就是虚拟DOM对象。

• 提问者 一天宏图 #1

  谢谢你的回答