餐厅网站设计,哪里做网站排名,网站流量统计实现,wordpress数据库搬家文章目录 9.1 减少 DOM 操作的性能开销9.2 DOM 复用与 key 的作用9.3 找到需要移动的元素9.4 如何移动元素9.5 添加新元素9.6 移除不存在的元素 系列目录#xff1a;【Vue.js设计与实现】阅读笔记目录
当新旧vnode 的子节点都是一组节点时#xff0c;为了以最小的性能… 文章目录 9.1 减少 DOM 操作的性能开销9.2 DOM 复用与 key 的作用9.3 找到需要移动的元素9.4 如何移动元素9.5 添加新元素9.6 移除不存在的元素 系列目录【Vue.js设计与实现】阅读笔记目录
当新旧vnode 的子节点都是一组节点时为了以最小的性能开销完成更新操作需要比较两组子节点用于比较的算法就叫作 Diff 算法。
9.1 减少 DOM 操作的性能开销
核心 Diff 只关心新旧虚拟节点都存在一组子节点的情况。
假设有新旧DOM如下
const oldVNode {type: div,children: [{ type: p, children: 1 },{ type: p, children: 2 },{ type: p, children: 3 },],
};const newVNode {type: div,children: [{ type: p, children: 4 },{ type: p, children: 5 },{ type: p, children: 6 },],
};节点标签都一样只是文本内容不同可以直接更新。 patch就是更新的方法。 const patchChildren (n1, n2, container) {if (typeof n2.children string) {// ...} else if (Array.isArray(n2.children)) {//const oldChildren n1.children;const newChildren n2.children;const oldLen oldChildren.lengt,newLen newChildren.length;const commonLength Math.min(oldLen, newLen);for (let i 0; i commonLength; i) {patch(oldChildren[i], newChildren[i], container);}// 有新的要挂载if (newLen oldLen) {for (let i commonLength; i newLen; i) {patch(null, newChildren[i], container);}}// 有旧的要卸载else if (newLen oldLen) {for (let i commonLength; i oldLen; i) {unmount(oldChildren[i]);}}} else {// ...}
};9.2 DOM 复用与 key 的作用
假设新旧DOM的type不完全一样
const oldChildren [{ type: p, children: 1 },{ type: div, children: 2 },{ type: span, children: 3 },
];const newChildren [{ type: span, children: 4 },{ type: p, children: 5 },{ type: div, children: 6 },
];可以通过 DOM 的移动来完成子节点的更新这要比不断地执行子节点的卸载和挂载性能更好。
需要引入额外的key作为vnode的标识key相当于一个节点的身份证号如果两个虚拟节点具有相同的key和vnode.type这意味着在更新时可以复用DOM即只需要通过移动来完成更新。
const patchChildren2 (n1, n2, container) {if (typeof n2.children string) {// ...} else if (Array.isArray(n2.children)) {//const oldChildren n1.children;const newChildren n2.children;const oldLen oldChildren.lengt,newLen newChildren.length;// 遍历新的childrenfor (let i 0; i newLen; i) {const newVNode newChildren[i];for (let j 0; j oldLen; j) {const oldVNode oldChildren[j];// key相同可以复用但要更新内容if (newVNode.key oldVNode.key) {patch(oldVNode, newVNode, container);break; // 找到了唯一可以复用的}}}} else {// ...}
};9.3 找到需要移动的元素
先逆向思考在什么情况下节点不需要移动 答当新旧两组节点的顺序不变时就不需要额外的移动操作。
有例子如下
旧14523
新12345则新的节点对应的旧节点的索引是为了方便这里从1开始
14523我们找索引的递增。 索引不是递增的就要在后面插入。
上述例子的旧节点的123不需要移动45要从旧的位置移动到新位置即4在3的后面5在4的后面。就得到了新节点。
使用lastIndex变量存储最大索引值
const patchChildren3 (n1, n2, container) {if (typeof n2.children string) {// ...} else if (Array.isArray(n2.children)) {//const oldChildren n1.children;const newChildren n2.children;// 最大索引值let lastIndex 0;for (let i 0; i newChildren.length; i) {const newVNode newChildren[i];for (let j 0; j oldChildren.length; j) {const oldVNode oldChildren[i];if (newVNode.key oldVNode.key) {patch(oldVNode, newVNode, container);if (j lastIndex) {// 说明不是递增这里需要移动} else {// 在递增更新lastIndexlastIndex j;}break;}}}} else {// ...}
};9.4 如何移动元素
const eln2.eln1.el使用赋值语句对DOM元素进行复用。在复用了 DOM 元素之后新节点也将持有对真实 DOM 的引用 根据上一节所属新子节点对应旧子节点索引递增的不变。
上图新子节点对应旧子节点的索引为
2 0 1因此p-1和p-2要移动p-1加在p-3后p-2加在p-1后 9.5 添加新元素
新节点没有在旧节点找到说明这是新元素。直接添加。
preVnode 是当前要添加节点的前一个。anchor 是要加节点的位置。
if (!find) {const preVnode newChildren[i - 1];let anchor null;if (preVnode) {anchor preVnode.el.nextSibling; // 前一个的后一个} else {// 是第一个节点anchor container.firstChild;}// 挂载patch(null, newVNode, container, anchor);
}如图这里的preVnode是p-1 9.6 移除不存在的元素
直接删除不存在的节点。
完整的代码
const patchChildren4 (n1, n2, container) {if (typeof n2.children string) {// ...} else if (Array.isArray(n2.children)) {//const oldChildren n1.children;const newChildren n2.children;let lastIndex 0;for (let i 0; i newChildren.length; i) {const newVNode newChildren[i];let j 0;let find false; // 是否找到可复用的节点for (j; j oldChildren.length; j) {const oldVNode oldChildren[j];if (newVNode.key oldVNode.key) {find true;patch(oldVNode, newVNode, container);if (j lastIndex) {// 代码运行到这里说明newVNode的真实DOM需要移动const preVNode newChildren[i - 1];// 如果preVNode不存在说明当前newVNode是第一个节点不需要移动if (preVNode) {// 我们要将newVNode对应的真实DOM移到preVNode对应的真实DOM后面const anchor preVNode.el.nextSibling;// 调用insert将newVNode对应的DOM插入到锚点前即preNode对应的真实DOM后insert(newVNode.el, container, anchor);}} else {lastIndex j;}break;}}// 新节点if (!find) {const preVnode newChildren[i - 1];let anchor null;if (preVnode) {anchor preVnode.el.nextSibling;} else {// 是第一个节点anchor container.firstChild;}// 挂载patch(null, newVNode, container, anchor);}// 删除要删除的节点for (let i 0; i oldChildren.length; i) {const oldVNode oldChildren[i];const has newChildren.find((vnode) vnode.key oldVNode.key);if (!has) {unmount(oldVNode);} else {// ...}}}} else {// ...}
};
