Virtual dom 虚拟dom 真的快吗???

注:本文观点只针对web,不针对使用react等js技术开发的app,没测试这里,断不敢乱下结论!
Virtual dom 虚拟dom 真的快吗???
虚拟dom真的像说的那么美好吗???
1,先在内存中构造虚拟dom D1
2,构造变化后的虚拟dom D2
3,比较D2 D1,得到diff
4,将diff应用到原来的dom上
一切看起来都很美好,diff算法很牛逼,效率杠杠的;但是,但是,最后一句话“4,将diff应用到原来的dom上” 还是要操作dom;
下面我们就看看两种做法在web效率上的差异,一定是做了你才知道,部分代码截取,后边有完整代码演示;
1,构造原始dom数据,limit =5000,5000个dom,对其中1/3做特殊化处理

 

2,构造差异数据(diff后的数据),对olddata处理,形成差异数据

 

3,虚拟dom方式采用操作dom方式将diif变更

 

4,原始方式采用清空dom重建方式

 

5,比较时间
虚拟dom耗时80~90毫秒
原始删空重建50毫秒
演示代码地址 http://vking.wang/1.0/doc/javascript/virtual-dom.html
关于演示代码中为什么使用innerHTML 而不是用new请看这里 http://vking.wang/1.0/doc/javascript/dom.html
打赏
暂无评论

请到【后台 - 用户 - 我的个人资料】中填写个人说明。

发表评论