以装修房子为例,如果我们仅需要在客厅新添一座沙发或者将卧室的床换个位置。那么将整个房子重新翻修显然是不切实际的,我们通常的做法是在原先装修的基础上做微小的改动即可。
对于 DOM 树来讲,也是同样的道理,如果仅仅是新增了一个标签或者修改了某一个标签的属性或内容。那么引起整个 DOM 树的重新渲染显然是对性能和资源的极大浪费,虽然我们的计算机每秒能进行上亿次的计算。实际上,我们只需要找出新旧 DOM 树存在差异的地方,只针对这一块区域进行重新渲染就可以了。
所以 Diff 算法应运而生,diff 取自 different (不同的),Diff算法的作用,总结来说,就是:精细化对比,最小量更新。
import{
init }from'snabbdom/init'import{
classModule }from'snabbdom/modules/class'import{
propsModule }from'snabbdom/modules/props'import{
styleModule }from'snabbdom/modules/style'import{
eventListenersModule }from'snabbdom/modules/eventlisteners'import{
h }from'snabbdom/h'// helper function for creating vnodesvar patch =init([// Init patch function with chosen modules
classModule,// makes it easy to toggle classes
propsModule,// for setting properties on DOM elements
styleModule,// handles styling on elements with support for animations
eventListenersModule // attaches event listeners])var container = document.getElementById('container')var vnode =h('div#container.two.classes',{
on:{
click:function(){
}}},[h('span',{
style:{
fontWeight:'bold'}},'This is bold'),' and this is just normal text',h('a',{
props:{
href:'/foo'}},"I'll take you places!")])// Patch into empty DOM element – this modifies the DOM as a side effectpatch(container, vnode)var newVnode =h('div#container.two.classes',{
on:{
click:function(){
}}},[h('span',{
style:{
fontWeight:'normal', fontStyle:'italic'}},'This is now italic type'),' and this is still just normal text',h('a',{
props:{
href:'/bar'}},"I'll take you places!")])// Second `patch` invocationpatch(vnode, newVnode)// Snabbdom efficiently updates the old view to the new state