virtual-dom & diff

作者: 一只重拾梦想的小水 | 来源:发表于2019-06-05 19:59 被阅读0次

S: 实际dom树非常复杂（单个node挂载的属性巨多，200来个），没有优化策略，频繁触发重排，对性能消耗严重

A: 虚拟dom：与实际dom树结构一致，只存储必要信息 tagName\ props\ children

createElement：创建虚拟dom

diff：深度优先 dfs -> patch

patch：需要变更的补丁，type: replace\ reorder\ props\ text, node\content

深度优先实际dom树，对patch存在的变更触发dom更新（replaceChild \reOrder\ setProps\ text）

key用来做diff-reOrder算法的标志\定位（方便复用）

virtual-dom & diff
S: 实际dom树非常复杂（单个node挂载的属性巨多，200来个），没有优化策略，频繁触发重排，对性能消耗严重 ...
vitual-dom原理与简单实现
前言目前广为人知的React和Vue都采用了virtual-dom，Virtual DOM凭借其高效的diff算...
Virtual-Dom
Virtual-Dom virtual-dom是一种利用JavaScript构建dom的技术，主要解决了复杂应用程...
virtual DOM 实现原理
virtual DOM 实现： virtual-dom Snabbdom 对比数据结构virtual Node ...
virtual-dom
编程中永恒不变的两大主题：效率和质量历史背景：web开发几个阶段石器时代web页面展示简单的静态图文信息，那个...
Git 命令生成 diff 文件
git diff 生成 diff 文件
git 基本操作
git diff git diff,比较 working tree 与 staged 文件的区别。git diff...
diff 和 patch 命令简明教程
diff 命令格式： diff [option] file1 file2 或 diff [option] dir...
iOS "The sandbox is not in sync
diff: /../Podfile.lock: No such file or directory diff: /...
Vue原理「十二」-- vdom和diff算法 *****
diff 算法概述 diff即对比，是一个广泛的概念，如linux diff、git diff两个JS对象也可以做...