面试官问：如何理解VirtualDOM？-创新互联

再进入页面:

你会发现，只有改变的栏目才闪烁，也就是进行重绘，数据没有改变的栏目还是保持原样，这样就大大节省了浏览器重新渲染的开销。四、diff算法

1、什么是diff算法？

所谓diff算法，就是用来找出两段文本之间的差异的一种算法。

作为一个前端，大家经常会听到diff算法这个词，其实diff并不是前端原创的算法，其实这一个算法早已在linux的diff命令中有所体现，并且大家常用的git diff也是运用的diff算法。

2、vdom为什么用diff算法

DOM操作是非常昂贵的，因此我们需要尽量地减少DOM操作。这就需要找出本次DOM必须更新的节点来更新，其他的不更新，这个找出的过程，就需要应用diff算法。

3、vdom中diff算法的简易实现

以下代码只是帮助大家理解diff算法的原理和流程，不可用于生产环境。

将vdom转化为真实dom：

const createElement = (vnode) => {
 let tag = vnode.tag;
 let attrs = vnode.attrs || {};
 let children = vnode.children || [];
 if(!tag) {
 return null;
 }
 //创建元素
 let elem = document.createElement(tag);
 //属性
 let attrName;
 for (attrName in attrs) {
 if(attrs.hasOwnProperty(attrName)) {
 elem.setAttribute(attrName, attrs[attrName]);
 }
 }
 //子元素
 children.forEach(childVnode => {
 //给elem添加子元素
 elem.appendChild(createElement(childVnode));
 })
 //返回真实的dom元素
 return elem;
}
复制代码

用简易diff算法做更新操作:

function updateChildren(vnode, newVnode) {
 let children = vnode.children || [];
 let newChildren = newVnode.children || [];
 children.forEach((childVnode, index) => {
 let newChildVNode = newChildren[index];
 if(childVnode.tag === newChildVNode.tag) {
 //深层次对比, 递归过程
 updateChildren(childVnode, newChildVNode);
 } else {
 //替换
 replaceNode(childVnode, newChildVNode);
 }
 })
}
复制代码

参考资料:

知乎尤雨溪回答

揭秘一线互联网企业 前端JavaScript高级面试

前端进阶与面试指南

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。