从模板到虚拟Dom 再到 DOM树

是什么

1,虚拟dom:js直接操作dom的代价是相对昂贵的,每次操作dom都会让浏览器茶农头开始执行一遍流程,

                       每次更新执行一次,假若我某一次操作导致页面有10个节点更新,js直接操作dom就是10次浏览器计算,

                       而虚拟dom则会将10次更新对比旧代码保存在一个js对象(虚拟dom)中,然后一次性更新到Dom树上,这样就节省了大量无用的计算

                       而且,单个节点更新虚拟dom要比实际操作dom更新要快得多.

 

2,AST:vue模板想要转换成虚拟dom,就需要处理模板上插值,指令,而AST便是为了描述vue模板而生的,他可以通过对象来描述模板结构有什么,

                需要执行什么,最后使用对应render函数生成新的虚拟dom,AST本身是不会变的,他只会在模板编译阶段出现,而后续的数据更新时不会变更AST,

                变更只有AST上代表变量的值,然后经过render生成新的虚拟Dom

 

 

3,diff算法:所谓diff算法其实就是新虚拟dom与旧虚拟dom的对比算法

    1)同层级对比,若相同再开始深度对比

    2)深度对比优先,直到该分支的节全部对比完毕在移动位置对比其他分支

    3)对比方式

         a,此节点是否被移除 -> 添加新的节点

         b,节点一样,属性是否被改变 -> 旧属性改为新属性

         c,节点一样,文本内容被改变-> 旧内容改为新内容

         d,节点要被整个替换 -> 结构完全不相同 移除整个替换

 

 

 

 

参考  https://www.cnblogs.com/simpul/p/11583383.html

 

上一篇:Vue模版编译原理知道吗,能简单说一下吗?


下一篇:浏览器工作原理及V8引擎