初探Virtual dom & diff算法

问： Virtual dom 是什么？为何会存在Virtual dom? 答： 用JS模拟DOM结构。原因： 1.DOM操作是昂贵的，将DOM对比放在JS层，JS运行效率高 2.需要尽量减少DOM操作 我们通过个小例子来看什么是用JS模拟DOM结构：

• Item 1
• Item 2

====>通过某种方法将上面的html代码转为js对象 { tag: ‘ul’, attires: {id: ‘list’}, children: [ { tag: ‘li’, attires: {className: ‘item’}, children: [‘Item1'] }, { tag: ‘li’, attires: {className: ‘item’}, children: [‘Item2'] }, ] } 问： vdom如何使用，核心函数是什么？ 答： snabbdom是virtual dom的一种实现库，附上github地址https://github.com/snabbdom/snabbdom 核心API h(‘<标签名>’, {…属性…}, […子元素…]) h(‘<标签名>’, {…属性…}, '...') patch(container, vnode) =》 将vnode渲染在页面上 初次渲染 patch(vnode, newVnode) => rerender update h函数可以生成vnode节点，这块跟react解析jsx（React.createElement方法）很像，都是生成vnode。h函数的传参，第一个参数是标签名。第二个是此标签上的属性，比如style, class, 事件等。第三个是children，如果标签下面没有子元素只有显示文字的话只需传字符串就可以了，但如果有子元素的话还需要第三个参数传入子元素的vnode同样使用h函数生成。 而patch函数有两种，一个是在初次渲染时调用，传参分别是container元素和生成的vnode。第二种是在页面更新时re-render时调用，传参分别是旧的vnode和生成的新的newVnode。 具体看以下的代码例子： // 构建一个虚拟节点，h函数做的事情可以理解为上面所转化的js对象 var vnode = h(‘ul#list’, {}, [ h(‘li.item’, {}, ‘Item1’), h(‘li.item’, {}, ‘Item2’), ]) // 真实构建一个container var container = document.getElementById(‘container’) // 把vnode渲染进空的container容器中 patch(container, vnode) // 模拟点击button改变值 var btnChange = document.getElementById(‘btn-change’) btnChange.addEventListener(‘click’, function(){ // 构建新的虚拟节点，数字不一样 var newVnode = h(‘ul#list’, {}, [ h(‘li.item’, {}, ‘Item1’), h(‘li.item’, {}, ‘ItemB’), h(‘li.item’, {}, ‘Item3’), ]) // 将旧的节点和新的节点传入patch函数，patch会diff算法计算实际改变的地方并只渲染dom改动点 patch(vnode, newVnode) }) 问： 介绍一下diff算法 答： diff算法是linux的基础命令 vdom中应用diff算法是为了找出需要更新的节点 实现：patch(container, vnode)和patch(vnode, newVnode) 核心逻辑：createElement和updateChildren 我们来看patch(container, vnode) 的核心逻辑代码（简写）： function createElement(vnode) { var tag = vnode.tag var attires = vnode.attrs || {} var children = vnode.children || [] if (!tag) { return null } // 创建元素 var elem = document.createElement(tag) // 属性 var attrName for (attrName in attrs) { if(attrs.hasOwnProperty(attrName)) { elem.setAttribute(attrName, attrs[attrName]) } } //子元素 children.forEach(function(childVnode) { // 递归调用 createElement 创建子元素 elem.appendChild(createElement(childVnode)) }) return elem } 再来看patch(vnode, newVnode)的核心逻辑代码，同样是简写。。 function updateChildren(vnode, newVnode){ var children = vnode.children || [] var newChildren = newVnode.children || [] // 遍历现有的children children.forEach(function(child, index){ var newChild = newChildren[index] if(newChild == null){ return } if(child.tag === newChild.tag){ //两者tag一样 updateChildren(child, newChild) } else { replaceNode(child, newChild) } }) } PS: diff算法需要考虑的地方 节点新增和删除 节点重新排序 节点属性，样式，事件绑定 如何极致压榨性能

本文章由javascript技术分享原创和收集