老师,看您7天没有回答我的问题,我再重新发下问题和理解

来源:5-6 使用 Redux 完成 TodoList 删除功能

一天宏图

2020-12-11

老师,看您7天没有回答我的问题,我再重新发下问题和理解,先说理解:

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算法上呢?

写回答

1回答

Dell

2020-12-12

  1.  DocumentFragment 依然无法和虚拟DOM的性能媲美,以为即便你局部比对差异,DocumentFragment 的元素上,会包含巨多和dom相关的属性,比较的量要远远大于虚拟DOM对应的简单js对象,所以虚拟DOM性能依然是更好的,毋庸置疑。

  2. 不是DIff算法,如果只是diff算法,那么DocumentFragment 用上diff也很快呀,其实本质还是,DocumentFragment还是dom,每个节点上的东西,远多与js的一个对象,这才是快慢本质的原因。diff 只是更进一步提升了虚拟dom的比对性能。

0
1
一天宏图
非常感谢!
2020-12-13
共1条回复

React零基础入门到实战,完成企业级项目简书网站开发

主流新技术 React-redux,React-router4,贯穿基础语法

5275 学习 · 2496 问题

查看课程