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

js · 2017年4月1日 · 10471 次浏览
注：本文观点只针对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做特殊化处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var getRandIndex=function(){
        var d='div,li,span,textarea,span,h1,h2,font,ol,p'.split(',');
        var num =parseInt(limit/3);
        var rand={};
        for(var i =0;i<num;i++){
            var bc="rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",100)";
            var k=parseInt(Math.random()*limit);
            rand[k]={
                dom:d[parseInt(Math.random()*d.length)],
                val:'II-'+k,
                attr:{'data-aa':'aa-'+k,'data-bb':'bb-'+k},
                style:{"border-width":"1px","background-color":bc,"border-color":bc}
            };
        }
        return rand;
    };
    var olddata=getRandIndex();

 

2，构造差异数据（diff后的数据），对olddata处理，形成差异数据
1
2
3
4
5
6
7
8
9
10
11
var getNewData=function(){
        var tmp=clone(olddata);
        for(var k in tmp){
            var bc="rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",100)";
            tmp[k].val='XX-'+k;
            tmp[k].attr={'xx-data-aa':'aa-'+k,'xx-data-bb':'bb-'+k};
            tmp[k].style={"background-color":bc,"border-color":bc}
        }
        return tmp;
    };
    var newdata=getNewData();

 

3，虚拟dom方式采用操作dom方式将diif变更
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function updateVirtualDom(){
        var d = new Duration("将改变应用到dom上");
 
        d.start();
        var cn=$vdom.childNodes;
        for(var i in newdata){
            var _dom=cn[i];
            if(_dom.tagName=="INPUT"){
                _dom.value=newdata[i].val;
            }else{
                _dom.innerHTML=newdata[i].val;
            }
            for(var s in newdata[i].style){
                //if(styleName.indexOf(s)<0)continue;
                var style_s=s;
                if(s.indexOf('-')>0){
                    var _s=s.split('-');
                    style_s=_s[0]+_s[1][0].toUpperCase()+_s[1].substr(1);
                }
                var k='_dom.style.'+style_s+'="'+newdata[i].style[s]+'";';
                eval(k);
            }
            for(var x in newdata[i].attr){
                _dom[x]=newdata[i].attr[x];
            }
        }
        d.end();
        $vdom_info.innerText=d.getTime();
    }

 

4，原始方式采用清空dom重建方式
1
2
3
4
5
6
7
8
9
10
11
12
13
function clearReCreateDom(){
        var d = new Duration("清空后重建");
 
        d.start();
        var html = '';
        for(var i=0;i<limit;i++){
            var diy=newdata[i]?newdata[i]:{dom:"li",val:i,attr:{'data-val-i':i}};
            html+=oneDom(diy);
        }
        $rdom.innerHTML=html;
        d.end();
        $rdom_info.innerText=d.getTime();
    }

 

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
打赏
标签:
暂无评论

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

发表评论