老师,看您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回答
-
DocumentFragment 依然无法和虚拟DOM的性能媲美,以为即便你局部比对差异,DocumentFragment 的元素上,会包含巨多和dom相关的属性,比较的量要远远大于虚拟DOM对应的简单js对象,所以虚拟DOM性能依然是更好的,毋庸置疑。
不是DIff算法,如果只是diff算法,那么DocumentFragment 用上diff也很快呀,其实本质还是,DocumentFragment还是dom,每个节点上的东西,远多与js的一个对象,这才是快慢本质的原因。diff 只是更进一步提升了虚拟dom的比对性能。
012020-12-13
相似问题